JS的继承

作者: 木子川页心 | 来源:发表于2019-05-05 21:58 被阅读0次

Js的继承
JS继承
#js继承
js继承遇到的小问题
JS中继承的实现
JavaScript 10
js继承
JS继承的实现的几种方式
JS里的继承
继承方式（6种）1.7

（一）、call()方法
1.语法：call([ thisobj[ arg1 [ arg2 [ argN ] ] ] ])
2.定义：调用一个对象的一个方法，以另一个对象替换当前对象。
3.说明：
（1）call方法可以用来代替另一个对象调用一个方法。
（2）改变this的指向，从当前对象变为传入的thisobj。
（3）如果没有传入的thisobj，this将指向window。
（二）继承的几种方法
一、原型链继承
1.核心：将父类的实例作为子类的原型。

    function Cat(){
    }
    Cat.prototype = new Animal();
    Cat.prototype.name = 'Tom'; 

    var cat1 = new Cat();
    console.log(cat1.name);                 //Tom
    console.log(cat1.sleep());
    console.log(cat1.eat("fish"));
    console.log(cat1 instanceof Animal);    //true
    console.log(cat1 instanceof Cat);       //true
</script>

3.特点：
（1）非常纯粹的继承关系，实例既是子类的实例，又是父类的实例。
（2）父类新增的原型属性和方法，子类都能访问到。
（3）简单，易于实现
4.缺点：
（1）要想为子类添加方法，必须在Cat.prototype = new Animal();这样的语句之后进行，不能放在构造器中。
（2）无法实现多继承。
（3）来自原型的引用属性，是所有实例共享的。
（4）创建子类实例时，无法向父类构造函数传参。
二、构造函数继承
1.核心：在子类构造函数的内部调用父类构造函数，使用父类的构造函数来增强子类的实例，等于是复制父类的实际属性给子类。

    var cat1 = new Cat('kity');
    console.log(cat1.name);                 //kity
    console.log(cat1.sleep());
    console.log(cat1.eat("fish"));          //报错
    console.log(cat1 instanceof Animal);    //false
    console.log(cat1 instanceof Cat);       //true
</script>

3.特点：
（1）创建子类实例时，可以向父类传递参数。
（2）可以实现多重继承（call多个父类）。
（3）解决了多个子类引用父类的问题，每个子类都有一个副本。
4.缺点：
（1）只能继承父类实例的属性和方法，不能继承父类原型的属性和方法。
（2）实例并不是父类的实例，只是子类的实例。
（3）无法实现函数复用，每个实例都有父类函数的副本，影响性能。
三、组合继承
1.核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

<script type="text/javascript">
function Animal(name){
//属性
this.name = name || 'animal';
//实例的方法
this.sleep = function(){
alert(this.name + "正在睡觉");
}
}
//原型的方法
Animal.prototype.eat = function(food){
alert(this.name + "正在吃" + food);
}

    function Cat(name){
        Animal.call(this);
        this.name = name || 'Tom';
    }
    Cat.prototype = new Animal();

    var cat1 = new Cat();
    console.log(cat1.name);                 //Tom
    console.log(cat1.sleep());
    console.log(cat1.eat("fish"));
    console.log(cat1 instanceof Animal);    //true
    console.log(cat1 instanceof Cat);       //true
</script>

3.特点：
（1）既可以继承父类实例的属性和方法，又可以继承父类原型的属性和方法。
（2）既是子类的实例，有事父类的实例。
（3）不存在引用共享问题。
（4）可以传参。
（5）函数可以复用。
4.缺点：
（1）调用了两次父类的构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）。
四、寄生式继承
1.核心：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

<script type="text/javascript">
function Animal(name){
//属性
this.name = name || 'animal';
//实例的方法
this.sleep = function(){
alert(this.name + "正在睡觉");
}
}
//原型的方法
Animal.prototype.eat = function(food){
alert(this.name + "正在吃" + food);
}
function Cat(name){
var c = new Animal(name);
c.say = function(){
alert("Hi");
}
return c;
}
```
 var cat1 = new Cat('Tom');
 console.log(cat1.name);                 //Tom
 console.log(cat1.sleep());
 console.log(cat1.eat("fish"));
 console.log(cat1 instanceof Animal);    //true
 console.log(cat1 instanceof Cat);       //false
```
</script>

3.特点：
（1）不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果。
4.缺点：
（1）实例是父类实例，不是子类实例。
（2）不支持多继承。
五、寄生组合式继承
1.核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

 function Cat(name){
     Animal.call(this);
     this.name = name || 'animal';
 }
 (function(){
     //创建一个没有方法的类
     var Super = function(){};
     Super.prototype = Animal.prototype;
     //将实例作为子类的原型
     Cat.prototype = Super.prototype;
 })();

 var cat1 = new Cat('Tom');
 console.log(cat1.name);                 //Tom
 console.log(cat1.sleep());
 console.log(cat1.eat("fish"));
 console.log(cat1 instanceof Animal);    //true
 console.log(cat1 instanceof Cat);       //true

</script>

3.特点：
（1）堪称完美
4.缺点：
（1）实现复杂