您的位置:首页 > 移动开发

为您解惑:JavaScript中的apply()方法和call()方法使用介绍...........

2016-10-31 18:30 537 查看
前言:apply()和call()的真正用处是能够扩充函数赖以运行的作用域。

(1)、每个函数都包含两个非继承而来的方法:apply()和call()。

(2)、他们的用途相同,都是在特定的作用域中调用函数。

(3)、接收参数方面不同:

            apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。

            call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。

1、方法定义:

call方法:

语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

2、常用实例

例1:

<span style="font-size:14px;">function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);   //  运行结果为:alert(4);</span>
释:应该是将add执行的上下文由window切换为sub,即this指向是从window变为sub

注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

例2:

<span style="font-size:14px;">  function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}

function Cat(){
this.name = "Cat";
}

var animal = new Animal();
var cat = new Cat();

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。
animal.showName.call(cat,",")或者animal.showName.call(cat);  //输入结果为"Cat"
//animal.showName.apply(cat,[])或者animal.showName.apply(cat); </span>
释:animal.showName.call(cat,",")这个是说 cat 已经继承了animal的方法了,虽然cat木有showName这个方法,但是通过call,已经把参数都传给了cat,cat直接调用继承到的showName()方法即可。
例3(实现继承):

<span style="font-size:14px;">function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}

function Cat(name){
Animal.call(this, name);
}

var cat = new Cat("Black Cat");
cat.showName();  //   Black Cat</span>

例4(实现多继承)

<span style="font-size:14px;"> function Class10()
{
this.showSub = function(a,b)
{
alert(a-b);
}
}

function Class11()
{
this.showAdd = function(a,b)
{
alert(a+b);
}
}

function Class2()
{
Class10.call(this);
Class11.call(this);
}
var aaa= new Class2();
aaa.showSub(1,2) // -1
</span>释:以上使用两个 call 就实现多重继承了;当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组。
更多实例如下:

例1-1(call的第一个参数为对象)

<pre name="code" class="javascript"><span style="font-size:14px;">window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
  console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); // 等价于HelloName(); 因为其函数都是在全局对象下。
HelloName.call(myObject);

//运行结果为:
Hello diz song glad to meet you!
Hello my Object glad to meet you!</span>

例2-2

<span style="font-size:14px;">function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30 </span>
分析:
在例1-1中,我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域,如果我们想用传统的方法实现,请见下面的代码:

<span style="font-size:14px;">window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!</span>

注:我们发现,要想让HelloName()函数的作用域在对象myObject上,我们需要动态创建myObject的HelloName属性,此属性作为指针指向HelloName()函数,这样,当我们调用myObject.HelloName()时,函数内部的this变量就指向myObjecct,也就可以调用该对象的内部其他公共属性了。
在例2-2中,我们可以看到call()和apply()函数的真正运用之处,在实际项目中,还需要根据实际灵活加以处理!一个小问题:再看一看函数中定义函数时,this变量的情况:

<span style="color:#000000;">function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); </span>
执行结果与下面的相同:
function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj); 注:函数中定义函数时,子函数的this知识window;

PS:大家有什么建议可以留言呦!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  call apply