JS函數中this指向問題

函數this的指向不是由函數定義時確定，而是在調用時才確定

    function test() {
        console.log(this);
    }
    test(); //window  '嚴格模式下為undefined'
    
    var obj = {
        id: 1,
        test: function () {
            console.log(this);
        }
    };
    obj.test(); //obj
    
    var fn = function () {
        console.log(this);
    };
    fn(); //window '嚴格模式下為undefined'

1、定時器內部this指向window,事件處理函數的this指向發生事件的元素event.currentTarget

var liArr = document.getElementsByTagName('li');
    for(var i=0; i<liArr.length; i++) {
        liArr[i].onclick = function () {
            console.log(this); // <li>i行</li> 指向事件發生的目標元素
            var that = this; //傳統函數 將對應的目標元素存起來以便定時器內使用
            setTimeout(function () {
                console.log(this); //window 
                console.log(that); //<li>i行</li> 指向事件發生的目標元素
            },1000)
        }
    }

2、 ES6標准箭頭函數的this指向父執行上下文

var liArr = document.getElementsByTagName('li');
    for(var i=0; i<liArr.length; i++) {
        liArr[i].onclick = function () {
            console.log(this); // <li>i行</li> 指向事件發生的目標元素
            setTimeout(() => {
                console.log(this); //<li>i行</li> 指向事件發生的目標元素
            },1000)
        }
    }

箭頭函數內部沒有自身的this,所以繼承定義時外部的this,外部的this取決於執行時的指向，利用箭頭函數，定時器可以直接內部使用this獲取需要的this

3、 綁定this指向的三種方式apply,call,bind

apply

func.apply(obj,[參數數組])； // 將func的this綁定到obj上，使obj也有func方法，並傳入參數列表執行 會立即執行

call

func.call(obj,參數1,參數2,...,參數n)； // 將func的this綁定到obj上，使obj也有func方法，並傳入參數執行 會立即執行

bind

var func1 = func.bind(obj) 將func的this指向給obj,並返回該函數
func1(參數1,參數2,...,參數n);

function func(a,b,c) {
        var sum = a+b+c;
        console.log(this);
    }

    var obj = {
        id: 1
    };
    // apply
    func.apply(obj,[1,2,3]); //obj
    //call
    func.call(obj,1,2,3); //obj
    //bind
    var func1 = func.bind(obj);
    func1(1,2,3); //obj