web前端开发技术讲解之JS继承方法总结

JS面向对象中，继承相对是比较难的，即使看了很多文章，可能依然不明白，下面我谈谈我的理解。

1.构造函数继承

function p0(){

this.name = "p0";

this.colors = ["pink","black","gray"];}

function children0(){

p0.call( this );

this.type = "children0";}

通过这种在子类中执行父类的构造函数调用，把父类构造函数的this指向为子类实例化对象引用，从而导致父类执行的时候父类里面的属性都会被挂载到子类的实例上去。

new children0().name; // p0

new children0().colors; // ["pink","black","gray"]

这种方式，父类原型上的东西没法继承，因此函数复用也就无从谈起

p0.prototype.sex = "男";

p0.prototype.say = function() {

console.log(" hellow");}

new children0().sex; // undefined

// Uncaught TypeError: (intermediate value).say is not a function

new children0().say();

缺点：children0无法继承p0的原型对象，只能算是部分继承

2.原型链式继承

function p1(){

this.name = "p1";

this.colors = ["red","blue","yellow"];

}function Children1(){

this.name = "Children1";}

Children1.prototype = new p1();

p1.prototype.sex = "女";

p1.prototype.say = function() {

console.log(" hellow! ");}

new Children1().sex; // 女

new Children1().say(); //hellow!

这种方式确实解决了上面借用构造函数继承方式的缺点。

但是，这种方式仍有缺点，如下：

var s1 = new Children1();

s1.colors.push("black");

var s2 = new Children1();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (4) ["red", "blue", "yellow", "balck"]

在这里实例化了两个Children1，s1中为父类的colors属性push了一个颜色black，但是s2也改变了。因为原型对象是共用的。

但我们并不想这样，这是这个方法缺点。

3.组合式继承

意思就是把构造函数和原型链继承结合起来。

function p2(){

this.name = "p2";

this.colors = ["red","blue","yellow"];}

function Children2(){

p2.call(this);

this.type = "Children2";}

Children2.prototype = new p2()

var s1 = new Children2();

s1.colors.push("black");

var s2 = new Children2();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (3) ["red", "blue", "yellow"]

可以看到，s2和s1两个实例对象已经被隔离了。

但这种方式仍有缺点。父类的构造函数被执行了两次，第一次是Children2.prototype = new p2()，第二次是在实例化的时候，这是没有必要的。

组合式继承优化1

直接把父类的原型对象赋给子类的原型对象

function p3(){

this.name = "p3";

this.colors = ["red","blue","yellow"];}

p3.prototype.sex = "男";

p3.prototype.say = function(){console.log("Oh, My God！")}

function Children3(){

p3.call(this);

this.type = "Children3";}

Children3.prototype = p3.prototype;

var s1 = new Children3();

var s2 = new Children3();

console.log(s1, s2);

但是，看如下代码：

console.log(s1 instanceof Child3); // true

console.log(s1 instanceof Parent3); // true

可以看到，我们无法区分实例对象s1到底是由Children3直接实例化的还是p3直接实例化的。用instanceof关键字来判断是否是某个对象的实例就基本无效了。

我们还可以用.constructor来观察对象是不是某个类的实例：

console.log(s1.constructor.name); // p3

可以看出，s1的构造函数是父类，而不是子类Children3，这并不是我们想要的。

组合式继承优化2

function p4(){

this.name = "p4";

this.colors = ["red","blue","yellow"];}

p4.prototype.sex = "男";

p4.prototype.say = function(){console.log("Oh, My God！")}

function Children4(){

p4.call(this);

this.type = "Children4";}

Children4.prototype=Object.create(p4.prototyp；

Children4.prototype.constructor = Children4;

Object.create是一种创建对象的方式，它会创建一个中间对象

var p = {name: "p"}

var obj = Object.create(p)

// Object.create({ name: "p" })

通过这种方式创建对象，新创建的对象obj的原型就是p，同时obj也拥有了属性name，这个新创建的中间对象的原型对象就是它的参数。

这种方式解决了上面的所有问题，是继承的最好实现方式。