JS继承的集中方式

南易_站长

阅读量：21289

JS继承的集中方式

##  转载  [https://www.jianshu.com/p/85899e287694](https://www.jianshu.com/p/85899e287694)
《JavaScript高级程序设计》提到了6中继承方式：  
1.原型链继承  
2.借用构造函数（经典继承）  
3.组合继承  
4.原型链继承  
5.寄生式继承  
6.寄生组合式继承

**原型链继承**

```jsx
// 原型链继承
        function Person(){
            this.name = 'xiaopao';
        }

Person.prototype.getName = function(){
            console.log(this.name);
        }

function Child(){
            
        }

Child.prototype = new Person();
        var child1 = new Child();
        child1.getName(); // xiaopao

```

缺点：

1. 引用类型的属性被所有实例共享
2. 在创建Child 的实例时， 不能向Person传参

```jsx
function Person(){
            this.name = 'xiaopao';
            this.colors = ['red', 'blue', 'green'];
        }

Person.prototype.getName = function(){
            console.log(this.name);
        }

function Child(){

}

Child.prototype = new Person();
        var child1 = new Child();
        var child2 = new Child();
        child1.colors.push('yellow');
        console.log(child1.colors);
        console.log(child2.colors);

```

**借用构造函数继承（经典继承）**  
复制父类构造函数内的属性

```jsx
// 借用构造函数继承（经典继承）
        function Person(){
            this.name = 'xiaopao';
            this.colors = ['red', 'blue', 'green'];
        }

Person.prototype.getName = function(){
            console.log(this.name);
        }

function Child(){
            Person.call(this);
        }

var child1 = new Child();
        var child2 = new Child();
        child1.colors.push('yellow');
        console.log(child1.name);
        console.log(child1.colors); // ["red", "blue", "green", "yellow"]
        console.log(child2.colors); // ["red", "blue", "green"]

```

优点：  
1.避免了引用类型的属性被所有实例共享  
2.可以在Child中向Parent传参  
缺点：  
1.只是子类的实例，不是父类的实例  
2.方法都在构造函数中定义，每次创建实例都会创建一遍方法

```jsx
// 借用构造函数继承， 向Parent传参
  function Person(name){
            this.name = name;
        }

Person.prototype.getName = function(){
            console.log(this.name);
        }

function Child(name){
            Person.call(this,name);
        }

var child1 = new Child('xiaopao');
        var child2 = new Child('lulu');
        console.log(child1.name); // xiaopao
        console.log(child2.name); // lulu
        console.log(child1 instanceof Person); // false   不能识别是Person的实例

```

**组合继承**  
组合 原型链继承 和 借用构造函数继承  
背后的思路是：使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。

```jsx
function Parent(name){
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }

Parent.prototype.getName = function(){
            console.log(this.name);
        }

function Child(name,age){
            Parent.call(this,name);// 第二次调用 Parent()
            this.age = age;
        }

Child.prototype = new Parent(); // 第一次调用 Parent()

var child1 = new Child('xiaopao',18);
        var child2 = new Child('lulu',19);
        child1.getName(); // xiaopao
        child2.getName(); // lulu
        console.log(child1.age); // 18
        console.log(child2.age); // 19
        child1.colors.push('yellow');
        console.log(child1.colors);  // ["red", "blue", "green", "yellow"]
        console.log(child2.colors); // ["red", "blue", "green"]
        console.log(child1 instanceof Child); // true
        console.log(child1 instanceof Parent); // true

```

优点：融合原型链继承和构造函数的优点，是JavaScript中最常用的继承模式  
缺点：调用了两次父类构造函数  
（组合继承最大的问题是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部）

**原型式继承**

```jsx
        // 原型式继承
function CreateObj(o){
            function F(){}
            F.prototype = o;
            console.log(o.__proto__ === Object.prototype);
            console.log(F.prototype.constructor === Object); // true
            return new F();
        }

var person = {
            name: 'xiaopao',
            friend: ['daisy','kelly']
        }

var person1 = CreateObj(person);
        // var person2 = CreateObj(person);

person1.name = 'person1';
        // console.log(person2.name); // xiaopao
        person1.friend.push('taylor');
        // console.log(person2.friend); // ["daisy", "kelly", "taylor"]
        // console.log(person); // {name: "xiaopao", friend: Array(3)}
        person1.friend = ['lulu'];
        // console.log(person1.friend); // ["lulu"]
        // console.log(person.friend); //  ["daisy", "kelly", "taylor"]
        // 注意： 这里修改了person1.name的值，person2.name的值并未改变，并不是因为person1和person2有独立的name值，而是person1.name='person1'是给person1添加了name值，并非修改了原型上的name值
        // 因为我们找对象上的属性时，总是先找实例上对象，没有找到的话再去原型对象上的属性。实例对象和原型对象上如果有同名属性，总是先取实例对象上的值

```

缺点： 包含引用类型的属性值始终都会共享相应的值， 这点跟原型链继承一样  
注意： 这里修改了person1.name的值，person2.name的值并未改变，并不是因为person1和person2有独立的name值，而是person1.name='person1'是给person1添加了name值，并非修改了原型上的name值。  
**因为我们找对象上的属性时，总是先找实例上对象，没有找到的话再去原型对象上的属性。实例对象和原型对象上如果有同名属性，总是先取实例对象上的值**

