JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解

發(fā)布時(shí)間：2020-10-14 05:53:18 來(lái)源：腳本之家閱讀：170 作者：柒青衿欄目：web開(kāi)發(fā)

本文實(shí)例講述了JavaScript mixin實(shí)現(xiàn)多繼承的方法。分享給大家供大家參考，具體如下：

mixin簡(jiǎn)單通俗的講就是把一個(gè)對(duì)象的方法和屬性拷貝到另一個(gè)對(duì)象上，注意這個(gè)繼承還是有區(qū)別的。js是一種只支持單繼承的語(yǔ)言，畢竟一個(gè)對(duì)象只有一個(gè)原型，如果想實(shí)現(xiàn)多繼承，那就簡(jiǎn)單暴力的把需要繼承的父類的所有屬性都拷貝到子類上，就是使用mixin啦。

下面所有代碼可以到github上查看完整版。

一個(gè)簡(jiǎn)單的mixin

直接上代碼

function extend(destClass, srcClass) {
  var destProto = destClass.prototype;
  var srcProto = srcClass.prototype;
  for (var method in srcProto) {
    if (!destProto[method]) {
      destProto[method] = srcProto[method];
    }
  }
}
function Book(){}
Book.prototype.printName = function(){
  console.log('I am a book, named hello');
};
function JS(){}
extend(JS, Book);
var js = new JS();
console.log(js);

JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解

現(xiàn)在你應(yīng)該大概了解mixin在做什么。

可以僅僅拷貝某些方法：

function extend(destClass, srcClass, methods) {
  var srcProto = srcClass.prototype;
  var destProto = destClass.prototype ;  
  for (var i=0; i<methods.length; i++) {
    var method = methods[i];
    if (!destProto[method]) {
      destProto[method] = srcProto[method];
    }
  }
}
function Book() {}
Book.prototype.getName = function() {};
Book.prototype.setName = function() {};
function JS() {}
extend(JS, Book, ['getName']);
var js = new JS();
console.log(js);

JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解

mixin實(shí)現(xiàn)多繼承

直接上代碼。

function extend(destClass) {
  var classes = Array.prototype.slice.call(arguments, 1);
  for (var i=0; i<classes.length; i++) {
    var srcClass = classes[i];
    var srcProto = srcClass.prototype;
    var destProto = destClass.prototype; 
    for (var method in srcProto) {
      if (!destProto[method]) {
        destProto[method] = srcProto[method];
      }
    }
  }
}
function Book() {}
Book.prototype.getName = function() {};
Book.prototype.setName = function() {};
function Tech(){}
Tech.prototype.showTech = function(){};
function JS() {}
extend(JS, Book, Tech);
var js = new JS();
console.log(js);

JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解

總結(jié)

很多前端庫(kù)里都有mixin方法，只是叫法不一樣，比如 jQuery的extend ，文中我們實(shí)現(xiàn)的都是淺拷貝，jQuery中的extend可以實(shí)現(xiàn)深拷貝。很多庫(kù)會(huì)使用mixin的方式，將一些工具方法擴(kuò)展到相應(yīng)對(duì)象中，實(shí)現(xiàn)代碼復(fù)用。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

JavaScript mixin實(shí)現(xiàn)多繼承的方法詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