翻譯|使用教程|編輯:李爽夏|2019-01-02 09:49:34.000|閱讀 308 次
概述:本文介紹了如何在javascript構(gòu)造函數(shù)中創(chuàng)建基本繼承 。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
【下載Infragistics Ultimate最新版本】
用javascript創(chuàng)建對象有四種方法。具體如下:
繼承的實(shí)現(xiàn)因?qū)ο髣?chuàng)建方法而異。本文將解釋如何在函數(shù)構(gòu)造函數(shù)之間創(chuàng)建繼承。
假設(shè)您有一個(gè)函數(shù):
function animal(name, age) { this.name = name; this.age = age; }
如果使用new操作符調(diào)用animal函數(shù),將創(chuàng)建一個(gè)對象。這種對象創(chuàng)建方式也稱為“構(gòu)造函數(shù)調(diào)用模式”。
var dog = new animal('foo', 5); console.log(dog); var cat = new animal('koo', 3); console.log(cat);
對象dog和cat都有自己的名稱和年齡屬性。如果希望在所有對象之間共享屬性或方法,請將其添加到函數(shù)原型中。
animal.prototype.canRun = function () { console.log('yes ' + this.name + ' can run !'); }
使用javascript原型鏈,dog和cat對象都可以訪問canrun方法。
var dog = new animal('foo', 5); dog.canRun(); // yes foo can run var cat = new animal('koo', 3); cat.canRun(); // yes koo can run
接下來,讓我們創(chuàng)建另一個(gè)構(gòu)造函數(shù)——人:
function human(name, age, money) { this.name = name ; this.age = age ; this.money = money; } human.prototype.canEarn = function () { console.log('yes ' + this.name + 'can earn'); }
此時(shí),人與動(dòng)物的功能沒有任何關(guān)系。然而,我們知道人也是動(dòng)物。人工構(gòu)造有兩個(gè)問題。
上述兩個(gè)問題可以通過在動(dòng)物和人類功能構(gòu)建者之間創(chuàng)建繼承來消除。
您可以通過如下修改人工函數(shù)來解決代碼復(fù)制的問題1:
function human(name, age, money) { animal.call(this, name, age); this.money = money; }
現(xiàn)在,在人類函數(shù)中,我們使用call方法手動(dòng)傳遞當(dāng)前對象作為動(dòng)物函數(shù)中“this”的值。這種方法也稱為間接調(diào)用模式。現(xiàn)在,可以創(chuàng)建一個(gè)人類對象實(shí)例,如下所示:
var h1 = new human('dj', 30, '2000 $'); console.log(h1);
到目前為止,我們已經(jīng)解決了代碼復(fù)制的第一個(gè)問題,但是人類的功能仍然與動(dòng)物的功能無關(guān)。如果您嘗試對h1對象調(diào)用canrun方法,javascript將向您拋出一個(gè)錯(cuò)誤。
h1.canRun(); // throw error canRun is not a function
您可以通過將人類功能原型與動(dòng)物功能構(gòu)造函數(shù)原型鏈接來解決這個(gè)問題。有兩種方法可以做到這一點(diǎn)。
使用γ原型
使用object.create()方法
您可以使用object.create()鏈接函數(shù)構(gòu)造函數(shù)的原型,如下所示:
human.prototype = Object.create(animal.prototype);
您可以使用_uu proto_uuu鏈接函數(shù)構(gòu)造函數(shù)的原型,如下所示:
human.prototype.__proto__ = animal.prototype;
更推薦object.create()方法,因?yàn)樵谠S多瀏覽器中可能不支持_uuProto。在鏈接原型之后,在一種方式下,您已經(jīng)在動(dòng)物和人類函數(shù)構(gòu)造函數(shù)之間創(chuàng)建了繼承。人的對象實(shí)例可以讀取動(dòng)物功能的所有屬性,并且可以執(zhí)行動(dòng)物功能方法。
下面列出了實(shí)現(xiàn)函數(shù)構(gòu)造函數(shù)之間繼承的完整源代碼,供您參考:
function animal(name, age) { this.name = name; this.age = age; } animal.prototype.canRun = function () { console.log('yes ' + this.name + ' can run !'); } var dog = new animal('foo', 5); dog.canRun(); var cat = new animal('koo', 3); cat.canRun(); function human(name, age, money) { animal.call(this, name, age); this.money = money; } human.prototype = Object.create(animal.prototype); human.prototype.canEarn = function () { console.log('yes ' + this.name + 'can earn'); } // human.prototype.__proto__ = animal.prototype; var h1 = new human('dj', 30, '2000 $'); h1.canRun(); h1.canEarn();
要在函數(shù)構(gòu)造函數(shù)之間創(chuàng)建繼承,請始終執(zhí)行以下兩個(gè)操作:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn