在 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"'