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();
這樣一段代碼,雖然建立了一個(gè)Machine對(duì)象后,通過(guò)machine.showme = showme;使得showme函數(shù)變成了Machine對(duì)象machine的方法。
但是,就看上面兩個(gè)函數(shù)(一個(gè)是對(duì)象的構(gòu)造函數(shù),一個(gè)是普通方法)沒(méi)有任何關(guān)系,這樣的代碼,不是那么“優(yōu)雅“,因此,便有了prototype。
//機(jī)器
function Machine(ecode, horsepower) {
this.ecode = ecode;
this.horsepower = horsepower;
}
//特別注意這一句,Machine.prototype是第一次初始化的時(shí)候就初始化好的,
//當(dāng)調(diào)用Machine作為構(gòu)造函數(shù)的時(shí)候,engine的值不會(huì)再改變
Machine.prototype.engine = this.ecode + " " + this.horsepower;
Machine.prototype.showme = function () { alert(this.name + " " + this.ecode + " " + this.horsepower); }
利用以上代碼,所有的Machine對(duì)象就有了showme方法了。
但是要特別注意:
prototype只是面對(duì)實(shí)例的,而不是面對(duì)類(lèi)對(duì)象的。(js中,類(lèi)本身就是一個(gè)對(duì)象)所以Machine.showme();會(huì)報(bào)錯(cuò)誤,因?yàn)镸achine這個(gè)對(duì)象是沒(méi)有showme方法的。
那么,我們?cè)趺词褂胹howme方法呢?必須得新建一個(gè)Machine實(shí)例,只有Machine實(shí)例才會(huì)有這個(gè)方法。
var machine = new Machine("code1", 15);
machine.name = "machine1";
machine.showme(); //輸出machine1 code1 15。
有了prototype之后,我們更加容易實(shí)現(xiàn)繼承關(guān)系。比如我現(xiàn)在寫(xiě)一個(gè)Car類(lèi),需要繼承目前這個(gè)Machine類(lèi),只需要寫(xiě)如下代碼即可:
//小汽車(chē)
function Car(name, ecode, horsepower) {
this.name = name;
//調(diào)用父類(lèi)的構(gòu)造函數(shù),使得Car的對(duì)象有ecode、horsepower屬性
Machine.call(this, ecode, horsepower);
}
//Car的原型指向Machine,使Car對(duì)象有Machine原型的任意屬性和方法,比如showme
Car.prototype = new Machine();
這里如何調(diào)用父構(gòu)造函數(shù),以及如何獲得父類(lèi)的原型,注釋的都很清楚,就不在贅述了。
然后,我們可以新建一個(gè)對(duì)象測(cè)試一下:
//新建一個(gè)類(lèi)Car的對(duì)象。
var xiali = new Car("xiali", "aaa", 15);
alert(xiali.engine);
xiali.showme();
以上,是prototype的基本應(yīng)用,但是也是prototype的最主要的應(yīng)用。
掌握的prototype的使用,在以后的過(guò)程中,對(duì)于對(duì)象的構(gòu)建和繼承,會(huì)有更深層次的理解。
查看更多JavaScript的語(yǔ)法,大家可以關(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)用場(chǎng)景簡(jiǎn)述
- JavaScript中的prototype使用說(shuō)明
- Javascript之深入淺出prototype
相關(guān)文章
javascript中的throttle和debounce淺析
這篇文章主要介紹了javascript中的throttle和debounce淺析,分別介紹了throttle和debounce的使用場(chǎng)景及具體案例,需要的朋友可以參考下2014-06-06
淺談JavaScript的對(duì)象類(lèi)型之function
這篇文章主要介紹了淺談JavaScript的對(duì)象類(lèi)型之function,函數(shù)(方法)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊,需要的朋友可以參考下2023-05-05
用JavaScript顯示瀏覽器客戶(hù)端信息的超相近教程
這篇文章主要介紹了用JavaScript顯示瀏覽器客戶(hù)端信息的超相近教程,包含了從返回桌面瀏覽器客戶(hù)端內(nèi)核信息到移動(dòng)端瀏覽器以及其使用的系統(tǒng)版本信息等內(nèi)容,傾力推薦!需要的朋友可以參考下2015-06-06
slice函數(shù)的用法 之不錯(cuò)的應(yīng)用
slice函數(shù)的用法 之不錯(cuò)的應(yīng)用...2006-12-12
你需要知道的10個(gè)最佳javascript開(kāi)發(fā)實(shí)踐小結(jié)
Javascript的很多擴(kuò)展的特性是的它變得更加的犀利, 同時(shí)也給予程序員機(jī)會(huì)創(chuàng)建更漂亮并且更讓用戶(hù)喜歡的網(wǎng)站2012-04-04
簡(jiǎn)介JavaScript中setUTCSeconds()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中setUTCSeconds()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹
prototype為對(duì)象添加屬性的的過(guò)程中有些誤區(qū),在本文將為大家詳細(xì)介紹下,感興趣的朋友可不要錯(cuò)過(guò)2013-10-10
js中基礎(chǔ)的數(shù)據(jù)類(lèi)型詳解
這篇文章主要為大家介紹了 javascript中基礎(chǔ)的數(shù)據(jù)類(lèi)型,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01

