javascript继承方式详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript继承方式详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3491字，纯文字阅读大概需要5分钟。

内容图文

1、原型链继承 存在对象共享的问题

2、构造函数继承 借助call apply方法实现 ：函数复用性问题 每次实例化，都重新执行了一次父类，父类中的方法重复定义

3、组合模式（原型链+构造函数）构造函数继承属性，原型链继承方法 ：解决了对象共享，但是属性继承出现两次

4、原型方式 使用一个空间空函数

5、寄生方式 在原型方式上增加额外了方法

6、寄生组合方式（解决了属性继承出现2次的问题）

1、原型链方式

子类在继承父类时，是将子类的prototype指向父类的一个实例对象。 在子类实例化时，所有子类的实例都会共享父类的那个实例上（假设叫p）的属性和方法，如果p上有引用型的属性，则子类的实例可以修改该引用型的属性，导致其他实例上的该属性也被修改。

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
console.log(s1.stus);  //['a','b','c']  
s1.stus.push('d');     //改变s1上的属性，会影响s2上的该属性
console.log(s2.stus);  // ['a','b','c','d']

如果改成下面的，则不会影响。

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
 
s1.stus = ['d'];   //在s1上增加了属性，  就近原则，不在查找原型链上的同名属性
console.log(s1.stus);  //['d']
console.log(s2.stus);  // ['a','b','c']

2、构造函数方式继承

共用构造函数，方法都是在内部定义，复函复用性问题无从谈起。

//构造函数方式继承
function A(name){
    this.name = name;
    this.type = 'parent';
    this.introduce = function (){ alert(this.name);}
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);  //使用call方法 实现继承 但是父类中的方法重复定义 无复用性
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
 
var b = new B('lc',25);
b.introduce(); //lc25
b.sayhi();  //parent

3、混合方式 （原型方式+构造函数方式）

使用构造函数继承属性，原型链继承方法

但是有一点不好的地方： 使用原型链继承时，实际上属性也继承了，重复了。

function A(name){
    this.name = name;
    this.type = 'parent';
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
B.prototype = new A();

4、原型式继承

使用了一个中间空函数，实现继承后，返回一个对象。

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}

5、寄生式继承 在原型式的基础上，再为对象添加属性 方法

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}
 
function createObj(p){  
    var clone = extend(p);
    clone.name = 'hello';    
    clone.say = function (){}
    return clone;
}

6、寄生组合式继承

在继承方法的时候，不再实例化父类型的构造函数，而是使用inheritPrototype方法. 使用一个中间空函数，让这个空函数去继承父类原型，然后实例化这个空函数（继承了父类prototype中的所有方法）。将子类的原型指向这个实例化的空对象即可。

避免了实例化父类的构造函数。

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  // var obj= extend(superType.prototype);
  function F(){}
  F.prototype = superType.prototype;
  var obj= new F();
 
  //obj.constructor = subType;
  subType.prototype = obj;    //不可将subType的prototype直接指向superType，否则的话，对子类prototype的修改会反应到父类上，  引用型变量
  subType.prototype.constructor = subType;
}

对象冒充： 使用构造函数的方式声明类，将一个类的方法指向另一个构造函数（因为构造函数本身就是一个方法函数），实现继承

function A(){
    this.name = {name1:'hello'};
    this.say = function (){ console.log(this.name);}
}
function B(){
    this.method = A;
    this.method();
    delete this.method;
}
 var bObj = new B();

内容总结

以上是互联网集市为您收集整理的javascript继承方式详解全部内容，希望文章能够帮你解决javascript继承方式详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端