码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 Class

时间:2018-05-31 02:39:16      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:构造函数   继承   变量   es5   属性   默认   class   col   比较   

首先,主要是es5 与 es6 的比较!

es5开发没有类的概念,只是用函数模拟成构造函数来创建对象,使用原型链来继承方法。那么相对于es6来说,增加了类的概念,使得类的概念更加形象具体,更有利于开发着学习!

首先,学习下es6 类的写法

class Foo {
  constructor(name){
     // ...实例对象方法
    this.name = name;
  }
  
  // ..... 原型上方法
  study() {}
}

我们再来看下es5的构造函数写法:

function Foo(name) {
  // ... 实例方法
  this.name = name;
}

Foo.prototype.study = function () {}

对比下便可发现:constructor 相当于 es5写法中的构造函数,而class内部的方法则相当于es5 的Foo.prototype;可以发现es6的写法更加的直观!

但是es5与es6 也不是有些不同的地方

  1. class 内部定义的方法是不可枚举的,但是es5中prototype上的方式是可枚举的(不可枚举就是不可遍历)
  2. class内部的方法名是可以用变量的哦(如:[methodName](){}),但是在es5中是万万不能的
  3. class必须用new执行,而es5则可以直接Foo()执行
  4. class不会变量提升哦

es6要点:

  • constructor 默认返回实例对象,如果你知道return 返回个新对象,那就有意思喽
  • 获得实例对象的原型 Object.getPrototypeOf(xxx)    (这条不算)
  • class静态方法用static  静态属性要Foo.name=xxx; 这样单写,因为class内部没有定义静态属性的写法

ES6 Class

标签:构造函数   继承   变量   es5   属性   默认   class   col   比较   

原文地址:https://www.cnblogs.com/mawawa/p/9114272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!