前端面试之call、apply、caller的作用与区别

前端面试经常会问到一些同类型或者类似作用的方法、参数等等相关的区别,以考察应聘者的知识面。比如今天带来的call、apply、caller的作用与区别。

1、call

call()标准api:

fun.call(thisArg[, arg1[, arg2[, …]]])

call()作用都是改变当前作用域,即改变this的指向,将函数对象从初始的上下文改变为由thisArg指定的新对象

thisArg:可选项,将被当做当前对象。如果没有thisArg,那么global对象将被用作thisArg.

arg1,arg2:可选项,将被传递方法参数序列。

call()应用demo:

<input type="text" id="idTxt" value="input text">
var value = "global var";
function mFunc(){
    this.value = "member var";
}
function gFunc(){
    alert(this.value);
}
window.gFunc();  //=>global var
gFunc.call(window);  //=>global var
gFunc.call(new mFunc()); //=>member var
gFunc.call(document.getElementById('idTxt'));  //=>input text

2、apply

apply()方法的作用与call()作用相同,都是改变当前作用域this指向

apply()标准api:

fun.apply(thisArg, [arg1,arg2,…argN])

从api上可以看出apply()区别于call()是第二个参数,apply()传入的是一个数组。

使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入,arguments是数组。

apply()应用demo:

/*定义一个人类*/
function Person(name,age)
{
    this.name=name;
    this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade)
{
    //让Student()方法拥有(调用)Person()方法的属性
    Person.apply(this,arguments);  //=>等价于this.name = name;this.age = age;
    this.grade=grade;
}
//创建一个学生类
var student=new Student("zhangsan",21,"一年级");
//测试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);

3、caller

caller返回一个对函数的引用,该函数调用了当前函数

对于函数来说,caller 属性只有在函数执行时才有定义。 如果函数是由 Javascript 程序的顶层调用的,那么 caller 包含的就是 null 。

应用demo:

function callerDemo() {
    if (arguments.caller) {
        var a = callerDemo.caller.toString();
        alert(a);
    } else {
        alert("this is a top function");
    }
}
function handleCaller() {
    callerDemo();
}
handleCaller();
function calleeDemo() {
    alert(arguments.callee);
}
calleeDemo();


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/call-apply-caller.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com