Javascript中prototype的使用詳解
先看下面一段代碼:
function Machine(ecode, horsepower) {
this.ecode = ecode;
this.horsepower = horsepower;
}
function showme() {
alert(this.name + " " + this.ecode + " " + this.horsepower);
}
var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme = showme;
machine.showme();
這樣一段代碼,雖然建立了一個Machine對象后,通過machine.showme = showme;使得showme函數(shù)變成了Machine對象machine的方法。
但是,就看上面兩個函數(shù)(一個是對象的構(gòu)造函數(shù),一個是普通方法)沒有任何關(guān)系,這樣的代碼,不是那么“優(yōu)雅“,因此,便有了prototype。
//機(jī)器
function Machine(ecode, horsepower) {
this.ecode = ecode;
this.horsepower = horsepower;
}
//特別注意這一句,Machine.prototype是第一次初始化的時候就初始化好的,
//當(dāng)調(diào)用Machine作為構(gòu)造函數(shù)的時候,engine的值不會再改變
Machine.prototype.engine = this.ecode + " " + this.horsepower;
Machine.prototype.showme = function () { alert(this.name + " " + this.ecode + " " + this.horsepower); }
利用以上代碼,所有的Machine對象就有了showme方法了。
但是要特別注意:
prototype只是面對實例的,而不是面對類對象的。(js中,類本身就是一個對象)所以Machine.showme();會報錯誤,因為Machine這個對象是沒有showme方法的。
那么,我們怎么使用showme方法呢?必須得新建一個Machine實例,只有Machine實例才會有這個方法。
var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme(); //輸出machine1 code1 15。
有了prototype之后,我們更加容易實現(xiàn)繼承關(guān)系。比如我現(xiàn)在寫一個Car類,需要繼承目前這個Machine類,只需要寫如下代碼即可:
//小汽車
function Car(name, ecode, horsepower) {
this.name = name;
//調(diào)用父類的構(gòu)造函數(shù),使得Car的對象有ecode、horsepower屬性
Machine.call(this, ecode, horsepower);
}
//Car的原型指向Machine,使Car對象有Machine原型的任意屬性和方法,比如showme
Car.prototype = new Machine();
這里如何調(diào)用父構(gòu)造函數(shù),以及如何獲得父類的原型,注釋的都很清楚,就不在贅述了。
然后,我們可以新建一個對象測試一下:
//新建一個類Car的對象。
var xiali = new Car("xiali", "aaa", 15);
alert(xiali.engine);
xiali.showme();
以上,是prototype的基本應(yīng)用,但是也是prototype的最主要的應(yīng)用。
掌握的prototype的使用,在以后的過程中,對于對象的構(gòu)建和繼承,會有更深層次的理解。
查看更多JavaScript的語法,大家可以關(guān)注:《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》,也希望大家多多支持腳本之家。
- 詳解Javascript中prototype屬性(推薦)
- JS構(gòu)造函數(shù)與原型prototype的區(qū)別介紹
- js中使用使用原型(prototype)定義方法的好處詳解
- JavaScript中的原型prototype完全解析
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- js中prototype用法詳細(xì)介紹
- JavaScript prototype 使用介紹
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場景簡述
- JavaScript中的prototype使用說明
- Javascript之深入淺出prototype
相關(guān)文章
javascript對話框使用方法(警告框 javascript確認(rèn)框 提示框)
javascript對話框使用方法,有警告框、確認(rèn)框、提示框的使用方法和語法,大家參考使用吧2014-01-01
JavaScript基礎(chǔ)語法、dom操作樹及document對象
本文介紹了學(xué)習(xí)javascript重要的3個內(nèi)容基礎(chǔ)語法、dom操作樹及document對象,小伙伴們一定要弄明白才行2014-12-12
nodeType屬性返回被選節(jié)點的節(jié)點類型介紹
這篇文章主要介紹了nodeType屬性返回被選節(jié)點的節(jié)點類型。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
詳解JavaScript中雙等號引起的隱性類型轉(zhuǎn)換
JavaScript中由==判斷所引起的轉(zhuǎn)換會引發(fā)解釋器的一些列執(zhí)行步驟,接下來我們就來詳解JavaScript中雙等號引起的隱性類型轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
javascript學(xué)習(xí)筆記(四) Number 數(shù)字類型
數(shù)字格式化方法toFixed()、toExponential()、toPrecision(),三個方法都四舍五入2012-06-06
Knockout數(shù)組(observable)使用詳解示例
本文通過示例詳細(xì)說明了Knockout數(shù)組(observable)的使用方法,如從observableArray里讀取信息、操作observableArray2013-11-11
JavaScript DOM 學(xué)習(xí)第九章 選取范圍的介紹
這一章會對范圍對象做一些介紹。使用這個對象你能選取HTML文檔中的任何部分然后根據(jù)選取信息作一些事情。最常見的范圍對象是由用戶選擇的。2010-02-02

