JavaScript之apply、call详解--前端面试准备

二者详解

apply

• 语法：
  functionObject.apply( [ thisObj [, argsArray ]] )
• 解释：
  apply()函数用于调用当前函数functionObject，并可同时使用指定对象thisObj作为本次函数执行时函数内部的this指针引用。
  该函数属于Function对象，所有主流浏览器均支持该函数。
• 参数描述：

参数	描述
thisObj	可选/Object类型指定执行functionObject函数时，函数内部this指针引用的对象。
argsArray	可选/Array或是argumens对象

• 返回值
  apply()方法的返回值为任意类型，其返回值取决于当前functionObject对象的返回值。

call

• 语法：
  functionObject.call( [ thisObj [, arg1 [, arg2 [, args...]]]] )
  与apply不同之处在于：call是将Function对象的参数一个个分别传入，apply是以一个数组/arguments对象传入。
• 解释：
  call()函数用于调用当前函数functionObject，并可同时使用指定对象thisObj作为本次执行时functionObject函数内部的this指针引用。
  该函数属于Function对象，所有主流浏览器均支持该函数。
• 参数描述：

参数	描述
thisObj	可选/Object类型指定执行functionObject函数时，函数内部this指针引用的对象。
arg1…args	可选/任意类型

• 返回值
  call()方法的返回值为任意类型，其返回值取决于当前functionObject对象的返回值。

示例&说明

//观察apply和call对this的影响
//
//
var name = "yww";
var age = 20;
function test(){
    document.writeln(this);
    document.writeln(this.name);
    document.writeln(this.age);     
};
test();//=>[object Window] yww 20
//var关键字声明的全局作用域变量属于 window 对象
var wkx={
    name:'wkx',
    age:20
};
test.apply(wkx);//=>[object Object] wkx 20
test.call(wkx);//=>[object Object] wkx 20
//可以观察到this改变了，不再是默认的window了。

//观察apply和call传递参数的情况
//
//
function Student(major,grade){
    this.major=major;
    this.grade=grade;
};
    
function wkx(major,grade,habit){
    Student.apply(this,arguments);
    this.habit=habit;
}
    
function yww(major,grade,habit){
    Student.call(this,major,grade);
    this.habit=habit;
}
var xx=new wkx('cs','junior','study');
var yy=new yww('cs','junior','eat&sleep');
document.writeln(xx.major+'\n'+xx.grade+'\n'+xx.habit);
//=>cs junior study
document.writeln(yy.major+'\n'+yy.grade+'\n'+yy.habit);
//=>cs junior eat&sleep
//哇！我一开始也觉得很神奇，明明xx没有major和grade属性呀！怎么可以输出呢
//后来思考了哈，发觉是在使用apply/call的时候，Student函数里的this已经改变啦！已经变成了调用wkx函数的xx了！所以Student函数里的操作相当于就给xx增加了属性major和grade

参考文献1-apply、call、bind
参考文献2-apply
参考文献3-call