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

Javascript 學習筆記之 對象篇(二) : 原型對象

 更新時間:2014年06月24日 08:57:13   投稿:hebedich  
Javascript 并沒有類繼承模型,而是使用原型對象 prototype 進行原型式繼承。盡管人們經(jīng)常將此看做是 Javascript 的一個缺點,然而事實上,原型式繼承比傳統(tǒng)的類繼承模型要更加強大。舉個例子,在原型式繼承頂端構建一個類模型很簡單,然而反過來則是個困難得多的任務。

Javascript 是唯一一個被廣泛運用的原型式繼承的語言,所以理解兩種繼承方式的差異是需要時間的。

第一個主要差異就是 Javascript 使用原型鏈來繼承:

function Foo() {
 this.value = 42;
}
Foo.prototype = {
 method: function() {}
};
function Bar() {}

設置 Bar 的 prototype 為 Foo 的對象實例:

Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

確保 Bar 的構造函數(shù)為本身,并新建一個 Bar 對象實例:

Bar.prototype.constructor = Bar;
var test = new Bar();

下面我們來看下整個原型鏈的組成:

test [instance of Bar]
 Bar.prototype [instance of Foo]
 { foo: 'Hello World' }
 Foo.prototype
  { method: ... }
  Object.prototype
  { toString: ... /* etc. */ }

在上面的例子中,對象 test 將會同時繼承 Bar.prototype 和 Foo.prototype。因此它可以訪問定義在 Foo 中的函數(shù) method。當然,它也可以訪問屬性 value。需要提到的是,當 new Bar() 時并不會創(chuàng)建一個新的 Foo 實例,而是重用它原型對象自帶的 Foo 實例。同樣,所有的 Bar 實例都共享同一個 value 屬性。我們舉例說明:

test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

原型鏈查找機制

當訪問一個對象的屬性時,Javascript 會從對象本身開始往上遍歷整個原型鏈,直到找到對應屬性為止。如果此時到達了原型鏈的頂部,也就是上例中的 Object.prototype,仍然未發(fā)現(xiàn)需要查找的屬性,那么 Javascript 就會返回 undefined 值。

原型對象的屬性

盡管原型對象的屬性被 Javascript 用來構建原型鏈,我們仍然可以值賦給它。但是原始值復制給 prototype 是無效的,如:

function Foo() {}
Foo.prototype = 1; // no effect

這里講個本篇的題外話,介紹下什么是原始值:
在 Javascript 中,變量可以存放兩種類型的值,分別是原始值和引用值。

1.原始值(primitive value):

原始值是固定而簡單的值,是存放在棧 stack 中的簡單數(shù)據(jù)段,也就是說,它們的值直接存儲在變量訪問的位置。
原始類型有以下五種型: Undefined, Null, Boolean, Number, String。

2.引用值(reference value):

引用值則是比較大的對象,存放在堆 heap 中的對象,也就是說,存儲在變量處的值是一個指針  pointer,指向存儲對象的內存處。所有引用類型都集成自 Object。
原型鏈性能問題

如果需要查找的屬性位于原型鏈的上端,那么查找過程對于性能而言無疑會帶來負面影響。當在性能要求必要嚴格的場景中這將是需要重點考慮得因素。此外,試圖查找一個不存在屬性時將會遍歷整個原型鏈。
同樣,當遍歷一個對象的屬性時,所有在原型鏈上的屬性都將被訪問。

總結

理解原型式繼承是寫較為復雜的 Javascript 代碼的前提,同時要注意代碼中原型鏈的高度。當面臨性能瓶頸時要學會將原型鏈拆分開來。此外,要將原型對象 prototype 和原型 __proto__ 區(qū)分開來,這里主要討論原型對象 prototype 就不闡述關于原型 __proto__ 的問題了,

相關文章

  • 全面理解JavaScript中的閉包

    全面理解JavaScript中的閉包

    將外部作用域中的局部變量封閉起來的函數(shù)對象稱為閉包(Closure),被封閉起來的變量與封閉它的函數(shù)對象有相同的生命周期,這在JavaScript中比較難理解而且十分重要,接下來帶大家一起來全面理解JavaScript中的閉包:
    2016-05-05
  • ParseInt函數(shù)參數(shù)設置介紹

    ParseInt函數(shù)參數(shù)設置介紹

    經(jīng)常用ParseInt函數(shù)轉換字符串為int數(shù)值,ParseInt函數(shù)有兩個參數(shù)可以設置,其中第二個參數(shù)可以缺省
    2014-01-01
  • 辨析JavaScript中的Undefined類型與null類型

    辨析JavaScript中的Undefined類型與null類型

    Undefined與null都是js中的基本數(shù)據(jù)類型,然而正如它們的名字那樣,未初始化和空并不相同,下面我們就來詳細辨析JavaScript中的Undefined類型與null類型:
    2016-05-05
  • 貼一個在Mozilla中常用的Javascript代碼

    貼一個在Mozilla中常用的Javascript代碼

    貼一個在Mozilla中常用的Javascript代碼...
    2007-01-01
  • 了解ESlint和其相關操作小結

    了解ESlint和其相關操作小結

    這篇文章主要介紹了了解ESlint和其相關操作小結,詳細的介紹了什么是ESlint以及ESlint規(guī)范,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • Javascript中Date類型和Math類型詳解

    Javascript中Date類型和Math類型詳解

    這篇文章主要給大家介紹了Javascript中Date類型和Math類型的一些基礎知識,非常的實用,有需要的小伙伴可以參考下
    2016-02-02
  • 最實用的JS數(shù)組函數(shù)整理

    最實用的JS數(shù)組函數(shù)整理

    本篇文章小編給大家整理了非常全的JS數(shù)組函數(shù)以及相關的寫法規(guī)則,希望能夠對讀者們起到幫助和參考。
    2017-12-12
  • js轉義字符介紹

    js轉義字符介紹

    有時候js得到json串中含有"<"和">" ,那么兩個尖括號中間的文字是無法在html頁面顯示出來的,必須用轉義字符
    2013-11-11
  • javascript列表框操作函數(shù)集合匯總

    javascript列表框操作函數(shù)集合匯總

    這篇文章主要是對javascript列表框操作函數(shù)進行了詳細的匯總介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • 詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用

    詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用

    這篇文章主要介紹了詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用,文中特別提及了IE8的兼容問題以及for in的使用問題,需要的朋友可以參考下
    2016-03-03

最新評論