優(yōu)就業(yè)WEB教程-JavaScript之原型深入詳解

1、優(yōu)就業(yè)WEB教程-JavaScript之原型深入詳解理解原型原型是一個(gè)對象，其他對象可以通過它實(shí)現(xiàn)屬性繼承。任何一個(gè)對象都可以成為繼承，所有對象在默認(rèn)的情況下都有一個(gè)原型，因?yàn)樵捅旧硪彩菍ο螅悦總€(gè)原型自身又有一個(gè)原型。任何一個(gè)對象都有一個(gè)prototype的屬性，記為:_proto_。每當(dāng)我們定義一個(gè)對象，其_proto_屬性就指向了其prototype。示例如下：var foo = x: 10,y: 20;即使我們不指定prototype，該屬性也會(huì)預(yù)留。如果我們有明確指向的話，那么鏈表就連起來了。需要注意的是，prototype自己也有指向，就是最高級的totyp

2、e。示例如下：var a = x: 10,calculate: function (z) return this.x + this.y + z;var b = y: 20,_proto_: a;var c = y: 30,_proto_: a;/ call the inherited methodb.calculate(30); / 60使用原型理解了原型的原理之后，如何使用原型呢?或者說原型有什么作用呢?一般的初學(xué)者，在剛剛學(xué)習(xí)了基本的javascript語法后，都是通過面向函數(shù)來編程的。如下代碼：var decimalDigits = 2,tax = 5;function add(x, y

3、) return x + y;function subtract(x, y) return x - y;/alert(add(1, 3);通過執(zhí)行各個(gè)函數(shù)來得到最后的結(jié)果。但是利用原型，我們可以優(yōu)化一些我們的代碼，使用構(gòu)造函數(shù)：首先，函數(shù)本體中只存放變量：var Calculator = function (decimalDigits, tax) this.decimalDigits = decimalDigits;this.tax = tax;其具體的方法通過prototype屬性來設(shè)置：Ctotype = add: function (x, y) return x

4、 + y;,subtract: function (x, y) return x - y;/alert(new Calculator().add(1, 3);這樣就可以通過實(shí)例化對象后進(jìn)行相應(yīng)的函數(shù)操作。這也是一般的js框架采用的方法。原型還有一個(gè)作用就是用來實(shí)現(xiàn)繼承。首先，定義父對象：var BaseCalculator = function() this.decimalDigits = 2;BaseCtotype = add: function(x, y) return x + y;,subtract: function(x, y) return x - y;然后

5、定義子對象，將子對象的原型指向父元素的實(shí)例化：var Calculator = function () /為每個(gè)實(shí)例都聲明一個(gè)稅收數(shù)字this.tax = 5;Ctotype = 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對象實(shí)例，他們的原型指向的都是同一個(gè)實(shí)例。上面的

6、代碼，運(yùn)行以后，我們可以看到因?yàn)镃alculator的原型是指向BaseCalculator的實(shí)例上的，所以可以訪問他的decimalDigits屬性值，那如果我不想讓Calculator訪問BaseCalculator的構(gòu)造函數(shù)里聲明的屬性值，那怎么辦呢?只需要將Calculator指向BaseCalculator的原型而不是實(shí)例就行了。代碼如下：var Calculator = function () this.tax= 5;Ctotype = BaseCtotype;在使用第三方庫的時(shí)候，有時(shí)候他們定義的原型方法不能滿足我們的需要，我們

7、就可以自己添加一些方法，代碼如下：/覆蓋前面Calculator的add() functionCtotype.add = function (x, y) return x + y + this.tax;var calc = new Calculator();alert(calc.add(1, 1);原型鏈對象的原型指向?qū)ο蟮母?，而父的原型又指向父的父，這種原型層層的關(guān)系，叫做原型鏈。在查找一個(gè)對象的屬性時(shí)，javascript會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止，當(dāng)查找到達(dá)原型鏈的頂部，也即是Ototype，仍然沒有找到指定的屬性，就會(huì)返回u

8、ndefined。示例如下：function foo() this.add = function (x, y) return x + y;totype.add = function (x, y) return x + y + 10;Ototype.subtract = function (x, y) return x - y;var f = new foo();alert(f.add(1, 2); /結(jié)果是3，而不是13alert(f.subtract(1, 2); /結(jié)果是-1我們可以發(fā)現(xiàn)，subtrace是按照向上找的原則，而add則出了意外。原因就是，屬性在查找的時(shí)候是先查找自身的屬性，如果沒有再查找原型。說到Ototype，就不得不提它的一個(gè)方法，hasOwnProperty。它能判斷一個(gè)對象是否包含自定義屬性而不是原型鏈上的屬性，它是javascript中唯一一個(gè)處理屬性但是不查找原型鏈的函數(shù)。使用代碼如下：/ 修改OtotypeOtotype.bar = 1;var foo = goo: undefined;foo.bar; / 1'bar' in foo; / truefoo.hasOwnProperty('bar'); / false