js 中的五种继承方法

2021-11-23 19:03:25 阅读：184 来源： 互联网

标签：function Sub 继承 friends js 五种 var Super name

正式发布的ES6中已经封装实现了其他OO语言中的继承形式，Class Extends，这里主要记录js的原型继承和借用构造函数继承

一、原型链继承

function Super(){
   
     
     
    this.name="小明";
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name)
};
function Sub(){
   
     
     }

Sub.prototype = new Super();
var instance = new Sub();
instance.sayName();//小明

原型链继承的问题

//当超类中包含引用类型属性值时，其中一个子类的多个实例中，只要其中一个实例引用属性只发生修改一个修改，其他实例的引用类型属性值也会立即发生改变
//原因是超类的属性变成子类的原型属性
function Super(){
   
     
     
this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name)
};
function Sub(){
   
     
     }

Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强", "张三"]

二、借用构造函数继承

function Super(){
   
     
     
this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name)
};
function Sub(){
   
     
     
    Super.call(this);
}

var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]

借用构造函数的问题

单独使用借用构造函数，没办法继承超类中的原型属性和方法

三、组合式继承（原型继承+借用构造函数继承）

组合式继承也是实际开发中最常用的继承方式

function Super(){
   
     
     
this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name)
};
function Sub(){
   
     
     
    Super.call(this);
}

Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
instance1.sayName();//小明
instance2.sayName();//小明

组合式继承的问题

//组合式继承中，超类的构造函数将被调用两次
function Super(){
   
     
     
this.name="小明";
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name)
};
function Sub(){
   
     
     
    Super.call(this);//第二次调用
}

Sub.prototype = new Super();//第一次调用
var instance = new Sub();

四、寄生式继承

//在主要考虑对象而不是自己定义类型和构造函数的情况下，寄生式继承是一种有用的模式，但无法做到函数的复用    
function createAnother(original){
   
     
     
    var clone = Object(original);//创建一个新对象，original的副本
    clone.sayName = function(){
   
     
      //对象的增强，添加额外的方法
        alert('hi');
    }
    return clone;
}
var person = {
    name:'小明',
    friends:['小红','小强']
}
var person1 = createAnother(person);
var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强", "张三"]

寄生组合式继承

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题
function inheritPrototype(sub,superr){
   
     
     
var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法
    prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
    sub.prototype = prototype;
}
function Super(name){
   
     
     
    this.name = name;
    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
   
     
     
    alert(this.name);
}
function Sub(name){
   
     
     
    Super.call(this,name);
}
inheritPrototype(Sub,Super);
var person1 = new Sub('小明');
var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强"]
console.log(person1.sayName());//小明
console.log(person2.sayName());//小华

标签：function,Sub,继承,friends,js,五种,var,Super,name
来源： https://www.cnblogs.com/hustshu/p/15594644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9