改变 this 的指向

2018-04-11

1.使用 es6 的箭头函数

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }, 1000);
    }
};
obj.func2();
// Uncaught TypeError: this.func1 is not a function

这时会报错，因为 setTimeout 里函数的 this 指向 Window，而 Window 对象上是没有 func1 这个函数的。下面我们来修改成箭头函数：

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(() => {
            this.func1()
        }, 1000);
    }
};
obj.func2();
// kk

2.在函数内部使用 _this = this

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        let _this = this;
        setTimeout(function () {
            _this.func1()
        }, 1000);
    }
};
obj.func2();
// kk

此时，func2 也能正常运行。在 func2 中，首先设置 var _this = this，这里的 this 是指向 func2 的对象 obj，为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this (指向变量 obj) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 obj 了。

3.使用 call、apply、bind

call：

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.call(obj), 1000);
    }
};
obj.func2();
// kk

apply:

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.apply(obj), 1000);
    }
};
obj.func2();
// kk

bind:

var name = "hh";
var obj = {
    name : "kk",
    func1: function () {
        console.log(this.name)
    },
    func2: function () {
        setTimeout(function () {
            this.func1()
        }.bind(obj)(), 1000);
    }
};
obj.func2();
// kk

4.new 实例化一个对象