欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中call()和apply()的功能及用法實(shí)例分析

 更新時(shí)間:2019年06月28日 09:30:10   作者:Yeoman92  
這篇文章主要介紹了JS中call()和apply()的功能及用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中call()和apply()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS中call()和apply()的功能及用法。分享給大家供大家參考,具體如下:

1.call()和apply()的作用

首先引出問(wèn)題:用call()和apply()的目的是什么?

來(lái)看個(gè)例子,在javascript OOP中,我們經(jīng)常會(huì)這樣定義:

function cat(){
}
cat.prototype={
  food:"fish",
  say: function(){
    alert("I love "+this.food);
  }
}
var blackCat = new cat;
blackCat.say();

但是如果我們有一個(gè)對(duì)象whiteDog = {food:"bone"},我們不想對(duì)它重新定義say方法,那么我們可以通過(guò)call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是為了動(dòng)態(tài)改變this而出現(xiàn)的,當(dāng)一個(gè)object沒(méi)有某個(gè)方法,但是其他的有,我們可以借助call或apply用其它對(duì)象的方法來(lái)操作。

在實(shí)際中用的比較多的是,通過(guò)document.getElementsByTagName選擇的dom 節(jié)點(diǎn)是一種類(lèi)似array的對(duì)象。它不能應(yīng)用Array下的push,pop等方法。我們可以通過(guò):

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

這樣domNodes就可以應(yīng)用Array下的所有方法了。

2.call()和apply()的區(qū)別

首先apply的定義如下:

  • apply方法能劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性
  • Function.apply(obj,args)方法能接收兩個(gè)參數(shù),第一個(gè)參數(shù)是在其中運(yùn)行函數(shù)的作用域,另一個(gè)是參數(shù)數(shù)組。其中,第二個(gè)參數(shù)可以是數(shù)組,也可以是arguments對(duì)象
    • obj:這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象
    • args:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function(args–>arguments)

apply()的用法

//定義一個(gè)人類(lèi)
function Person(name,age){
  this.name = name;
  this.age = age;
}
//定義一個(gè)學(xué)生類(lèi)
function Student(name,age,grade){
  Person.apply(this,arguments);//傳入arguments對(duì)象
  //Person.apply(this,[num1,num2]);//傳入數(shù)組
  this.grade = grade;
}
//創(chuàng)建一個(gè)學(xué)生類(lèi)
var student = new Student('A','10','一年級(jí)');
//測(cè)試
console.log('name:'+student.name+'age:'+student.age+'grade:'+student.grade);

學(xué)生類(lèi)里沒(méi)有給name和age屬性賦值啊,為什么又存在這兩個(gè)屬性的值呢,這個(gè)就是apply的神奇之處。

分析:Person.apply(this,arguments);

  • this:代表的是student,表示將Person中的this指向student。
  • arguments:是一個(gè)數(shù)組,在例子中表示[‘A','10','一年級(jí)'];

通俗一點(diǎn)講就是:用student去執(zhí)行Person這個(gè)類(lèi)里面的內(nèi)容,在Person這個(gè)類(lèi)里面存在this.name等之類(lèi)的語(yǔ)句,這樣就講屬性創(chuàng)建到了student對(duì)象里面.

apply()call()的作用是一樣的,他們的區(qū)別僅在于接收參數(shù)的方式不同,call()需要把參數(shù)一個(gè)個(gè)列出來(lái)。

call()的用法

在Student函數(shù)里面可以將apply中修改成如下:

Person.call(this,name,age);

3.什么情況下用apply(),什么情況下用call()

至于是使用apply()還是call(),取決于采取那種給函數(shù)傳遞參數(shù)的方式最方便。

如果打算直接傳入arguments對(duì)象,或者是數(shù)組,并且參數(shù)列表相同則使用apply();否則,選擇call()可能更合適。

例:apply示例里面?zhèn)鬟f了參數(shù)arguments,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的,也就是Person和Student的參數(shù)列表前兩位是一致的,就可以采用apply。

如果我的Person的參數(shù)列表是這樣的(age,name)而Student的參數(shù)列表是(name,age,grade),這樣的就可以用call來(lái)實(shí)現(xiàn)了Person.call(this,age,name,grade);

關(guān)于apply()的應(yīng)用可以參考://www.dbjr.com.cn/article/164140.htm

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論