JS面向?qū)ο缶幊淘斀?/h1>

 更新時(shí)間：2016年03月06日 08:24:31   作者：木的樹  

這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο缶幊?，幫助大家更詳?xì)的對JS面向?qū)ο筮M(jìn)行學(xué)習(xí)，感興趣的朋友可以參考一下

序言
　　在JavaScript的大世界里討論面向?qū)ο?，都要提到兩點(diǎn)：1.JavaScript是一門基于原型的面向?qū)ο笳Z言 2.模擬類語言的面向?qū)ο蠓绞健τ跒槭裁匆M類語言的面向?qū)ο?，我個(gè)人認(rèn)為：某些情況下，原型模式能夠提供一定的便利，但在復(fù)雜的應(yīng)用中，基于原型的面向?qū)ο笙到y(tǒng)在抽象性與繼承性方面差強(qiáng)人意。由于JavaScript是唯一一個(gè)被各大瀏覽器支持的腳本語言，所以各路高手不得不使用各種方法來提高語言的便利性，優(yōu)化的結(jié)果就是其編寫的代碼越來越像類語言中的面向?qū)ο蠓绞?，從而也掩蓋了JavaScript原型系統(tǒng)的本質(zhì)?！　?/p>

基于原型的面向?qū)ο笳Z言
　　原型模式如類模式一樣，都是是一種編程泛型，即編程的方法論。另外最近大紅大紫的函數(shù)編程也是一種編程泛型。JavaScript之父Brendan Eich在設(shè)計(jì)JavaScript時(shí)，從一開始就沒打算為其加入類的概念，而是借鑒了另外兩門基于原型的的語言：Self和Smalltalk。

　　既然同為面向?qū)ο笳Z言，那就得有創(chuàng)建對象的方法。在類語言中，對象基于模板來創(chuàng)建，首先定義一個(gè)類作為對現(xiàn)實(shí)世界的抽象，然后由類來實(shí)例化對象；而在原型語言中，對象以克隆另一個(gè)對象的方式創(chuàng)建，被克隆的母體稱為原型對象。

　　克隆的關(guān)鍵在于語言本身是否為我們提供了原生的克隆方法。在ECMAScript5中，Object.create可以用來克隆對象。

var person = {
  name: "tree",
  age: 25,
  say: function(){
    console.log("I'm tree.")
  }
};

var cloneTree = Object.create(person);
console.log(cloneTree);

　　原型模式的目的并不在于得到一個(gè)一模一樣的對象，而提供了一種便捷的方式去創(chuàng)建對象（出自《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》）。但是由于語言設(shè)計(jì)的問題，JavaScript的原型存在著諸多矛盾，它的某些復(fù)雜的語法看起來就那些基于類的語言，這些語法問題掩蓋了它的原型機(jī)制（出自《JavaScript語言精粹》）。如：

function Person(name, age){
  this.name = name;
  this.age = age;      
}

var p = new Person('tree', 25)

　　實(shí)際上，當(dāng)一個(gè)函數(shù)對象唄創(chuàng)建時(shí)，F(xiàn)unction構(gòu)造器產(chǎn)生的函數(shù)對象會運(yùn)行類似這樣的一些代碼：

this.prototype = {constructor: this}

　　新的函數(shù)對象被賦予一個(gè)prototype屬性，它的值是一個(gè)包含constructor屬性且屬性值為該新函數(shù)的對象。當(dāng)對一個(gè)函數(shù)使用new運(yùn)算符時(shí)，函數(shù)的prototype的屬性的值被作為原型對象來克隆出新對象。如果new運(yùn)算符是一個(gè)方法，它的執(zhí)行過程如下：

Function.prorotype.new = function() {
  //以prototype屬性值作為原型對象來克隆出一個(gè)新對象
  var that = Object.create(this.prorotype);
  
  //改變函數(shù)中this關(guān)鍵指向這個(gè)新克隆的對象
  var other = this.apply(that, arguments);
  
  //如果返回值不是一個(gè)對象，則返回這個(gè)新克隆對象
  return (other && typeof other === 'object') ? other : that;
}

　　從上面可以看出，雖然使用new運(yùn)算符調(diào)用函數(shù)看起來像是使用模板實(shí)例化的方式來創(chuàng)建對象，但本質(zhì)還是以原型對象來克隆出新對象。

 　 由于新克隆的對象能否訪問到原型對象的一切方法和屬性，加上new運(yùn)算符的特性，這便成了利用原型模擬類式語言的基石。 

利用原型模擬類式語言
抽象

