JS面向对象之类式继承

JS中没有类的概念，我们可以把JS中的构造函数看做是类。

function Father() { // 父类
    this.name = '名字';
}

Father.prototype.showName = function() {
    console.log(this.name);
}

function Child() { // 子类
}

Child.prototype = new Father; // 将父类的构造函数赋给子类的原型，实现类式继承

var child = new Child();

child.showName(); // 名字

为什么child可以找到showName方法呢？其实我们只要在Chrome控制台输出一下child就明白了
这里写图片描述
我们从图中可以看出child通过原型链找到了showName方法。但是我们也看出了这个方法的缺陷，就是Child(子类)的constructor变成了Father。

这是因为Child.prototype = new Father; 使得Child(子类)的原型被覆盖了的原因。那么，我们应该怎样解决这个问题了，其实我们只要把Child(子类)的constructor的指向改过来就可以了。

Child.prototype.constructor = Child; // 修正指向问题

然后，你就会发现指向修正过来了
这里写图片描述
修正了constructor指向就没有问题了吗？其实还是有坑在里面的，看下面的示例代码：

//类 : JS是没有类的概念的 , 把JS中的构造函数看做是类
function Father() { // 父类
    this.name = ['小明', '小红'];
}
Father.prototype.showName = function() {
    console.log(this.name);
}

function Child() { // 子类
}

Child.prototype = new Father;
Child.prototype.constructor = Child; // 修正指向问题

var child1= new Child();
child1.name.push('小蓝');

var child2= new Child();
console.log(child2.name); // ["小明", "小红", "小蓝"]

child1与child2是不同的实例，为什么它们的name却会相互影响呢？这是因为name是数组，而数组是引用类型的原因。那么我们应该怎样解决这个问题呢？把属性的继承和方法的继承分开来。

//类 : JS是没有类的概念的 , 把JS中的构造函数看做是类
function Father() { // 父类
    this.name = ['小明', '小红'];
}
Father.prototype.showName = function() {
    console.log(this.name);
}

function Child() { // 子类
    Father.call(this)   ; // 只将Father(父类)的属性继承给Child(子类)
}

var Temp = function() {};
Temp.prototype = Father.prototype; // 只将Father的方法赋给Temp

Child.prototype = new Temp(); // 只将Father的方法继承给Child
Child.prototype.constructor = Child; // 修正指向问题

var child1 = new Child();
child1.name.push('小蓝');

var child2 = new Child();
console.log(child2.name); // ["小明", "小红"]

我们发现，child1与child2两个实例就不会相互影响了，然后我们在Chrome控制台上查看一下child2与Temp
这里写图片描述

JS面向对象之类式继承

猜你喜欢