Before we get started
首先明确,JS的继承是由原型链来实现的。(即使在ES6中class的extends,也更像是一种语法糖)
当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object )都有一个私有属性(称之为 _proto_)指向它的原型对象(prototype)。该原型对象也有一个自己的原型对象 ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
C++和Java使用new命令时,都会调用"类"的构造函数(constructor)
在Javascript语言中,new命令后面跟的不是类,而是构造函数
在 JavaScript 中,构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时,它就可以被称为构造方法(构造函数)。
那么new运算符具体干了什么呢?
var obj = {};
obj.__proto__ = F.prototype;
F.call(obj);
即
var o = new Foo();
// JavaScript 实际上执行的是:
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);
关于_proto_和prototype
那么上面的_proto_和prototype又是什么呢?
对象具有属性_proto_,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型。
eg.
let o1 = new Object()
// 则
o1.__proto__ === Object.prototype // true
而Function是特殊的对象,在Function中,除了和其他对象一样有_proto_对象以外,还有原型属性(prototype),这个属性指向原型对象,而原型对象有个叫constructor的属性,指回原构造函数。
eg.
let f1 = new Foo()
// 则
f1.__proto__ === Foo.prototype
Foo.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Foo.prototype.constructor === Foo
Object的原型对象用Object.prototype._proto_ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。
Object关于prototype的两个方法
// 等同于 B.__proto__= A
Object.setPrototypeOf(B, A)
// 从子类上获取父类
Object.getPrototypeOf(B)
JavaScript实现继承的几种方式
构造继承
function dog (name) {
this.name = name
}
// 共享的属性放在prototype中,只要更改prototype,所有实例的master属性都会被更改
dog.prototype = { master: 'Fog' }
// 生成两个实例对象
let dog1 = new dog('111')
let dog2 = new dog('222')
console.log(dog1.master) // Fog
console.log(dog2.master) // Fog
// 更改master
dog.prototype.master = 'Misty'
console.log(dog1.master) // Misty
console.log(dog2.master) // Misty
由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。
原型继承
即:把父类的私有+公有的属性和方法,都作为子类公有的属性。
核心思想:<code>Child.prototype = new Parent()</code>
实现的本质是重写了原型对象 ,通过将子类的原型指向了父类的实例,所以子类的实例就可以通过_proto_访问到 Child.prototype 也就是 Parent的实例
实例继承
核心思想:
function Child() {
let instance = new Parent()
return instance
}
拷贝继承
核心思想:循环遍历父类实例,然后父类实例的私有方法全部拿过来添加给子类实例
Call继承
核心思想:
function Child() {
Parent.call(this); //构造函数中的this就是当前实例
}
注意:call是function的方法
中间件继承
核心思想:<code>Child.prototype._proto_ = Parent.prototype</code>
Object.create()
ECMAScript 5 中引入了一个新方法:Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用 create 方法时传入的第一个参数。
ES6的extends
首先说明,ES6的Class中,所有定义的function方法(注意:在定义类的方法时,前面不需要加上 function 这个保留字),都是定义在prototype属性上的。
即:在类的实例上调用方法,其实就是调用原型上的方法。
此外,在类的内部定义的所有方法都是不可枚举的。(与ES5不同,注意)
Class之间可以通过extends关键字实现继承。
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承了父类的this对象。如果不调用super方法,子类就得不到this对象。
这与ES5不同:ES5是先创建子类的this,再将父类的方法添加到this上(Parent.apply(this))
而ES6:先创建父类的this,然后再用子类的构造函数修改this
而super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的