JavaScript中的Mixin是什么

這篇文章主要介紹“JavaScript中的Mixin是什么”，在日常操作中，相信很多人在JavaScript中的Mixin是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript中的Mixin是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

類的出現(xiàn)最終使 JavaScript 非常容易使用繼承語(yǔ)法,JavaScript 類比大多數(shù)人意識(shí)到的更強(qiáng)大,它是構(gòu)建真正的 mixins 的良好基礎(chǔ)。

什么是 Mixin

在 JavaScript 中,把不同類的行為集中到一個(gè)類是一種常見(jiàn)的模式,雖然 ES6 沒(méi)有顯示支持多類繼承,但通過(guò)現(xiàn)有特性可以輕松地模擬這種行為。

Object.assign() 方法是為了混入對(duì)象行為而設(shè)計(jì)的,只有在需要混入類的行為時(shí)才有必要自己實(shí)現(xiàn)混入表達(dá)式,如果只是需要混入多個(gè)對(duì)象的屬性,那么使用 Object.assign() 就可以了。

在集成或者實(shí)例化時(shí),JavaScript 的對(duì)象機(jī)制并不會(huì)自動(dòng)執(zhí)行復(fù)制行為,簡(jiǎn)單來(lái)說(shuō),在 JavaScript 中只有對(duì)象,并不存在可以被實(shí)例化的類,一個(gè)對(duì)象并不會(huì)被復(fù)制到其他對(duì)象,它們會(huì)被關(guān)聯(lián)起來(lái)。

在其他語(yǔ)言中類表現(xiàn)出來(lái)的都是復(fù)制行為,因此 JavaScript 開(kāi)發(fā)者也想出了一個(gè)方法來(lái)模擬類的復(fù)制行為,這個(gè)方法就是混入。

那么在接下來(lái)的內(nèi)容中我們會(huì)看到兩種類型的混入,它們分別是顯示混入和隱式混入。

顯示混入

首先我們舉一個(gè)簡(jiǎn)單的例子,在這里我們實(shí)現(xiàn)一個(gè) mixin(...) 函數(shù),這個(gè)功能在許多庫(kù)和框架中被稱為 extend,具體代碼如下所示:

function mixin(source, target) {
  for (const key in source) {
    if (!(key in target)) target[key] = source[key];
  }

  return target;
}

接下來(lái)我們實(shí)現(xiàn)一個(gè) foo 類 和 bar 類,然后將兩個(gè)類進(jìn)行 mixin,生成一個(gè)新的類,具體代碼如下所示:

const bar = {
  technical: function () {
    console.log("跳");
  },
  moment: function () {
    this.technical();
  },
};

const foo = {
  nickname: "xun",
  hobby: "nba",
  age: 18,
  moment: function () {
    bar.moment.call(this);
  },
};

console.log(mixin(bar, foo));

現(xiàn)在返回的新對(duì)象中就有了一份 bar 對(duì)象的屬性和函數(shù)的副本了,從技術(shù)角度來(lái)說(shuō),函數(shù)實(shí)際上沒(méi)有被復(fù)制,復(fù)制的是函數(shù)引用。

所以返回的新對(duì)象中的屬性 thchnical 方法只是從 bar 中復(fù)制過(guò)來(lái)的對(duì)與 moment 函數(shù)的引用,相反 moment() 就是直接從 bar 中復(fù)制了值 1。

foo 已經(jīng)有了 moment 方法,所以這個(gè)屬性引用并沒(méi)有被 mixin 重寫(xiě),從而保留了 foo 中定義的同名方法,實(shí)現(xiàn)了子類對(duì)子類屬性的重寫(xiě)。

顯示混入模式的一種變體被稱為 寄生繼承,它既是顯示的又是隱式的,具體代碼如下所示:

function Foo() {
  this.nickname = "moment";
}

Foo.prototype.ignition = function () {
  console.log("小黑子");
};

Foo.prototype.小黑子 = function () {
  this.ignition();
  console.log("叼毛");
};

// 寄生類
function Bar() {
  const foo = new Foo();

  foo.age = 18;

  const 你小子 = foo.小黑子;

  foo.小黑子 = function () {
    你小子.call(this);
    console.log("不是所有的牛奶都是特侖蘇");
  };

  return foo;
}

const result = new Bar();
console.log(result);

該代碼的最終輸出結(jié)果如下所示:

就像你看到的一樣,首先我們復(fù)制一份 Foo 父類對(duì)象的定義,然后混入子類獨(dú)享的定義。

隱式混入

隱式混入示例代碼如下所示:

const something = {
  cool: function () {
    this.greeting = "hello";
    this.count = this.count ? this.count + 1 : 1;
  },
};

console.log(something.cool()); // undefined
console.log(something.greeting); // hello
console.log(something.count); // 1

const another = {
  cool: function () {
    something.cool.call(this);
  },
};

console.log(another.cool()); // undefined
console.log(another.greeting); // hello
console.log(another.count); // 1

在上面代碼中通過(guò)在構(gòu)造函數(shù)調(diào)用或者方法調(diào)用中使用 something.cool.call(this),讓我們實(shí)際上 借用 了函數(shù) something.cool() 函數(shù)并在 another 的上下文中調(diào)用了它(通過(guò) this 指向),最終的結(jié)果是 something.cool() 函數(shù)中的賦值操作都會(huì)應(yīng)用在 another 對(duì)象上而不是 something 對(duì)象上。

因此我們把 something 的行為混入到了 another 中。

到此，關(guān)于“JavaScript中的Mixin是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！