　　用原型模式來模擬類，首先是抽象方式。根據(jù)JavaScript語言的特點(diǎn)，通常一個(gè)類（實(shí)際上是偽類）通常是將字段放置于構(gòu)造函數(shù)（實(shí)際上是new 運(yùn)算符調(diào)用的函數(shù)，JavaScript本身并沒有構(gòu)造函數(shù)的概念）中，而將方法放置于函數(shù)的prototype屬性里。

function Person(name, age) {
  this.name = name;
  this.age = age;
};

Person.prototype.say = function(){
  console.log("Hello, I'm " + this.name);
};

繼承

　　繼承是OO語言中的一個(gè)最為人津津樂道的概念。許多OO語言都支持兩種繼承方式：接口繼承和實(shí)現(xiàn)繼承。接口繼承之繼承方法簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。但是ECMAScript中無法實(shí)現(xiàn)接口繼承，只支持實(shí)現(xiàn)繼承，而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來實(shí)現(xiàn)的。（出自《JavaScript高級程序設(shè)計(jì)》 6.3節(jié)——繼承）在高三中作者探索了各種關(guān)于繼承的模擬，如：組合繼承、原型繼承、寄生繼承、寄生組合繼承，最終寄生組合式成為所有模擬類式繼承的基礎(chǔ)。

function Person(name, age) {
  this.name = name;
  this.age = age;
};

Person.prototype.say = function(){
  console.log("Hello, I'm " + this.name);
};

function Employee(name, age, major) {
  Person.apply(this, arguments);
  this.major = major;
};

Employee.prototype = Object.create(Person.prototype);
Employee.prorotype.constructor = Employee;

Employee.prorotype.sayMajor = function(){
  console.log(this.major);
}

　　高三中只給出了單繼承的解決方案，關(guān)于多繼承的模擬我們還得自己想辦法。由于多繼承有其本身的困難：面向?qū)ο笳Z言如果支持了多繼承的話，都會遇到著名的菱形問題（Diamond　Problem）。假設(shè)存在一個(gè)如左圖所示的繼承關(guān)系，O中有一個(gè)方法foo，被A類和B類覆寫，但是沒有被C類覆寫。那么C在調(diào)用foo方法的時(shí)候，究竟是調(diào)用A中的foo，還是調(diào)用B中的foo？

　　所以大多數(shù)語言并不支持多繼承，如Java支持單繼承+接口的形式。JavaScript并不支持接口，要在一個(gè)不支持接口的語言上去模擬接口怎么辦？答案是著名的鴨式辨型。放到實(shí)際代碼中就是混入（mixin）。原理很簡單：

 function mixin(t, s) {
    for (var p in s) {
      t[p] = s[p];
    }
  } 

　　值得一提的是dojo利用MRO（方法解析順序（Method Resolution Order），即查找被調(diào)用的方法所在類時(shí)的搜索順序）方式解決了多繼承的問題?！　?/p>

　　到此，我們已經(jīng)清楚了模擬類語言的基本原理。作為一個(gè)愛折騰的程序員，我希望擁有自己的方式來簡化類的創(chuàng)建：

• 提供一種便利的方式去創(chuàng)建類，而不暴露函數(shù)的prototype屬性
• 在子類中覆蓋父類方法時(shí)，能夠像Java一樣提供super函數(shù)，來直接訪問父類同名方法
• 以更方便的方式添加靜態(tài)變量和方法而不去關(guān)心prototype
• 像C#那樣支持Attribute 　　

最終，在借鑒各位大牛的知識總結(jié)，我編寫了自己的類創(chuàng)建工具O.js:

(function(global) {
  var define = global.define;
  if (define && define.amd) {
    define([], function(){
      return O;
    });
  } else {
    global.O = O;
  }

  function O(){};

  O.derive = function(sub) {
    debugger;
    var parent = this;
    sub = sub ? sub : {};

    var o = create(parent);
    var ctor = sub.constructor || function(){};//如何調(diào)用父類的構(gòu)造函數(shù)？
    var statics = sub.statics || {};
    var ms = sub.mixins || [];
    var attrs = sub.attributes || {};

    delete sub.constructor;
    delete sub.mixins;
    delete sub.statics;
    delete sub.attributes;

    //處理繼承關(guān)系
    ctor.prototype = o;
    ctor.prototype.constructor = ctor;
    ctor.superClass = parent;
    //利用DefineProperties方法處理Attributes
    //for (var p in attrs) {
      Object.defineProperties(ctor.prototype, attrs);
    //}
    //靜態(tài)屬性
    mixin(ctor, statics);
    //混入其他屬性和方法，注意這里的屬性是所有實(shí)例對象都能夠訪問并且修改的
    mixin(ctor.prototype, sub);
    //以mixin的方式模擬多繼承
    for (var i = 0, len = ms.length; i < len; i++) {
      mixin(ctor.prototype, ms[i] || {});
    }

    ctor.derive = parent.derive;
    //_super函數(shù)
    ctor.prototype._super = function(f) {
      debugger;
      return parent.prototype[f].apply(this, Array.prototype.slice.call(arguments, 1));
    }

    return ctor;
  }

  function create(clazz) {
    var F = function(){};
    F.prototype = clazz.prototype;
    //F.prototype.constructor = F; //不需要
    return new F();
  };

  function mixin(t, s) {
    for (var p in s) {
      t[p] = s[p];
    }
  }
})(window);

