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