一、与 ES 5 的对比
ES 6
通过 class
来创建类,并实现类的继承。
具体创建方式如下:
// ES 5
function Man(name, age) {
// 在构造函数中添加每个实例的私有属性
this.name = name;
this.age = age;
}
Man.prototype = {
// 在原型中添加公共属性及方法
job: 'IT',
sayName() {
console.log(this.name);
}
}
const xh = new Man('xiaohong', 18);
const xm = new Man('xiaoming', 20);
xh.sayName(); // xiaohong
xm.sayName(); // xiaoming
// ES 6
class Man {
constructor(name, age){
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name)
}
}
const xh = new Man('xiaohong', 18);
const xm = new Man('xiaoming', 20);
xh.sayName(); // xiaohong
xm.sayName(); // xiaoming
仔细观察不难发现两者的区别及相似之处:
声明方式。
前者通过创建构造函数
Man
,后者则是使用class
声明一个类Man
.实例私有属性的添加。
前者通过在构造函数中实现,后者则是在
constuctor
方法中实现。不过他们的实现方式相同。实例公共方法的添加。
前者通过原型
Man.ptototype
来添加公共方法及属性,后者通过在constructor
中直接添加私有方法(当然,也可以通过prototype
方法),但,不能在class
内部实例公共的属性,不过可以通过下面这种方法:// 错误的做法 class A { a = 'fasf'; } // 正确的做法 class A {...} A.prototype.x = x;
调用方式。
他们都是通过
new
方法调用来生成实例对象,但前者可以直接调用Man
方法,后者直接调用(Man()
)则会报错。
其实, ES 6
是 ES 5
的一个语法糖而已,class
语法也只是将 ES 5
的语法进行了封装,在 ES 6
中,constructor
方法相当于构造函数,默认返回实例对象。
而定义在 constructor
之外的方法,相当于在类的 prototype
中写方法。
二、This 指向
在 class
中,this
指向实例对象。
但是一旦在外部调用类中的方法,this
的指向就会发生变化,所以,我们通常会在 constructor
中通过 bind
方法来绑定当前 this
.
class Man {
constructot() {
this.sayName = this.sayName.bind(this);
}
sayName() {
console.log(this.name)
}
}
class A {...}
A.prototype.x = x;