在 ES5 中,函数内部有两个特殊对象:arguments 和 this。ES6 新增了 new.target 属性。
arguments
一个类数组对象,包含调用函数时传入的所有参数。
只有以 function 关键字定义函数时才会有「换句话说:箭头函数中没有这个对象」
arguments.callee:一个指向 arguments 对象所在函数的指针。通过下面的例子加深了解
例:
// 使用两种不同的方式,最后会输出相同的结果吗?
function factorial(num) {
if (num <= 1){
return 1;
} else {
// ===> 注意这里 方案一:
// return num * factorial(num - 1);
// ===> 注意这里 方案二:
return num * arguments.callee(num - 1);
}
}
let trueFn = factorial;
factorial = function (num){
return 0;
}
console.log(factorial(5)); // 输出 ?
console.log(trueFn(5)); // 输出 ?
注意:函数名就是指向函数的指针,一个函数可以又多个函数名
上面的例子
let trueFn = factorial; 这里把同一个函数的指针又保存到了另一个位置。trueFn 和 factorial 都是指向同一个函数的,只是函数名不同。
方案一:会造成函数逻辑与函数名高度耦合,即对函数的引用和函数名紧密耦合- 重写
factorial函数后,factorial和trueFn都会输出0
- 重写
方案二:会让函数逻辑与函数名解耦, 即对函数的引用和函数名无关,在严格模式下,arguments.callee 会报错- 重写
factorial函数后,factorial会输出0,trueFn会输出正确值120.
- 重写
this
标准函数中,this 指的是方法调用时的上下文对象(网页的全局上下文中,this 指向 window)
箭头函数中,this 指的是**定义箭头函数的上下文**
caller
这个属性引用的是调用当前函数的函数,或者如果是 在全局作用域中调用的则为
null。
举个栗子:
function outer() {
inner();
}
function inner() {
console.log(inner.caller);
// console.log(arguments.callee.caller);// 解耦
}
outer();
ECMAScript 5 也定义了 arguments.caller,但 在严格模式下访问它会报错,在非严格模式下则始终是 undefined
上述代码最后会输出 outer 的源代码,因为 inner 是在 outer 中调用的,所以 inner.caller 指向 outer。
new.target
ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性。如果函数是正常调用的,则 new.target 的值是 undefined ;如果是使用 new 关键字调用的,则 new.target 将引用被调用的 构造函数。
function HelloWorld() {
if (!new.target) {
throw 'not using "new"'
}
console.log('using "new"');
}
new HelloWorld(); // using "new"
HelloWorld(); // Error:not using "new"'