JavaScript 箭头函数

1.箭头函数的写法

//传统函数
function sum(n1,n2){
    return n1+n2;
}
console.log(sum(1,2)); //3

//箭头函数单语句
var sum2 = (n1,n2)=> n1 + n2;
console.log(sum2(1,2)); //3

//箭头函数多语句
var Max = (n1,n2)=> {
    if(n1>n2){
        return n1;
    }else{
        return n2;
    }
}
console.log(Max(1,2)); //2

2.箭头函数this指向

• 箭头函数this指向它定义是所处的环境（即往上找上一个函数定义的this，如果往上找没有函数了，就指向window）

// ES6对象中的this
var obj = {
    name: "张三",
    sayHello: () = >{
        console.log("hello");
        console.log(this);
    }
}
obj.sayHello(); // this指向window

// ES6嵌套对象中的this
var obj = {
    name: "张三",
    func: {
        sayHello: () =>{
            console.log("hello");
            console.log(this);
        }
    }
}
obj.func.sayHello(); // 指向window

// 引用调用
var obj = {
    name: "baidu",
    fn: () = >{
        console.log(this)
    }
}
var test = obj.fn;
test();  // 指向window
let test2 = obj.fn;
test2();  // 指向window

var obj2 = {};
obj2.test = obj.fn;
obj2.test();  // 指向window

// 事件处理函数调用
var li = document.getElementsByTagName('li');
li[0].onclick = () = >{
    console.log(this);  // window
    setTimeout(() = >{
        console.log(this);   // window
    },
    3000)
}

实例

var li = document.getElementsByTagName('li');
li[0].onclick = function() {
    var x = 11;
    var obj = {
        x: 22,
        methods: {
            x: 33,
            say: function() {
                console.log(this.x)
            },
            say2: () = >{
                console.log(this)
            }
        }
    }

    obj.methods.say();  // 33
    obj.methods.say2();  // li标签
}

个人总结，箭头函数的this指向它所定义的环境，通俗的说就是 它上一层代码的this，一般this存在于函数中，箭头函数的this就等于邻近外层函数的this，否则this指向window

3.传统函数的this指向

传统函数谁调用它就指向谁

PS：数组中的函数：
结论：数组元素的函数调用this指向数组本身
推理：数组其实也是一种特殊的对象，他的下标可以看成对象的key。对象可以使用obj.fn调用自己属性中的函数，此时this指向obj。而数组使用arr[0]可以看成是arr.0调用了第0个数组元素

//非严格模式下
function foo(){
    console.log(this); 
}
foo(); //全局环境下直接调用，相当于window.foo();，所以这里输出window

//严格模式下
function foo2(){
    "use strict"; // 这里是严格模式
    console.log(this); 
}
foo2(); // this = undefined
window.foo2(); // this = window

// 对象中的this指向
var obj = {
    name: "张三",
    sayHello: function() {
        console.log("hello");
        console.log(this);
    }
}
obj.sayHello();  //this指向obj

// 多层嵌套的对象，内部方法的this指向离被调用函数最近的对象
// 本质上还是谁调用它this就指向谁
var obj = {
    name: "张三",
    func: {
        sayHello: function() {
            console.log("hello");
            console.log(this);
        }
    }
}
obj.func.sayHello();  // this指向obj.func

// 引用调用
// 定义在最顶层的函数直接调用，this一律指向window
var obj = {
    name: "baidu",
    fn: function() {
        console.log(this)
    }
}
var test = obj.fn;
test(); // window
let test2 = obj.fn;
test2();  // window

var obj2 = {};
obj2.test = obj.fn;
obj2.test();  //obj2

// 事件处理函数调用
function show(){
    console.log(this);
}
var lis = document.getElementsByTagName('li');
lis[0].onclick = function() {
    console.log(this); // li标签元素
    setTimeout(function() {
        console.log("定时器的this=", this);// window 定时器里面的函数是匿名函数，指向window
    },
    3000)
};
li[1].onclick = show; // li标签元素

// 内联事件处理函数调用

<li onclick="console.log(this)">11111</li>
//指向li标签

<li onclick="show()">22222</li>

function show(){
    console.log(this);
}
// 指向window

//数组中函数的调用
var arr = [1,2,function(){console.log(this)}]
arr[2]()// [1, 2, ƒ]this指向数组本身

总结：

(1)某个元素的事件触发时，会调用事件处理函数，此时事件是被该元素调用的，this指向该元素。
(2).没有任何元素调用的函数（例如匿名函数），是由window调用的，this指向window。
(3)数组中函数的调用 this指向数组本身