亚洲AV日韩AⅤ综合手机在线观看,激情婷婷久久综合色,欧美色五月婷婷久久,久久国产精品99久久人人澡

  • <abbr id="uk6uq"><abbr id="uk6uq"></abbr></abbr>
  • <tbody id="uk6uq"></tbody>
  • JavaScript之強(qiáng)大的原型和原型鏈

    時(shí)間:2024-10-18 00:29:11 JavaScript 我要投稿
    • 相關(guān)推薦

    JavaScript之強(qiáng)大的原型和原型鏈

      JavaScript 不包含傳統(tǒng)的類繼承模型,而是使用 prototypal 原型模型。為此YJBYS小編下文將為大家講解JavaScript之強(qiáng)大的原型和原型鏈,歡迎大家學(xué)習(xí)!

      雖然這經(jīng)常被當(dāng)作是 JavaScript 的缺點(diǎn)被提及,其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。實(shí)現(xiàn)傳統(tǒng)的類繼承模型是很簡單,但是實(shí)現(xiàn) JavaScript 中的原型繼承則要困難的多。

      由于 JavaScript 是唯一一個(gè)被廣泛使用的基于原型繼承的語言,所以理解兩種繼承模式的差異是需要一定時(shí)間的,今天我們就來了解一下原型和原型鏈。

      原型

      10年前,我剛學(xué)習(xí)JavaScript的時(shí)候,一般都是用如下方式來寫代碼:

      var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3));

      通過執(zhí)行各個(gè)function來得到結(jié)果,學(xué)習(xí)了原型之后,我們可以使用如下方式來美化一下代碼。

      原型使用方式1:

      在使用原型之前,我們需要先將代碼做一下小修改:

      var Calculator = function (decimalDigits, tax) { this.decimalDigits = decimalDigits; this.tax = tax; };

      然后,通過給Calculator對(duì)象的prototype屬性賦值對(duì)象字面量來設(shè)定Calculator對(duì)象的原型。

      Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3));

      這樣,我們就可以new Calculator對(duì)象以后,就可以調(diào)用add方法來計(jì)算結(jié)果了。

      原型使用方式2:

      第二種方式是,在賦值原型prototype的時(shí)候使用function立即執(zhí)行的表達(dá)式來賦值,即如下格式:

      Calculator.prototype = function () { } ();

      它的好處在前面的帖子里已經(jīng)知道了,就是可以封裝私有的function,通過return的形式暴露出簡單的使用名稱,以達(dá)到public/private的效果,修改后的代碼如下:

      Calculator.prototype = function () { add = function (x, y) { return x + y; }, subtract = function (x, y) { return x - y; } return { add: add, subtract: subtract } } (); //alert((new Calculator()).add(11, 3));

      同樣的方式,我們可以new Calculator對(duì)象以后調(diào)用add方法來計(jì)算結(jié)果了。

      再來一點(diǎn)

      分步聲明:

      上述使用原型的時(shí)候,有一個(gè)限制就是一次性設(shè)置了原型對(duì)象,我們?cè)賮碚f一下如何分來設(shè)置原型的每個(gè)屬性吧。

      var BaseCalculator = function () { //為每個(gè)實(shí)例都聲明一個(gè)小數(shù)位數(shù) this.decimalDigits = 2;}; //使用原型給BaseCalculator擴(kuò)展2個(gè)對(duì)象方法BaseCalculator.prototype.add = function (x, y) { return x + y;};BaseCalculator.prototype.subtract = function (x, y) { return x - y;};

      首先,聲明了一個(gè)BaseCalculator對(duì)象,構(gòu)造函數(shù)里會(huì)初始化一個(gè)小數(shù)位數(shù)的屬性decimalDigits,然后通過原型屬性設(shè)置2個(gè)function,分別是add(x,y)和subtract(x,y),當(dāng)然你也可以使用前面提到的2種方式的任何一種,我們的主要目的是看如何將BaseCalculator對(duì)象設(shè)置到真正的Calculator的原型上。

      var BaseCalculator = function() { this.decimalDigits = 2;};BaseCalculator.prototype = { add: function(x, y) { return x + y; }, subtract: function(x, y) { return x - y; }};

      創(chuàng)建完上述代碼以后,我們來開始:

      var Calculator = function () { //為每個(gè)實(shí)例都聲明一個(gè)稅收數(shù)字 this.tax = 5;}; Calculator.prototype = new BaseCalculator();

      我們可以看到Calculator的原型是指向到BaseCalculator的一個(gè)實(shí)例上,目的是讓Calculator集成它的add(x,y)和subtract(x,y)這2個(gè)function,還有一點(diǎn)要說的是,由于它的原型是BaseCalculator的一個(gè)實(shí)例,所以不管你創(chuàng)建多少個(gè)Calculator對(duì)象實(shí)例,他們的原型指向的都是同一個(gè)實(shí)例。

      var calc = new Calculator();alert(calc.add(1, 1));//BaseCalculator 里聲明的decimalDigits屬性,在 Calculator里是可以訪問到的alert(calc.decimalDigits);

      上面的代碼,運(yùn)行以后,我們可以看到因?yàn)镃alculator的原型是指向BaseCalculator的實(shí)例上的,所以可以訪問他的decimalDigits屬性值,那如果我不想讓Calculator訪問BaseCalculator的構(gòu)造函數(shù)里聲明的屬性值,那怎么辦呢?這么辦:

      var Calculator = function () { this.tax= 5;};Calculator.prototype = BaseCalculator.prototype;

      通過將BaseCalculator的原型賦給Calculator的原型,這樣你在Calculator的實(shí)例上就訪問不到那個(gè)decimalDigits值了,如果你訪問如下代碼,那將會(huì)提升出錯(cuò)。

      var calc = new Calculator();alert(calc.add(1, 1));alert(calc.decimalDigits);

      重寫原型:

      在使用第三方JS類庫的時(shí)候,往往有時(shí)候他們定義的原型方法是不能滿足我們的需要,但是又離不開這個(gè)類庫,所以這時(shí)候我們就需要重寫他們的原型中的一個(gè)或者多個(gè)屬性或function,我們可以通過繼續(xù)聲明的同樣的add代碼的形式來達(dá)到覆蓋重寫前面的add功能,代碼如下:

      //覆蓋前面Calculator的add() function Calculator.prototype.add = function (x, y) { return x + y + this.tax;};var calc = new Calculator();alert(calc.add(1, 1));

      這樣,我們計(jì)算得出的結(jié)果就比原來多出了一個(gè)tax的值,但是有一點(diǎn)需要注意:那就是重寫的代碼需要放在最后,這樣才能覆蓋前面的代碼。

      原型鏈

      在將原型鏈之前,我們先上一段代碼:

      function Foo() { this.value = 42;}Foo.prototype = { method: function() {}};function Bar() {}// 設(shè)置Bar的prototype屬性為Foo的實(shí)例對(duì)象Bar.prototype = new Foo();Bar.prototype.foo = 'Hello World';// 修正Bar.prototype.constructor為Bar本身Bar.prototype.constructor = Bar;var test = new Bar() // 創(chuàng)建Bar的一個(gè)新實(shí)例// 原型鏈test [Bar的實(shí)例] Bar.prototype [Foo的實(shí)例] { foo: 'Hello World' } Foo.prototype {method: ...}; Object.prototype {toString: ... /* etc. */};

      上面的例子中,test 對(duì)象從 Bar.prototype 和 Foo.prototype 繼承下來;因此,它能訪問 Foo 的原型方法 method。同時(shí),它也能夠訪問那個(gè)定義在原型上的 Foo 實(shí)例屬性 value。需要注意的是 new Bar() 不會(huì)創(chuàng)造出一個(gè)新的 Foo 實(shí)例,而是重復(fù)使用它原型上的那個(gè)實(shí)例;因此,所有的 Bar 實(shí)例都會(huì)共享相同的 value 屬性。

      屬性查找:

      當(dāng)查找一個(gè)對(duì)象的屬性時(shí),JavaScript 會(huì)向上遍歷原型鏈,直到找到給定名稱的屬性為止,到查找到達(dá)原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性,就會(huì)返回 undefined,我們來看一個(gè)例子:

      function foo() { this.add = function (x, y) { return x + y; } } foo.prototype.add = function (x, y) { return x + y + 10; } Object.prototype.subtract = function (x, y) { return x - y; } var f = new foo(); alert(f.add(1, 2)); //結(jié)果是3,而不是13 alert(f.subtract(1, 2)); //結(jié)果是-1

      通過代碼運(yùn)行,我們發(fā)現(xiàn)subtract是安裝我們所說的向上查找來得到結(jié)果的,但是add方式有點(diǎn)小不同,這也是我想強(qiáng)調(diào)的,就是屬性在查找的時(shí)候是先查找自身的屬性,如果沒有再查找原型,再?zèng)]有,再往上走,一直插到Object的原型上,所以在某種層面上說,用 for in語句遍歷屬性的時(shí)候,效率也是個(gè)問題。

      還有一點(diǎn)我們需要注意的是,我們可以賦值任何類型的對(duì)象到原型上,但是不能賦值原子類型的值,比如如下代碼是無效的:

      function Foo() {}Foo.prototype = 1; // 無效

      hasOwnProperty函數(shù):

      hasOwnProperty是Object.prototype的一個(gè)方法,它可是個(gè)好東西,他能判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性,因?yàn)閔asOwnProperty 是 JavaScript 中唯一一個(gè)處理屬性但是不查找原型鏈的函數(shù)。

      // 修改Object.prototypeObject.prototype.bar = 1; var foo = {goo: undefined};foo.bar; // 1'bar' in foo; // truefoo.hasOwnProperty('bar'); // falsefoo.hasOwnProperty('goo'); // true

      只有 hasOwnProperty 可以給出正確和期望的結(jié)果,這在遍歷對(duì)象的屬性時(shí)會(huì)很有用。 沒有其它方法可以用來排除原型鏈上的屬性,而不是定義在對(duì)象自身上的屬性。

      但有個(gè)惡心的地方是:JavaScript 不會(huì)保護(hù) hasOwnProperty 被非法占用,因此如果一個(gè)對(duì)象碰巧存在這個(gè)屬性,就需要使用外部的 hasOwnProperty 函數(shù)來獲取正確的結(jié)果。

      var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons'};foo.hasOwnProperty('bar'); // 總是返回 false// 使用{}對(duì)象的 hasOwnProperty,并將其上下為設(shè)置為foo{}.hasOwnProperty.call(foo, 'bar'); // true

      當(dāng)檢查對(duì)象上某個(gè)屬性是否存在時(shí),hasOwnProperty 是唯一可用的方法。同時(shí)在使用 for in loop 遍歷對(duì)象時(shí),推薦總是使用 hasOwnProperty 方法,這將會(huì)避免原型對(duì)象擴(kuò)展帶來的干擾,我們來看一下例子:

      // 修改 Object.prototypeObject.prototype.bar = 1;var foo = {moo: 2};for(var i in foo) { console.log(i); // 輸出兩個(gè)屬性:bar 和 moo}

      我們沒辦法改變for in語句的行為,所以想過濾結(jié)果就只能使用hasOwnProperty 方法,代碼如下:

      // foo 變量是上例中的for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); }}

      這個(gè)版本的代碼是唯一正確的寫法。由于我們使用了 hasOwnProperty,所以這次只輸出 moo。如果不使用 hasOwnProperty,則這段代碼在原生對(duì)象原型(比如 Object.prototype)被擴(kuò)展時(shí)可能會(huì)出錯(cuò)。

      總結(jié):推薦使用 hasOwnProperty,不要對(duì)代碼運(yùn)行的環(huán)境做任何假設(shè),不要假設(shè)原生對(duì)象是否已經(jīng)被擴(kuò)展了。

    【JavaScript之強(qiáng)大的原型和原型鏈】相關(guān)文章:

    理解JavaScript原型鏈教程09-02

    JavaScript類定義原型方法的兩種實(shí)現(xiàn)的區(qū)別07-11

    Javascript函數(shù)的定義和用法分析08-15

    網(wǎng)站內(nèi)鏈和外鏈的定義及區(qū)別09-28

    常用排序算法之JavaScript實(shí)現(xiàn)代碼段06-04

    如何提高網(wǎng)站內(nèi)鏈和外鏈的收錄?08-09

    JavaScript學(xué)習(xí)歷程和心得范文(精選10篇)02-13

    網(wǎng)站外鏈和內(nèi)鏈怎么開展SEO優(yōu)化06-23

    對(duì)javascript的理解08-08

    Javascript中arguments對(duì)象的詳解和使用方法08-20