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指向數組本身