函数内部--arguments、this、caller、new.target

概述

arguments和this是ES5里面函数内部两个特殊的对象；
caller是函数对象上的一个属性，也是ES5添加的这个属性；
new.target是ES6新增的，用来检测函数是否使用new关键字调用；

arguments

arguments是一个类数组对象，包含调用函数时传入的所有参数，这个对象只有以function关键字定义函数时才会有（因此箭头函数就没有这个对象）。arguments对象有一个属性：callee，这个属性是一个指向arguments对象所在函数的指针。

1
2
3
4
5
6
7
8
9
function factorial(num){
    console.log(arguments)
    if(num <= 1){
        return 1;
    }else{
        return num * arguments.callee(num - 1)//之前arguments.callee是factorial
    }
}

在上面的例子中,arguments.callee就指向factorial这个函数。因此就相当于调用了这个函数。但是这种方式，可以让函数逻辑与函数名解耦，就算函数名称改变了，它依然表示那个函数。

this

this在标准函数和箭头函数中是不一样的。

标准函数中的this

在全局作用域中，this指向的是全局对象;即在全局上下文中调用函数时，this指向全局对象

1
2
3
4
5
6
color = 'red';
function sayColor(){
    console.log(this.color)
}
sayColor() //red

在函数作用域中，this引用的是把函数当成方法调用的上下文对象。即如果这个函数是通过一个对象的属性来调用的话，那么this指向这个对象。要是直接调用这个函数，那么this还是指向全局对象。所以this的指向要等到函数被调用时才能确定。

1
2
3
4
5
6
7
8
9
10
11
color = 'red';
let obj = {
    color:'blue',
    sayColor:function sayColor(){
        console.log(this.color)
    }
}
let a = obj.sayColor;
a() //red
obj.sayColor()//blue

在上面的例子，要是obj.sayColor赋值给一个变量，然后再调用，那么相当于直接调用这个函数，指向全局，要是直接调用obj的sayColor属性，那么就会指向obj.

箭头函数中的this

和标准函数相比，箭头函数的this指向就会好判断一些，标准函数要根据函数什么时候、在哪里调用，箭头函数的this指向不看调用，在哪里定义箭头函数，那么箭头函数的this就指向定义它的上下文。
在事件回调或者定时回调中调用某个函数，可以使用箭头函数，this会保留定义该函数时的上下文。

1
2
3
4
5
6
7
8
9
10
11
function name1(){
    this.name = 'wu'
    setTimeout(() => console.log(this.name),1000)
}
name1() //wu
function name2(){
    this.name = 'wu'
    setTimeout(function(){console.log(this.name)},1000)
}
name2() //undefined

caller

caller引用的是调用当前函数的函数。如果是在全局作用域中调用的则为null。

1
2
3
4
5
6
7
8
function one(){
    two()
}
function two(){
    console.log(two.caller)
}
one()//function one

因为function one里面调用了function two，所以two.caller就指向的是one。

在严格模式下，访问arguments.callee会报错，而且不可以给函数的caller赋值

new.target

new.target是es6新增的，可以检测函数是否使用new关键字调用
如果函数是正常调用，那么new.target的值是undefined;如果是使用new关键字调用的，那么new.target会引用被调用的构造函数。

1
2
3
4
5
6
7
8
9
10
function test(){
    if(!new.target){
        console.log('test没有使用new关键字调用')
    }else{
        console.log('test是使用new关键字调用的')
    }
}
test()//test没有使用new关键字调用
new test()//test是使用new关键字调用的

最后

以上就是健壮花生最近收集整理的关于函数内部--arguments、this、caller、new.target的全部内容，更多相关函数内部--arguments、this、caller、new内容请搜索靠谱客的其他文章。