![null](//upload-images.jianshu.io/upload_images/15216392-e770e4842ea8ab08.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)

image.png

**寄生式继承**  
创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。  
可以理解为在原型式继承的基础上新增一些函数或属性

```jsx
        // 寄生式继承  可以理解为在原型式继承的基础上增加一些函数或属性
        var ob = {
            name: 'xiaopao',
            friends: ['lulu','huahua']
        }

function CreateObj(o){
            function F(){};  // 创建一个构造函数F
            F.prototype = o;
            return new F();
        }

// 上面CreateObj函数 在ECMAScript5 有了一新的规范写法，Object.create(ob) 效果是一样的 , 看下面代码
        var ob1 = CreateObj(ob);
        var ob2 = Object.create(ob);
        console.log(ob1.name); // xiaopao
        console.log(ob2.name); // xiaopao

function CreateOb(o){
            var newob = CreateObj(o); // 创建对象 或者用 var newob = Object.create(ob)
            newob.sayName = function(){ // 增强对象
                console.log(this.name);
            }
            return newob; // 指定对象
        }

var p1 = CreateOb(ob);
        p1.sayName(); // xiaopao

```

缺点：跟借用构造函数一样，每次创建对象都会创建一遍方法

**寄生组合式继承**  
子类构造函数复制父类的自身属性和方法，子类原型只接收父类的原型属性和方法

> 所谓寄生组合继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。  
> 其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型的原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给予类型的原型。

```jsx
// 寄生组合式继承
function Parent(name){
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }

Parent.prototype.sayName = function(){
            console.log(this.name);
        }

function Child(name,age){
            Parent.call(this,name); 
            this.age = age;
        }

function CreateObj(o){
            function F(){};
            F.prototype = o;
            return new F();
        }

// Child.prototype = new Parent(); // 这里换成下面
        function prototype(child,parent){
            var prototype = CreateObj(parent.prototype);
            prototype.constructor = child;
            child.prototype = prototype;
        }
        prototype(Child,Parent);

var child1 = new Child('xiaopao', 18);
        console.log(child1);

```

![null](//upload-images.jianshu.io/upload_images/15216392-0d60dfce7d7aa99a.png?imageMogr2/auto-orient/strip|imageView2/2/w/816/format/webp)

image.png

优点： 这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了再Parent.prototype上面创建不必要的，多余的属性。普遍认为寄生组合式继承是引用类型最理想的继承方式

**面试题**

```jsx
function A() {
    this.name = 'a'
    this.color = ['green', 'yellow']
 }
 function B() {
   
 }
 B.prototype = new A()
 var b1 = new B()
 var b2 = new B()
 
 b1.name = 'change'
 b1.color.push('black')
console.log('b1',b1);
console.log('b2',b2);
console.log(b1.name); // change
console.log(b2.name); // a
console.log(b1.color); // ['green', 'yellow', 'black']
console.log(b2.color); // ['green', 'yellow', 'black']

```

![null](//upload-images.jianshu.io/upload_images/15216392-079599c1f7a4cd16.png?imageMogr2/auto-orient/strip|imageView2/2/w/451/format/webp)

image.png

![null](//upload-images.jianshu.io/upload_images/15216392-be1ac0165e744ebd.png?imageMogr2/auto-orient/strip|imageView2/2/w/448/format/webp)

image.png

题目二：  
已知如下类Animal，要求设计一个Cat类继承自Animal，并实现如下功能：

```jsx
Animal:
function Animal(){
    this.name = "Animal";
    this.showName = function(){
        console.log(this.name);
    }
}

Cat:

function Cat(){

this.name = "Cat";

this.showName1 = function(){
        console.log(this.name); 
    }
    
    this.showName2 = function(){
        console.log(this.name); 
    } 
 
    this.showName3 = function(){
        console.log(this.__super.name + "=>" + this.name); 
    }
}

```

代码运行：  
// 请完善Cat部分相关代码，得到如下结果：

```jsx
var cat = new Cat();
console.log(cat instanceof Animal ); // 得到：true
cat.showName1();     // 得到："Cat" (需要读到Cat中的name属性) 
cat.showName2();    //  得到：”Animal" (需要读到Animal中的name属性) 
cat.showName3();    //得到：”Animal" => "Cat" (需要同时读到Cat中的name和Animal中的name)

```

答案解析：

```jsx
function Animal() {
    this.name = "Animal";
    this.showName = function() {
        console.log(this.name);
    };
}

function Cat() {

this.name = "Cat";
    this._super = Cat.prototype;

this.showName1 = function() {
        console.log(this.name);
    };

this.showName2 = function() {
        console.log(this.name);
    };

this.showName3 = function() {
        console.log(this._super.name + "=>" + this.name);
    };
}
Cat.prototype = new Animal();
var cat = new Cat();
console.log(cat instanceof Animal);   //true
cat.showName1();     //"Cat"
cat.showName2.call(Cat.prototype);   //"Animal"
cat.showName3();    //"Animal" => "Cat"
```

作者：小泡_08f5  
链接：https://www.jianshu.com/p/85899e287694  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

表情

登录

注册

南易_站长

阅读量：21289

JS继承的集中方式

评论