欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)繼承的6種常用方式總結(jié)

 更新時(shí)間：2022年07月21日 09:47:33   作者：不愿染是與非  
JavaScript想實(shí)現(xiàn)繼承的目的：重復(fù)利用另外一個(gè)對(duì)象的屬性和方法。本文為大家總結(jié)了JavaScript實(shí)現(xiàn)繼承的6種常用方式，需要的可以參考一下

JavaScript想實(shí)現(xiàn)繼承的目的：重復(fù)利用另外一個(gè)對(duì)象的屬性和方法。

1.原型鏈繼承

讓一個(gè)構(gòu)造函數(shù)的原型是另一個(gè)類型的實(shí)例，那么這個(gè)構(gòu)造函數(shù)new出來的實(shí)例就具有該實(shí)例的屬性。

當(dāng)試圖訪問一個(gè)對(duì)象的屬性時(shí)，它不僅僅在該對(duì)象上搜尋，還會(huì)搜尋該對(duì)象的原型，以及該對(duì)象的原型的原型，依次層層向上搜索，直到找到一個(gè)名字匹配的屬性或到達(dá)原型鏈的末尾。

function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}

Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}

function Child() {};
Child.prototype = new Parent();

let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture

let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

優(yōu)點(diǎn)：寫法方便簡潔，容易理解。

缺點(diǎn)：對(duì)象實(shí)例共享所有繼承的屬性和方法。傳教子類型實(shí)例的時(shí)候，不能傳遞參數(shù)，因?yàn)檫@個(gè)對(duì)象是一次性創(chuàng)建的（沒辦法定制化）。

2.借用構(gòu)造函數(shù)繼承

function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}

function Child(gender) {
    Parent.call(this, gender)
}

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用父類型構(gòu)造函數(shù)；使用 apply() 或 call() 方法將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上。

優(yōu)點(diǎn)：解決了原型鏈實(shí)現(xiàn)繼承的不能傳參的問題和父類的原型共享的問題。

缺點(diǎn)：借用構(gòu)造函數(shù)的缺點(diǎn)是方法都在構(gòu)造函數(shù)中定義，因此無法實(shí)現(xiàn)函數(shù)復(fù)用。在父類型的原型中定義的方法，對(duì)子類型而言也是不可見的，結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式。

3.組合繼承（經(jīng)典繼承）

將 原型鏈 和 借用構(gòu)造函數(shù) 的組合到一塊。使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能夠保證每個(gè)實(shí)例都有自己的屬性

function Person(gender) {
  console.log('執(zhí)行次數(shù)');
  this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}

Person.prototype.getInfo = function () {   // 使用原型鏈繼承原型上的屬性和方法
  console.log(this.info.name, this.info.age)
}

function Child(gender) {
  Person.call(this, gender) // 使用構(gòu)造函數(shù)法傳遞參數(shù)
}

Child.prototype = new Person()

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo()
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

優(yōu)點(diǎn)就是解決了原型鏈繼承和借用構(gòu)造函數(shù)繼承造成的影響。

缺點(diǎn)是無論在什么情況下，都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)：一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部

4.原型式繼承

方法一：借用構(gòu)造函數(shù)

在一個(gè)函數(shù)A內(nèi)部創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù)，然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型，最后返回這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。本質(zhì)上，函數(shù)A是對(duì)傳入的對(duì)象執(zhí)行了一次淺復(fù)制。

function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}

let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}

let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二：Object.create()

Object.create() 是把現(xiàn)有對(duì)象的屬性，掛到新建對(duì)象的原型上，新建對(duì)象為空對(duì)象

ECMAScript 5通過增加Object.create()方法將原型式繼承的概念規(guī)范化了。這個(gè)方法接收兩個(gè)參數(shù)：作為新對(duì)象原型的對(duì)象，以及給新對(duì)象定義額外屬性的對(duì)象（第二個(gè)可選）。在只有一個(gè)參數(shù)時(shí)，Object.create()與這里的函數(shù)A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}

let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

優(yōu)點(diǎn)是：不需要單獨(dú)創(chuàng)建構(gòu)造函數(shù)。

缺點(diǎn)是：屬性中包含的引用值始終會(huì)在相關(guān)對(duì)象間共享，子類實(shí)例不能向父類傳參

5.寄生式繼承

寄生式繼承的思路與(寄生) `原型式繼承` 和 `工廠模式` 似, 即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù),該函數(shù)在內(nèi)部以某種方式來增強(qiáng)對(duì)象,最后再像真的是它做了所有工作一樣返回對(duì)象。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}

let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}

let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy

let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

優(yōu)點(diǎn)：寫法簡單，不需要單獨(dú)創(chuàng)建構(gòu)造函數(shù)。

缺點(diǎn)：通過寄生式繼承給對(duì)象添加函數(shù)會(huì)導(dǎo)致函數(shù)難以重用。使用寄生式繼承來為對(duì)象添加函數(shù), 會(huì)由于不能做到函數(shù)復(fù)用而降低效率;這一點(diǎn)與構(gòu)造函數(shù)模式類似.

6.寄生組合式繼承

前面講過，組合繼承是常用的經(jīng)典繼承模式，不過，組合繼承最大的問題就是無論什么情況下，都會(huì)調(diào)用兩次父類構(gòu)造函數(shù)；一次是在創(chuàng)建子類型的時(shí)候，一次是在子類型的構(gòu)造函數(shù)內(nèi)部。寄生組合繼承就是為了降低父類構(gòu)造函數(shù)的開銷而實(shí)現(xiàn)的。

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function inheritPrototype(child, parent) {
  let prototype = objectCopy(parent.prototype);
  prototype.constructor = child;
  Child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.hoby = ['唱', '跳']
}

Parent.prototype.showName = function () {
  console.log('my name is：', this.name);
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);
Child.prototype.showAge = function () {
  console.log('my age is：', this.age);
}

let child1 = new Child("mjy", 18);
child1.showAge(); // 18
child1.showName(); // mjy
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']

let child2 = new Child("yl", 18);
child2.showAge(); // 18
child2.showName(); // yl
console.log(child2.hoby); // ['唱', '跳']

優(yōu)點(diǎn)是：高效率只調(diào)用一次父構(gòu)造函數(shù)，并且因此避免了在子原型上面創(chuàng)建不必要，多余的屬性。與此同時(shí)，原型鏈還能保持不變；

缺點(diǎn)是：代碼復(fù)雜

7.ES6、Class實(shí)現(xiàn)繼承

原理ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對(duì)象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。 ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先將父類實(shí)例對(duì)象的屬性和方法，加到this上面（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this

優(yōu)點(diǎn)：語法簡單易懂,操作更方便。

缺點(diǎn)：并不是所有的瀏覽器都支持class關(guān)鍵字 lass Per

以上就是JavaScript實(shí)現(xiàn)繼承的6種常用方式總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript繼承的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論