5分钟入门箭头函数(三个例子了解this指向)

箭头函数

基本语法:

参数=>函数体   ()=>
在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 //函数体大括号可以省略
在箭头函数中 如果形参 //只有一个 形参外侧的小括号也是可以省略的
let f = v => v;
// 等价于  (普通函数) 
let f = function(a) {
	return a;
}

有多个参数

var f = (a,b) => a+b;
f(6,2);  //8

有关于this

箭头函数不会创建自己的 this，如果存在外层第一个普通函数，在定义的时候会继承它的this

例子1 :

	    let func = () => {
			// 箭头函数里面没有 this 对象，
			// 此时的 this 是外层的 this 对象，即 Window 
			console.log(this)
		}
		func(55)  // Window 

例子2 :

 var id = 'fun1';
    var obj = {
        id: 'fun2',
        a: function () {
            console.log(this.id)
        },//方法a普通函数定义
        b: () => {
            console.log(this.id)
        }//方法b用箭头函数定义
    };
    obj.a();//fun2
    obj.b();//fun1
// 解析：普通函数作为对象的方法调用，this指向所属的对象（谁调用它就指向谁），this.id 就是obj.id；
// 箭头函数继承定义它的执行环境的this，指向window对象，
// 指向全局变量，输出Global。花括号{}无法形成一个单独的执行环境，所有它依然在全局中。

例子3 重点: 回调函数

        // 例子 3.1
		let one = 30
        //对象
        let obj = {
            one: 12,
            two: function() {
                console.log(this)  // obj
                console.log(this.one); // 12
            },
            three: ()=>{
                console.log(this)  // window
                console.log(this.one) // undefined  
                // 
            }
        }
        // 调用函数
        obj.two()
        obj.three()  
		// 例子 3.2
		var id = 1
        let obj1 = {
            id: 120,
            fun1: function() {
                console.log(this) // obj1
                setInterval(function() {
                    console.log(this) // window
                    console.log(this.id) //1
                }, 3000);
            },
            fun2: function() {
                console.log(this) //obj1
                setInterval(()=>{
                    console.log(this)  // obj1
                    console.log(this.id) // 120
                },  3000);
            }
        }
        obj1.fun1() 
        obj1.fun2()

解释

// 可能有一些同学会问 为什么例子 3.1 中打印不出 this.one
因为此时this 指向的是 window 而 let 定义的变量不会变量提升 
// 注意 var 定义的会变量提升并且会可以挂在 window 中 但是 let 定义的不会
所以, 在3.1例子中, 由于one 用let 进行定义, window中没有one 变量 => 打印不了

下面我们重点讲讲例子3.2
普通函数的setTimeout 一秒后执行是在全局作用域，所有this指向window对象，this.id指向了全局变量id
箭头函数的this在定义的时候就确定了，继承fn2的执行环境中的this，fun2的this绑定了obj这个对象