技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

实例详解JS箭头函数=>与传统匿名函数处理this的不同方法

作者:admin    时间:2022-5-9 8:53:8    浏览:

箭头函数表达式是使用“胖箭头”(=>)语法编写的匿名函数表达式。与传统函数不同,箭头函数在它们的工作方式上有一些重要的区别,还有一些语法增强。最大的功能差异是箭头函数没有自己的this绑定或原型,不能用作构造函数。箭头函数也可以写成比传统函数更紧凑的替代方案,因为它们可以省略参数周围的括号,并添加带有隐式返回的简洁函数体的概念。在本文中,将演示传统函数和箭头函数如何处理this,分析它们的不同之处。

 实例详解JS箭头函数=>与传统匿名函数处理this的不同方法

箭头函数没有this值

在 JavaScript 中,关键字this通常被认为是一个棘手的话题。文章详解JS里this的上下文对象及用法解释了this如何工作,以及this如何根据程序是否在全局上下文中使用它、作为对象中的方法、作为函数或类的构造函数来隐式指示,或作为DOM事件处理程序。

箭头函数有this语法,这意味着this的值由周围的范围(词法环境)决定。

下面一个示例将演示传统函数和箭头函数如何处理this.。

在以下printNumbers对象中,有两个属性:phrasenumbers。对象上还有一个方法loop,它应该打印phrase字符串和当前值numbers

const printNumbers = {
  phrase: '当前值是:',
  numbers: [1, 2, 3, 4],

  loop() {
    this.numbers.forEach(function (number) {
      console.log(this.phrase, number)
    })
  },
}

人们可能期望该loop函数在每次迭代时在循环中打印字符串和当前数字。但是,在运行函数的结果中,phrase实际上是undefined

printNumbers.loop()

这将输出以下内容:

undefined 1
undefined 2
undefined 3
undefined 4

如上所示,this.phrase是未定义的,表面匿名函数中的this传入forEach方法没有引用printNumbers对象。这是因为传统的函数this不会从环境的范围来确定它的值,也就是printNumbers对象。

在旧版本的 JavaScript 中,不得不使用bind显式设置this

使用bind改正上面的函数:

const printNumbers = {
  phrase: '当前值是:',
  numbers: [1, 2, 3, 4],

  loop() {
    // 从printNumbers绑定`this`到内部forEach函数
    this.numbers.forEach(
      function (number) {
        console.log(this.phrase, number)
      }.bind(this),
    )
  },
}

printNumbers.loop()

这将输出预期的结果:

当前值是: 1
当前值是: 2
当前值是: 3
当前值是: 4

箭头函数可以提供更直接的处理方式。由于它们的this值是根据词法范围确定的,因此内部函数forEach可以访问外部printNumbers对象的属性,如下所示:

const printNumbers = {
  phrase: '当前值是:',
  numbers: [1, 2, 3, 4],

  loop() {
    this.numbers.forEach((number) => {
      console.log(this.phrase, number)
    })
  },
}

printNumbers.loop()

这将输出预期的结果:

当前值是: 1
当前值是: 2
当前值是: 3
当前值是: 4

这些示例表明,在forEachmapfilterreduce等内置数组方法中使用箭头函数可以更直观、更易于阅读,从而使该策略更有可能满足预期。

传统函数和箭头函数处理this值的不同方法

传统匿名函数不能直接使用this值

在 JavaScript 中,一个新函数定义了它自己的this值。但是,该this值并不能直接在匿名函数内部使用。请参见以下示例:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(function () {
            console.log(this.speed); 
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50);

输出:

undefined

setTimeout()函数的匿名函数内部,this.speedundefined,原因是匿名函数的this隐藏了speedUp()方法。

要解决此问题,请将this值分配给不会在匿名函数内隐藏的变量,如下所示:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        let self = this;
        setTimeout(function () {
            console.log(self.speed);
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50);

输出:

50

箭头函数能获取封闭上下文的this值

与匿名函数不同,箭头函数会捕获封闭上下文的this值,而不用创建自己的this上下文。以下代码应按预期工作:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(
            () => console.log(this.speed),
            1000);

    };
}

let car = new Car();
car.speedUp(50);

输出:

50

总结

箭头函数在许多方面与传统函数不同,包括确定其作用域的方式和表达语法的方式。本文详细介绍了JS箭头函数=>与传统匿名函数处理this的不同方法,希望看了本文的你,对箭头函数和传统函数会有进一步的认识。

参考文章

标签: 箭头函数  this  
x
x
  • 站长推荐