Javascript對象原型Prototype的用法

本篇文章展示了Javascript對象原型Prototype的用法，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

JavaScript 常被描述為一種基于原型的語言 (prototype-based language)——每個(gè)對象擁有一個(gè)原型對象，對象以其原型為模板、從原型繼承方法和屬性。原型對象也可能擁有原型，并從中繼承方法和屬性，一層一層、以此類推。這種關(guān)系常被稱為原型鏈 (prototype chain)，它解釋了為何一個(gè)對象會擁有定義在其他對象中的屬性和方法。

對象原型Prototype

1、方法過載

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

function Cat(name,color){
this.name = name;
this.color = color;
 
this.run=function(){
    alert(“一只”+this.color +”的小貓飛奔過來...”);
}
this.eat=function(){
    alert(this.name +”要吃魚”);
}
}
 
var cat1 = new Cat();

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

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

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

2、原型的使用

2.1、 原型屬性

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

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

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

// 定義一個(gè)構(gòu)造器
function Person(name,age){
}
// 函數(shù)的形參個(gè)數(shù)
console.debug(Person.length)// ==>2
// 構(gòu)造函數(shù)
console.debug(Person.constructor)// ==> Function()
// 原型類型
console.debug(typeof Person.prototype)// ==>object
// 原型內(nèi)容
console.debug(Person.prototype)// ↓↓

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

2.2、原型操作

設(shè)值：

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

取值：

對象.屬性
對象.方法()

2.3、屬性訪問的優(yōu)先級

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

2.4、神秘的__proto__屬性

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

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

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

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

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

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

總結(jié)：

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

看完上述內(nèi)容，你們掌握J(rèn)avascript對象原型Prototype的用法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！