快捷導(dǎo)航

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()的功能及用法。分享給大家供大家參考，具體如下：

１.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);