js继承的6种方式详解

	这篇文章主要给大家介绍了关于js继承的6种方式，文中通过示例代码介绍的非常详细对大家的学习 或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。 原型链继承 原型链继承是ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。什么是原型 链?每个构造函数都会有一个原型对象，调用构造函数创建的实例会有一个指针__proto__指向原型对象,这个原型可 能是另一个类型的实例，所以内部可能也有一个指针指向另一个原型，然后就这样形成了一条原型链。 代码: function SuperType() {     this.property = true; } SuperType.prototype.getSuperValue = function() {     return this.property; }; function SubType() {     this.subproperty = false; } // 继承SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function () { //注意 不能通过对象 字面量的方式添加新方法否则上一行无效     return this.subproperty; }; let instance = new SubType(); console.log(instance.getSuperValue()); // true 复制代码 缺点 1.如果父类实例的属性是引用类型的时候，其实父类的实例属性会成为子类的原型属性,子类创建的所有 实例都会共享这些方法，修改一个实例的这个属性 其他实例的属性也会被修改 2.子类型在实例化时不能给父类型的构造函数传参 构造函数继承 为了解决原型包含引用值导致的继承问题 出现了一中'盗用构造函数'的技术流行起来 也被称为'对象伪装'或'经典继承'，思路就是在子类构造函 数中调用父类构造函数。可以使用call() apply()的方法以新创建的对象为上下文执行函数 function SuperType(name) { this.colors = ["red","blue","green"]; this.name = name; } function SubType(name) { SuperType.call(this,name); } let instance1 = new SuperType('小明') let instance2 = new SuperType('小白') instance1.colors .push('yellow') console.log(instance1) //{name:"小明",colors:["red","blue","green","yellow"]...} console.log(instance2) //{name:"小白",colors:["red","blue","green"]...} //可以传递参数 也修复了引用的问题 可以继承多个构造函数属性（call多个） 复制代码 缺点: 1.只能在构造函数中调用方法 函数不能重用 就是每次子类生成实例的时候都会生成一次属性和方法 2. 子类无法访问到父类原型上的方法 组合继承 综合了原型链和构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法而通过 构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。 function SuperType(name){     this.name = name;     this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function() {     console.log(this.name); }; function SubType(name, age){     // 继承属性 第二次调用     SuperType.call(this, name);     this.age = age; } // 继承方法 第一次调用 SubType.prototype = new SuperType(); SubType.prototype.sayAge = function() {     console.log(this.age); }; let instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); console.log(instance1.colors); //["red,blue,green,black"] instance1.sayName(); // "Nicholas"; instance1.sayAge(); // 29 let instance2 = new SubType("Greg", 27); console.log(instance2.colors); // ["red,blue,green"] instance2.sayName(); // "Greg"; instance2.sayAge(); // 27 //可以继承父类原型上的属性，可以传参，可复用。 每个新实例引入的构造函数属性是私有的 复制代码 缺点 调用了两次父类构造函数 比较耗内存 原型式继承 即使不自定义类型也可以通过原型实现对象之间的信息共享。 function object(person) { function F() {} F.prototype = person return new F() } let person = { name:'小明', colors:['red','blue'] } let person1 = object(person) person1.colors.push('green') let person2 = object(person) person1.colors.push('yellow') console.log(person) //['red','blue','green','yellow'] 复制代码 适用环境: 你有一个对象，想在它的基础上再创建一个新对象。你需要把这个对象先传给object() 然后再对返回的 对象进行适当修改。类似于 Object.create()只传第一个参数的时候，本质上就是对传入的对象进行了一次浅复制 缺点就是新实例的属性都是后面添加的,无法复用。 寄生式继承 与原型式继承比较接近的一种继承方式是寄生式继承，类似于寄生构造函数和工厂模式： 创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。 function object(person) { function F() {} F.prototype = person return new F() } function createAnother(original){     let clone = object(original); // 通过调用函数创建一个新对象     clone.sayHi = function() { // 以某种方式增强这个对象     console.log("hi"); };     return clone; // 返回这个对象 复制代码 寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。 缺点:通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似 寄生式组合继承 最常用的继承方式，也是最佳的，组合继承会调用两次父类构造函数，存在效率问题。其实本质上子类原型 最终是要包含父类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行了。基本思路是不 通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。说到底就是使用寄生式继承来继承 父类原型，然后将返回的新对象赋值给子类原型。 //核心代码 function object(person) { function F(params) {} F.prototype = person return new F() } function inheritPrototype(SubType,SuperType) { let prototype = object(SuperType.prototype) //生成一个父类原型的副本 //重写这个实例的constructor prototype.constructor = SubType //将这个对象副本赋值给 子类的原型 SubType.prototype = prototype } function SuperType(name) {     this.name = name;     this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function() {     console.log(this.name); }; function SubType(name, age) {     SuperType.call(this, name);     this.age = age; } //调用inheritPrototype函数给子类原型赋值,修复了组合继承的问题 inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function() {     console.log(this.age); }; 复制代码 总结 到此这篇关于js继承的6种方式的文章就介绍到这了更多相关js继承方式内容请搜索以前的文章或 继续浏览下面的相关文章。