JS 原型_构造函数_原型链

213 阅读2分钟

Example

class Fan {
 constructor(a, b) {
     this.a = a;
     this.b = b;
 }
 play() {
     console.log(`play ${this.a} 和 ${this.b}`);
 }
}
let x = new Fan(12); 
let y = new Fan(34); 
x.play();//play 1 和 2
y.play();//play 3 和 4

构造函数/类(class)

上面代码中的Fan就是构造函数。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

原型

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承。

let Fan_prototype === Object.getPrototypeOf(x);

ES5获取对象原型对象的方法Object.getPrototypeOf(实例),上面代码中Fan_prototype就是原型。

  • 构造函数和原型
console.log(Fan_prototype.constructor === Fan);//true
console.log(Fan.prototype === Fan_prototype);//true

原型.constructor就是构造函数。构造函数.prototype就是原型。

实例(Instance)

实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可能不同。上面代码中xy都是根据Fan这个类创建出来的实例。

实例与原型和类

console.log(Fan_prototype === x.__proto__);//true
console.log(x.constructor === Fan);//true

实例.__proto__就是原型。实例.constructor就是构造函数。

console.log(x.__proto__ === y.__proto__);//true

类的所有实例共享一个原型对象,它们的原型都是Fan_prototype,所以__proto__属性是相等的。

Function函数

let Fun_prototype = Function.prototype;//Function的原型
console.log(Fan.__proto__ === Fun_prototype);//true

所有构造函数的__proto__指向Function的原型。

Objcet对象

let Obj_prototype = Object.prototype;//Object的原型
console.log(Fun_prototype.__proto__ === Obj_prototype);//true

Function的原型再向上找__proto__指向Object的原型。

console.log(Fan_prototype.__proto__ === Obj_prototype);//true

所有原型(当然包括Funciton)的__proto__指向Object的原型。