class
- class 与es5function差异
- class只能使用new命令执行,es5function可以直接执行
- class类内部定义方法不可枚举
- 继承时子类生成原理不同
- class内部定义的属性只有通过this定义的属性是绑定在实例对象上,其他实例属性绑定在原型对象上,静态属性绑定在类对象上
class A{
/* 尚未完全支持*/
static b = 1 //静态属性,绑定在类对象上
b = 2//实例属性,绑定在实例对象上
/* 尚未完全支持*/
static a(){//静态方法,绑定在类对象上
console.log(1)
}
constructor(){
//实例属性,绑定在实例对象上
this.a = ()=>console.log(2)
}
a(){//实例方法,绑定在原型对象上
console.log(3)
}
}
let a = new A()
A.a()//1
a.a()//2
a.__proto__.a()//3
A.prototype.a()//3
- class继承原理
- es5先使用子类构造函数生成子类实例对象this,然后修改子类实例对象的原型对象为父类实现继承
- es6 extends继承先调用父类构造函数生成子类对象的实例this(
Parent.prototype.constructor.call(this)
),然后再通过子类构造函数修改this
- 构造函数继承,
Child.__proto__ === Parent
- 原型方法继承
Child.prototype.__proto__ ===Parent.prototype
- this
- 静态方法的this指向类对象
- 实例方法的this指向实例对象
- super
- 作为函数使用作为父类的构造函数,只能在子类构造函数里执行,只能执行一次,且必须执行
- 作为对象使用,在普通方法中指向父类的原型对象
- 作为对象使用,在静态方法中指向父类的类对象
- 使用super进行赋值时,
super===this
tips
- class内部无法定义静态属性和绑定在原型对象上的属性,只能定义相应方法
- 类
class A{}
class B extends A {}
let a = new A()
let b = new B()
// 类的构造函数就是当前类
A.prototype.constructor === A
B.prototype.constructor === B
// 实例对象的__proto__指向对应构造函数的prototype
a.__proto__ === A.prototype
b.__proto__ === B.prototype
//子类的构造函数继承自父类的构造函数
B.prototype.constructor.__proto__ === A.prototype.constructor
B.__proto__ === A
// 子类对象的原型方法继承自父类的原型方法
B.prototype.__proto__ === A.prototype