本文實(shí)例講述了JS中call和apply函數(shù)用法。分享給大家供大家參考,具體如下:
call 函數(shù)
語法
obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]);
簡(jiǎn)介
thisObj繼承obj的屬性和方法(obj原型鏈上的屬性和方法不能被繼承),后面的參數(shù)會(huì)當(dāng)成obj的參數(shù)安裝順序傳遞進(jìn)去。
示例
function animal(type,nickname){ this.type = type; this.nickname = nickname; this.sayHello = function(){ return 'hello'; } } function cat(name,type,nickname){ this.name = name; //cat繼承animal animal.call(this,type,nickname); } console.log(new cat('wsscat','cut','tom')); /* cat { name: 'wsscat', type: 'cut', nickname: 'tom', sayHello: [Function] } */
apply 函數(shù)
語法
obj.apply(this[,argArray]);
簡(jiǎn)介
apply和call的作用差不多,都可以用來繼承,區(qū)別在與apply只有兩個(gè)參數(shù),第二個(gè)參數(shù)必須是數(shù)組或者arguments對(duì)象。否則會(huì)報(bào)TypeError錯(cuò)誤。如果繼承的對(duì)象obj有多個(gè)參數(shù),則會(huì)吧argArray的參數(shù)依次對(duì)應(yīng)obj的每個(gè)參數(shù)。
示例
function animal(type,nickname){ this.type = type; this.nickname = nickname; this.syaHello = function(){ return 'hello'; } } function cat(name,type,nickname){ this.name = name; animal.apply(this,arguments); } console.log(new cat('wsscat','cut','tom')); /* cat { name: 'wsscat', type: 'wsscat', nickname: 'cut', syaHello: [Function] } */
總結(jié)
call
和apply
在功能是相同的。
相同點(diǎn)在于都是用于對(duì)象的繼承,第一個(gè)參數(shù)都是thisObj.
不同點(diǎn)在于call可以有多個(gè)參數(shù),從第二個(gè)參數(shù)開始往后的參數(shù)會(huì)依次傳給被繼承的對(duì)象做參數(shù)。apply只有兩個(gè)參數(shù),第二個(gè)參數(shù)必須是數(shù)組類型或者arguments對(duì)象類型,而且他會(huì)把數(shù)組中的元素依次傳遞給被繼承的對(duì)象做參數(shù)。
通過以上幾點(diǎn),我們可以得到如果被繼承的對(duì)象只有一個(gè)參數(shù)的可以使用call,如果被繼承的對(duì)象有多個(gè)參數(shù)的,建議使用apply.
補(bǔ)充
js中可以實(shí)現(xiàn)多繼承,只需要調(diào)用多次call或apply即可。如:
function animal(type,nickname){ this.type = type; this.nickname = nickname; this.syaHello = function(){ return 'hello'; } } function wscat(name,age){ this.name = name; this.age = age; this.sayMe = function(){ return 'my name:' + this.name + ', age:' + this.age; } } function cat(name,age,type,nickname){ //第一種使用call animal.call(this,type,nickname); wscat.call(this,name,age); //第二種使用apply //animal.apply(this,[type,nickname]); //wscat.apply(this,[name,age]); } console.log(new cat('wscat',2,'cat','tom'); /* cat { type: 'cat', nickname: 'tom', syaHello: [Function], name: 'wscat', age: 2, sayMe: [Function] } */
繼承的優(yōu)化
如果構(gòu)造函數(shù)this綁定了太多的屬性(比如一些共用的函數(shù)),示例化后就會(huì)照成浪費(fèi)(因?yàn)閠his里的屬性和方法實(shí)例化后會(huì)復(fù)制一份給新對(duì)象,多個(gè)對(duì)象之間的屬性和方法互不干涉,對(duì)于一些可以共用的方法來就會(huì)造成浪費(fèi))
所以我們一般把共用的函數(shù)都放在原型鏈(prototype
)上。但是使用call和apply無法繼承原型鏈上的屬性和方法。
因此我們可以使用混合的而寫法,使用原型鏈和(apply
或call
)組合的方式進(jìn)行繼承。
讓子的原型鏈指向父的示例(父的實(shí)例化對(duì)象)。如:
cat.prototype = new animal();
讓父的屬性創(chuàng)建在子的this上。如:
animal.call(this[,arg]); //animal.apply(this[,argArray]);
具體代碼如下:
function animal(type,nickname){ this.type = type; this.nickname = nickname; } animal.prototype.sayHello = function(){ return 'hello'; } function wscat(name,age){ this.name = name; this.age = age; } //這里是關(guān)鍵,原型鏈只能單繼承, //不能同時(shí)繼承多個(gè)原型鏈,所以要一級(jí)一級(jí)來。 wscat.prototype = new animal(); wscat.prototype.sayMe = function(){ return 'my name:' + this.name + ', age:' + this.age; } function cat(name,age,type,nickname){ animal.call(this,type,nickname); wscat.call(this,name,age); } cat.prototype = new wscat(); var obj = new cat('wscat',10,'cat','tom'); console.log(obj); //animal { type: 'cat', nickname: 'tom', name: 'wscat', age: 10 } console.log(obj.sayHello());//hello console.log(obj.sayMe()); /* my name:wscat, age:10 */
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com