箭头函数vs普通函数

Posted 2023-02-09 rainux.

var name = "jackson"
var a =
	name:"rainux",
	getName1:function()
		//1.1此处function这个匿名函数里面的this指向对象a，因为此函数是作为“方法”使用的，所以指向调用的对象
		console.log(this.name) 
		//1.2箭头函数继承所处环境，也就是上面这个箭头函数1.1,也就是this指向对象a
		return ()=>console.log("1.2,"+this.name)
	,
	getName2:()=>
		//2.1箭头函数的this继承它定义的时候所处的环境中的this，此处所处的环境是a对象，但是对象不能形成自己的执行环境，所以还是指向全局window
		//箭头函数继承而来的this指向永远不变！
		console.log(this.name)
		//2.2箭头函数继承所处环境，也就是上面这个箭头函数2.1，所以this也是指向window
		return ()=>console.log("2.2,"+this.name)
	,
    getName3:()=>
        //3.1 指向window，原因见2.1
        console.log(this.name)
        function fn()
			console.log("3.2,"+this.name)
		
        //3.2 不是作为“方法”，而是作为函数调用，指向window；
        return fn
    ,
    getName4:function()
        //4.1 指向a对象，原因见1.1
        console.log(this.name)
        let that = this
        //如果想使用a对象，则可以在此函数外面定义let that = this，在函数fn里面使用that.name
        function fn()
			console.log("4.1.1,"+this.name)
			console.log("4.1.2,"+that.name)
		
		//4.2 不是作为“方法”，而是作为函数调用，指向window；
        return fn
    


a.getName1()//rainux
a.getName1()()//1.2,rainux
a.getName2()//jackson
a.getName2()()//2.2,jackson
a.getName3()//jackson
a.getName3()()//3.1,jackson
a.getName4()//rainux
a.getName4()()//4.1.1,jackson  4.1.2,rainux