Javascript 回调函数中的 this 指向问题

icy2003 程序 2020-06-11 13:27:14 202 0条

Javascript 的 this 默认指向 window,有 3 种方法修改回调函数里的 this 指向

timg (1).jpg

先上例子:

var name = '我是 window';
var obj = {
    name: '我是 obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);  //输出:我是 window
        }, 1000);
    }
}

this 指向的是 window,这和我们的预期不一样,可以通过以下方法将 this 正确指向 obj。

临时变量

在外部函数中将 this 存为一个变量,回调函数中使用该变量,而不是直接使用 this,这是最常见和使用最多的。

var name = '我是 window';
var obj = {
    name: '我是 obj',
    fn: function () {
        var that = this;
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(that.name);  //输出:我是 obj
        }, 1000);
    }
}

bind 方法

使用 bind() 方法。bind() 为 ES5 的标准,低版本IE下有兼容问题,可以引入 es5-shim.js 解决。

bind() 的作用类似 call 和 apply,都是修改 this 指向。但是 call 和 apply 是修改 this 指向后函数会立即执行,而 bind 则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的 this 指向传入的对象。

var name = '我是 window';
var obj = {
    name: '我是 obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);  //输出:我是 window
        }.bind(this), 1000);
    }
}

箭头函数

使用 es6 的箭头函数:箭头函数的最大作用就是 this 指向。

var name = '我是 window';
var obj = {
    name: '我是 obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(() => {
            console.log(this.name);  //输出:我是 window
        }, 1000);
    }
}

箭头函数没有自己的 this,它的 this 继承自外部函数的作用域。所以,在该例中,定时器回调函数中的 this,是继承了 fn 的 this。当然箭头函数也有兼容问题,要是兼容低版本 ie,需要使用 babel 编译,并且引入 es5-shim.js 才可以。

后续

开发过程中肯定不会考虑 ie 这种古董的,直接使用 es6 的语法即可,如果要做兼容,除了可以用 babel 编译,也可以 在线 转换成兼容代码,对于这个箭头函数的例子,转化结果为:

var name = '我是 window';
var obj = {
  name: '我是 obj',
  fn: function fn() {
    var _this = this;

    var timer = null;
    clearInterval(timer);
    timer = setInterval(function () {
      console.log(_this.name); //输出:我是 window
    }, 1000);
  }
};

可以看出这正是第一种临时变量的方法。

上一篇 Yii2 常用别名
下一篇 wget 命令详解
标签: javascript

非特殊说明,本博所有文章均为博主原创。