箭头函数没有自己的 this,arguments,super或new.target?

箭头函数没有自己的 this,arguments,super或new.target?

前言

最近在看es6-promise代码时,发现了一个很有意思的现象(reject(1,2,3)并不对应catch里面方法的参数),为了验证这一问题,我使用了以下代码,结果却发现了一个新的问题:

new Promise((resolve,reject)=>{
    
    
    reject(1,2,3)
}).then((res)=>{
    
    

}).catch((val,val2,val3)=>{
    
    
	// reject(1,2,3)并不对应catch里面方法的参数
  	console.log(val);//1
    console.log(val2);//undefined
    console.log(val3);//undefined
    console.log(arguments);//ReferenceError: arguments is not defined
})

遇到这个报错后,我开始翻阅我以前记录过的JavaScript箭头函数,却发现里面只对this有过描述(箭头行数会将方法体中的this提升到作用域的上一层),并且这个描述我感觉很晦涩难懂。最后我在MDN中箭头函数中找到了答案,并且其中描述的(箭头函数没有自己的this,arguments,super或new.target)个人感觉更容易理解一些。
在第一眼看到MDN中的描述时我很好奇,到底是箭头函数没有自己的(this,arguments,super或new.target),但是可以用外部函数的(this,arguments,super或new.target) 还是箭头函数没有自己的this,(arguments,super或new.target),只能用外部函数的this,却不能在箭头函数中使用arguments,super或new.target

验证

;(function(){
    
    
    ;(()=>{
    
    
        console.log(this);//Window
        console.log(arguments);//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(new.target);//undefined
    })()
})(1,2,3);

///
class Animal{
    
    
    constructor(){
    
    
        console.log('xxxxxxxx');
    }
}
class Person extends Animal{
    
    
    constructor(){
    
    
        ;(()=>{
    
    
            super();//正常
            console.log(this);//Person {}  new出来的对象
            console.log(arguments);//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
            console.log(new.target);//function Person(){ xxxx } 指向此函数的引用
        })()
    }
}
new Person();

结论

经过上面的代码,得出结论:箭头函数没有自己的(this,arguments,super或new.target),但是可以用最近的外部函数的(this,arguments,super或new.target)

猜你喜欢

转载自blog.csdn.net/qq_35508835/article/details/108179667