類創(chuàng)建方式如下：

var Person = O.derive({
  constructor: function(name) {//構(gòu)造函數(shù)
    this.setInfo(name);
  },
  statics: {//靜態(tài)變量
    declaredClass: "Person"
  },
  attributes: {//模擬C#中的屬性
    Name: {
      set: function(n) {
        this.name = n;
        console.log(this.name);
      },
      get: function() {
        return this.name + "Attribute";
      }
    }
  },
  share: "asdsaf",//變量位于原型對象上，對所有對象共享
  setInfo: function(name) {//方法
    this.name = name;
  }
});
var p = new Person('lzz');
console.log(p.Name);//lzzAttribute
console.log(Person);

繼承：

var Employee = Person.derive({//子類有父類派生
  constructor: function(name, age) {
    this.setInfo(name, age);
  },
  statics: {
    declaredClass: "Employee"
  },
  setInfo: function(name, age) {
    this._super('setInfo', name);//調(diào)用父類同名方法
    this.age = age;
  }
});

var e = new Employee('lll', 25);
console.log(e.Name);//lllAttribute
console.log(Employee);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

• javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)
• javascript面向?qū)ο笕筇卣髦鄳B(tài)實(shí)例詳解
• javascript面向?qū)ο笕筇卣髦^承實(shí)例詳解
• javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
• JavaScript面向?qū)ο笾薪涌趯?shí)現(xiàn)方法詳解
• 淺談JavaScript面向?qū)ο?-繼承
• JavaScript碎片—函數(shù)閉包（模擬面向?qū)ο螅?/a>
• JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
• JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
• JS 面向?qū)ο笾衿娴膒rototype
• javascript面向?qū)ο蟪绦蛟O(shè)計(jì)實(shí)踐常用知識點(diǎn)總結(jié)

• JS
• 面向?qū)ο?/a>

相關(guān)文章

• 

  在WordPress中加入Google搜索功能的簡單步驟講解

  這篇文章主要介紹了在WordPress中加入Google搜索的簡單步驟講解,谷歌搜索很有用,但同時(shí)也要注意在國內(nèi)使用cse的連通性,需要的朋友可以參考下

  2016-01-01
• 

  5個(gè)可以幫你理解JavaScript核心閉包和作用域的小例子

  這篇文章主要介紹了5個(gè)可以幫你理解JavaScript核心閉包和作用域的小例子,本文是翻譯自國外的一篇文章,短小精悍,需要的朋友可以參考下

  2014-10-10
• 

  video.js使用改變ui過程

  這篇文章主要介紹了video.js使用改變ui的過程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

  2017-03-03
• 

  JavaScript中this關(guān)鍵字用法實(shí)例分析

  這篇文章主要介紹了JavaScript中this關(guān)鍵字用法,結(jié)合實(shí)例形式總結(jié)分析了javascript中this關(guān)鍵字在不同條件下的指向問題與相關(guān)操作技巧,需要的朋友可以參考下

  2018-08-08
• 

  字符串的replace方法應(yīng)用淺析

  按照W3C的說明，String對象的replace方法調(diào)用方式是stringObject.replace(regexp/substr,replacement)。

  2011-12-12
• 

  原生JS實(shí)現(xiàn)簡單的輪播圖效果

  這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2022-07-07
• 

  Promise對象all與race方法手寫示例

  這篇文章主要為大家介紹了Promise對象all與race方法手寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

  2022-12-12
• 

  收藏Javascript中常用的55個(gè)經(jīng)典技巧

  收藏Javascript中常用的55個(gè)經(jīng)典技巧...

  2007-08-08
• 

  抖音上用記事本編寫愛心小程序教程

  這篇文章主要為大家詳細(xì)介紹了抖音上用記事本編寫"愛心"小程序教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2019-04-04
• 

  使用非html5實(shí)現(xiàn)js板連連看游戲示例代碼

  連連看游戲通常情況下都是使用html5來實(shí)現(xiàn)的，不過從現(xiàn)在開始就可以使用js來實(shí)現(xiàn)了，具體的代碼如下，喜歡的朋友可以參考下，希望對大家有所幫助

  2013-09-09

最新評論