在js中的有哪几种继承方法

来源：动视网责编：小采时间：2020-11-27 19:49:00

在js中的有哪几种继承方法

在js中的有哪几种继承方法:正式发布的ES6中已经封装实现了其他OO语言中的继承形式，Class Extends，这里主要记录js的原型继承和借用构造函数继承一、原型链继承function Super(){ this.name="小明"; } Super.prototype.sayName = function(

推荐度：

点击下载本文 文档为doc格式

导读在js中的有哪几种继承方法:正式发布的ES6中已经封装实现了其他OO语言中的继承形式，Class Extends，这里主要记录js的原型继承和借用构造函数继承一、原型链继承function Super(){ this.name="小明"; } Super.prototype.sayName = function(

正式发布的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();//小明1234567891011

原型链继承的问题

//当超类中包含引用类型属性值时，其中一个子类的多个实例中，只要其中一个实例引用属性只发生修改一个修改，其他实例的引用类型属性值也会立即发生改变//原因是超类的属性变成子类的原型属性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);//["小红", "小强", "张三"]1234567891011121314151617

二、借用构造函数继承

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);//["小红", "小强"]12345678910111213141516

借用构造函数的问题

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

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

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

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();//小明12345678910111213141516171819

组合式继承的问题

//组合式继承中，超类的构造函数将被调用两次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();1234567891011121314

四、寄生式继承

//在主要考虑对象而不是自己定义类型和构造函数的情况下，寄生式继承是一种有用的模式，但无法做到函数的复用 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);//["小红", "小强", "张三"]123456789101112131415161718

寄生组合式继承

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题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());//小华

上面是我整理给大家的在js 中的几种继承方法，希望今后会对大家有帮助。

JS onclick 中如何传两个参数给 JS方法的具体步骤

js基本语法详细解答

JS中定义类的方法讲解