DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> JavaScript mixin實現多繼承的方法詳解
JavaScript mixin實現多繼承的方法詳解
編輯:JavaScript技巧     

本文實例講述了Javascript mixin實現多繼承的方法。分享給大家供大家參考,具體如下:

mixin簡單通俗的講就是把一個對象的方法和屬性拷貝到另一個對象上,注意這個繼承還是有區別的。js是一種只支持單繼承的語言,畢竟一個對象只有一個原型,如果想實現多繼承,那就簡單暴力的把需要繼承的父類的所有屬性都拷貝到子類上,就是使用mixin啦。

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

一個簡單的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);

現在你應該大概了解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);

mixin實現多繼承

直接上代碼。

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);

總結

很多前端庫裡都有mixin方法,只是叫法不一樣,比如 jQuery的extend ,文中我們實現的都是淺拷貝,jQuery中的extend可以實現深拷貝。很多庫會使用mixin的方式,將一些工具方法擴展到相應對象中,實現代碼復用。

更多關於Javascript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《Javascript錯誤與調試技巧總結》、《Javascript數據結構與算法技巧總結》、《Javascript遍歷算法與技巧總結》及《Javascript數學運算用法總結》

希望本文所述對大家Javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved