js中的this

js中的this容易产生误用，举例说明使用：

一 常规用法：

var person = {
    name: 'tim',
    love: function () {
        console.log(this.name + ' like playing basketball');
    }
}
person.love();

打印：

tim like playing basketball

二 错误用法：

var person1 = {
    name: 'tim',
    love: function () {
        var sports = function () {
            console.log(this.name + ' like playing basketball');
        }
        sports();
    }
}
person1.love();

打印：

undefined like playing basketball

这种情况下的this拿到的不是person1对象，而是整个全局对象，在网页中此时的this就指window对象。

三 解决方案A：

var person2 = {
    name: 'tim',
    love: function () {
        var self = this;
        var sports = function () {
            console.log(self.name + ' like playing basketball');
        }
        sports();
    }
}
person2.love();

打印：

tim like playing basketball

使用属性self接收this的方式来解决this的指向问题。

四 解决方案B：

var person3 = {
    name: 'tim',
    love: function () {
        var self = this;
        var sports = () => {
            console.log(this.name + ' like playing basketball');
        };
    sports();
    }
}
person3.love();

打印：

tim like playing basketball

使用箭头函数的方式来解决this的指向问题。箭头函数没有自己的this值，箭头函数中所使用的this来自函数作用域链，在函数作用域链中一层一层往上找。