詳解Javascript對(duì)象原型

1.?對(duì)象原型Prototype

1.1.?方法過載

創(chuàng)建一個(gè)小貓構(gòu)造函數(shù)，代碼如下：

以上所有用this定義方法，this代表新的實(shí)例，都會(huì)在創(chuàng)建新實(shí)例時(shí)為其創(chuàng)建一個(gè)方法副本。

是不是有點(diǎn)多余，怎么解決 ？？

分析：每一個(gè)類型都擁有的特性，每次在實(shí)例級(jí)別定義確實(shí)有點(diǎn)浪費(fèi)，那么如果能在類級(jí)別定義，每一個(gè)實(shí)例自動(dòng)擁有類的通用特征就好了。在這里我們就要用到prototype。

1.2.?原型的使用

1.2.1.?原型屬性

在JavaScript中，函數(shù)本身也是一個(gè)包含了“方法”和“屬性”的對(duì)象。比如之前學(xué)了一些方法（如constructor()）及屬性(如name和length)等等。

?

現(xiàn)在來介紹一個(gè)新的屬性--原型Prototype。

?

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè) prototype（原型）屬性，他指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。?

?

每一個(gè)類（構(gòu)造函數(shù)）都具有一個(gè)prototype屬性，當(dāng)創(chuàng)建這個(gè)類的實(shí)例對(duì)象原型對(duì)象的所有屬性都被立即賦予要?jiǎng)?chuàng)建的對(duì)象中。

?

1.2.2.?原型操作

設(shè)值：

?

構(gòu)造函數(shù).原型.屬性=屬性值

構(gòu)造函數(shù).原型.方法=函數(shù)

?

取值：

???

?? 對(duì)象.屬性

對(duì)象.方法()

?

1.2.3.?屬性訪問的優(yōu)先級(jí)

原生屬性的優(yōu)先級(jí)高于原型屬性。遵循從上到下查找：

?

?

1.2.4.?神秘的__proto__屬性

訪問對(duì)象上面的屬性，直接通過object.name訪問。

神奇的user.__proto__屬性，該屬性其實(shí)就是對(duì)應(yīng)User類的prototype屬性。

console.debug(user.__proto__===User.prototyp);//==>?true;

?

_proto_屬性屬于對(duì)象實(shí)例，prototype屬性類的屬性。

每個(gè)對(duì)象在創(chuàng)建后，都會(huì)自動(dòng)建立一個(gè)到prototype上的引用，讓對(duì)象具備類型原型的所有特征。

?

一個(gè)對(duì)象中的__proto__(prototype)屬性中的成員，可以直接通過object.成員進(jìn)行訪問。

?

總結(jié)：每個(gè)類都有獨(dú)立的prototype屬性，向prototype對(duì)象上面添加屬性，對(duì)象實(shí)例可以共享prototype對(duì)象上面的屬性，如果對(duì)象本身已存在某個(gè)屬性，使用對(duì)象本身上面的屬性，如果沒有則使用prototype上面的屬性，如果是添加屬性添加到對(duì)象上面,不影響對(duì)象的原型對(duì)象。

?

?

1.2.5.?
擴(kuò)展內(nèi)置對(duì)象

1.2.5.1.?擴(kuò)展Array對(duì)象

我們都知道，Array對(duì)象里沒有insert（插入）和remove（刪除）兩個(gè)方法，都是用一個(gè)splice方法完成插入、刪除等操作。

1.2.5.2.?擴(kuò)展HTMLElement對(duì)象

在新版瀏覽器中，所有的有DOM元素都繼承于HTMLElement構(gòu)造器。通過訪問HTMLElement的原型，瀏覽器可以為我們提供擴(kuò)展任意HTML節(jié)點(diǎn)的能力。