js的繼承方式有哪些？ js實作繼承的幾種方式介紹

這篇文章帶給大家的內容是關於js的繼承方式有哪些？ js實現繼承的幾種方式介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1、js實作繼承的方式：原型鏈

實作方法：A原型的實例是B原型的屬性

#不要忘記原型鏈中預設存在Object

子類別新增方法或重寫超類別方法要放在替換原型語句之後

透過原型鏈實現繼承後，不能使用物件字面量的方式建立方法和屬性，因為會重寫原型鏈

透過原型鏈實作繼承後，超類別的參考型別屬性會被所有實例共用

function SuperType() {
  this.property = true;
  this.arr=[1,2,3]
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.sub = false;
}
SubType.prototype = new SuperType();
//继承SuperType，即以superType的实例为中介，使subType。prototype指向superType的原型
SubType.prototype.getSubValue = function() { //添加新方法
  return this.sub;
}
SubType.prototype.getSuperValue = function() { // 重写超类中的方法
  return this.sub;
}
var instance1 = new SubType();
instance1.arr.push(4);
console.log(instance1.arr); //1,2,3,4
var instance2 = new SubType();
console.log(instance2.arr); //1,2,3,4

2、js實作繼承的方式：借用建構子

實作方法：在子類別的建構子內呼叫超類別建構函數，即使用call()或apply()，使得超類別建構子作用域改變

可以給建構函式傳遞參數，但無法進行函式重複使用

function SuperType(name,age){
  this.name = name;
  this.age = age;
}
function SubType() {
  SuperType.call(this,'i','21')//继承SuperType，并传递参数
  this.job = 'actor'
}

3、js實作繼承的方式：組合繼承

#實作方法：使用原型鏈實作原型屬性和方法的繼承，借用建構函式實作實例屬性的繼承

「隱患：呼叫兩次父類別建構子（1call()方法，2new SuperType() )

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)//继承SuperType，并传递参数
  this.job = 'actor'
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log('hello')
}

var h = new SubType('hua', 18);
h.sayName()//haha
h.f.push(5)
console.log(h.f)//1,2,3,4,5
var n = new SubType();
console.log(n.f)//1,2,3,4

4、js實作繼承的方式：原型式繼承

以一個物件為基礎，產生新對象，再對新物件進行修改

超類別引用類型的屬性仍然是共享的

var person = {
  name:'lily',
  age:'21',
  friends:[1,2,3]
}
var people = Object.create(person);
people.friends.push(4);
var human = Object.create(person);
console.log(human.friends)//1,2,3,4

#5、js實作繼承的方式：寄生式繼承

創建一個僅用來實現繼承過程的函數，並在函數內部擴展對象，再將對象返回

此時父類的引用類型屬性依然是被所有實例共享

function anotherFunction(original) {
  var clone  = Object(original);
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone;
}
var person = {
  name:'lili',
  age:'21',
  f: [1,2,3]
}
var people1 = anotherFunction(person);
people1.f.push(4)
console.log(people1.f);// 1,2,3,4
var people2 = anotherFunction(person);
console.log(people2.f);// 1,2,3,4

6、js實作繼承的方式：寄生組合式繼承

透過借用建構子來繼承屬性，透過原型鏈混成來繼承方法

減少了一次父類別建構子的執行，父類別引用型別的屬性不被共用

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)
  this.job = 'actor'
}
function inherit(superType,subType) {
  var property =  Object.create(superType.property);// 创建父类原型的一个副本，并没有调用父类构造函数
  property.constructor = subType;// 使父类原型副本的constructor属性指向子类
  subType.property = property;// 子类的原型指向父类原型副本
}
inherit(SuperType,SubType)
var instance = new SubType('haha', 18);
instance.sayName()//haha
instance.f.push(5);
console.log(instance.f);//1,2,3,4,5
var ins = new SubType();
console.log(ins.f);//1,2,3,4

 相關推薦：

JS繼承--原型鏈繼承與類別繼承_基礎知識

JS中的繼承方式實例詳解

JS實作繼承的幾種方式

#

以上是js的繼承方式有哪些？ js實作繼承的幾種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！