资讯专栏INFORMATION COLUMN

箭头函数中this的问题

terasum / 2071人阅读

摘要:有人说,是中最令人厌烦的风格的编程,虽然令人厌烦,但还是要理解且使用它,就像生活一样,总要做一些自己不喜欢或不擅长的事。

有人说,this是javascript OPP中最令人厌烦的风格的编程,
虽然令人厌烦,但还是要理解且使用它,就像生活一样,总要做一些自己不喜欢或不擅长的事。

在箭头函数出现之前,每个新定义的函数都有它自己的this值:
1、在构造函数的情况下,是一个新的对象(实例);
2、如果该函数被称为‘对象方法’,则为该基础对象;
3、如果作为函数调用,则指向全局;

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

而箭头函数不会创建自己的this,它使用封闭执行上下文的this值,因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}

var p = new Person();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93070.html

相关文章

  • 关于ES6箭头函数this问题

    摘要:对象的指向是可变的,但是在箭头函数中,它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中,的指向问题一直是个难点,特别是在对象方法中使用时,必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。 什么是箭头函数 用法 ES6 允许使用箭头(=>)定义函数 测试 var p1 = document.getElementById(test1)...

    LeviDing 评论0 收藏0
  • ES6—箭头函数(5)

    摘要:因为它不产生属于它自己上下文的箭头函数的另一个用处是简化回调函数。箭头函数使用场景箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如用在的回调函数定义中,另外目前等库,都大量使用箭头函数,直接定义的情况已经很少了。 0.为什么会出现箭头函数? 1.传统的javascript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {},这至少...

    yanwei 评论0 收藏0
  • 「前端面试题系列5」ES6 箭头函数用法

    摘要:在这里,如果用箭头函数,可以这样改写箭头函数并没有自己的,所以事件处理函数的调用者并不受影响。比如,在需要动态上下文的场景中,使用箭头函数需要格外地小心,这些场景包括对象的方法原型方法事件的回调构造函数。 showImg(https://segmentfault.com/img/bVboce6?w=1304&h=734); 前言 年味儿渐散,收拾下心情,继续敲代码吧。 对于即将到来金三...

    betacat 评论0 收藏0
  • 箭头函数this指向问题

    摘要:箭头函数中指向等箭头函数箭头函数的,总是指向定义时所在的对象,而不是运行时所在的对象。关键字通常不能在箭头函数中使用除非是嵌套在允许使用的函数内。参考资料的博客可以说很厉害了图解指向什么阮一峰关于箭头函数的讨论 箭头函数中this指向等 箭头函数 javascript this 箭头函数的this,总是指向定义时所在的对象,而不是运行时所在的对象。 箭头函数位于foo函数内部。只有...

    DDreach 评论0 收藏0
  • es6 - 箭头函数

    摘要:也就是说箭头函数的的值不再根据调用时上下文确定,而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结,可以作为参考。 es6 - 箭头函数 哇,箭头函数...,听起来好NB,但是如果你知道它是因为使用了=>这样类似箭头的符号 ,所以才叫箭头函数。 瞬间感觉:呵,这名字起的...。 es6增加了...

    13651657101 评论0 收藏0
  • 箭头函数你想知道都在这里

    摘要:没有箭头函数没有自己的对象,这不一定是件坏事,因为箭头函数可以访问外围函数的对象那如果我们就是要访问箭头函数的参数呢你可以通过命名参数或者参数的形式访问参数不能通过关键字调用函数有两个内部方法和。 1、基本语法回顾 我们先来回顾下箭头函数的基本语法。ES6 增加了箭头函数: var f = v => v; // 等同于 var f = function (v) { return ...

    xiaoqibTn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<