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

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

发布了7 篇原创文章 · 获赞 0 · 访问量 100

猜你喜欢

转载自blog.csdn.net/weixin_42711551/article/details/105127254