今天我们讨论一下常用的几种继承方法:
首先我们创建一个动物函数Animal: function Animal () { this.species = '动物' }
再写准备名叫猫咪的函数Cat:
function Cat (name, color) {
this.name = name
this.color = color
}
最终目的是让Cat继承Animal的属性{spacies : "动物"}; 方法如下:
一、 构造函数绑定
首先解释下apply方法:
官方定义: apply方法能劫持另外一个对象的方法，继承另外一个对象的属性.其中第一个参数是用来代替原函数的this,第二个参数是一个数组集合;
说人话就是在CatA里调用Animal方法,同时改变Animal方法的this指向:
Animal.apply(this, arguments)
function Animal () { this.species = '动物' } function CatA (name, color) { Animal.apply(this, arguments) this.name = name this.color = color } // 打印结果如下: console.log(new CatA('mimiA', 'red')) // CatA {species: "动物", name: "mimiA", color: "red"}
apply方法是最简单也是最最基础的一种'继承'方式;
二、prototype模式-new Animal（）赋值给Cat
父函数实例一下赋值给子函数:
CatB.prototype = new Animal();
这样写有一个小坑, 就是子函数的构造函数会被父函数覆盖, 指向了父函数; 解决方法有两个, 一个是重新修正指向, 另一个是拷贝赋值;
function Animal () { this.species = '动物' } function CatB (name, color) { this.name = name this.color = color } CatB.prototype = new Animal() // 修正子函数的构造函数指向; 即: constructor: ƒ Animal -> constructor: ƒ CatB CatB.prototype.constructor = CatB
// 打印结果如下: console.log(new CatB('mimiB', 'red')) // CatB {name: "mimiB", color: "red"} && {CatB.prototype.species: "动物"}
说到原型继承, 为什么我们要这么做呢, 举个简单的栗子:
我们写两个猫咪的函数, 如果不继承'species'属性, 我们就需要写两遍, 这样会出现冗余
function CatAA (name, color) {
this.name = name
this.color = color
this.species = '动物' // 公共属性
}
function CatBB (name, color) {
this.name = name
this.color = color
this.species = '动物' // 公共属性
}
这个就像是标签里的class和style一样, 如果同一个样式多次出现, 我们就该考虑把他们提取出来, 放在class里;
关于构造函数和拷贝赋值, 我会在接下来两期单做说明 ( Link ), 在此不具;
三、 prototype模式-Animal原型赋值给Cat原型
原型链之间赋值:
CatC.prototype = Animal.prototype
这样改变原型属性,CatC原型的构造函数同样也会被Animal覆盖掉!
需要修正Cat构造函数指向:
CatC.prototype.constructor = CatC
function Animal () {} Animal.prototype.species = "动物" function CatC (name, color) { this.name = name this.color = color }
CatC.prototype = Animal.prototype CatC.prototype.constructor = CatC // 修正子函数的构造函数指向! // 注意此时出现一个隐患: 由于CatC和Animal的原型引用地址相同, 此时Animal原型的构造函数也被CatC污染了
console.log(new CatC('mimiC', 'red')) // CatC {name: 'miniC', color: 'red'} && {CatC.prototype.species: "动物"} console.log(new Animal()) // Animal.prototype.constructor: CatC
这里我们对上面的方法进行优化: 利用空对象作为中介,避免改变父级构造函数
他其实是方法二和方法三的组合:
首先写一个用来过渡的空函数F
function F () {}
先把Animal原型赋值给F, 因为F是一个无用的且几乎不占内存的空函数
所以无须担心构造指向改变等问题
F.prototype = Animal.prototype
然后让Cat继承new F()
CatD.prototype = new F()
function Animal () {} Animal.prototype.species = "动物" function CatD (name, color) { this.name = name this.color = color } function F () {} // 写一个用来过渡的空函数F F.prototype = Animal.prototype CatD.prototype = new F() // 此时的F角色是: 具有Animal原型的空函数 CatD.prototype.constructor = CatD // 修正子函数构造函数指向 console.log(new CatD('mimiD', 'red')) //CatD.prototype.prototype.species: "动物"
四、 拷贝继承
我们可以开一个for in循环对原型上的属性进行拷贝赋值
其中原型上的constructor是私有属性, 不会被遍历到的
function Animal () {} Animal.prototype.species = "动物" function CatE (name, color) { this.name = name this.color = color } // 写一个函数原型属性拷贝的方法: function extend (src, fn) { var s = src.prototype, f = fn.prototype for (var i in f) { s[i] = f[i] // 其中原型上的constructor是私有属性, 不会被遍历到的 } } extend(CatE, Animal) console.log(new CatE('mimiE', 'red')) // CatE {name: 'miniE', color: 'red'} && CatE.prototype.species: '动物'
五、 原型继承之ES6写法
;(function(){ // 为区分以上方法, 我把ES6写在了闭包里; 啰嗦一句,自调函数前面最好写一个分号,这样会降低多人协助报错率 class Animal { // 定义了一个Animal的类,里面的构造函数必须写 constructor () { this.species = '动物' } } class Cat extends Animal { // 定义了一个Cat类, 并且基层了上面的类Animal constructor (name, color) { super() // 继承类时, 需要super调用Animal this.name = name this.color = color } } console.log(new Cat('mimi','red')) // Cat {name: 'mini', color: 'red', species: '动物'} && Cat原型的构造函数是: class Cat; })()