V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
MaoRong
V2EX  ›  JavaScript

js this 绑定和箭头函数定义

  •  
  •   MaoRong · 2021-08-11 17:29:37 +08:00 · 1509 次点击
    这是一个创建于 1204 天前的主题,其中的信息可能已经有所发展或是发生改变。

    箭头函数

    定义:箭头函数相当于匿名函数,并且简化了函数定义

    如:x => x * x

    1.箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的 this 是词法作用域,由上下文确定。

    2.箭头函数的 this 指向取决于外层作用域中的 this,外层作用域或函数的 this 指向谁,箭头函数中的 this 便指向谁

    来源:https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

    this 绑定

    1.this 默认绑定:我们可以理解为函数调用时无任何调用前缀的情景,默认绑定时 this 指向全局对象(非严格模式)

    2.隐式绑定:如果函数调用时,前面存在调用它的对象,那么 this 就会隐式绑定到这个对象上,如果函数调用前存在多个对象,this 指向距离调用自己最近的对象

    3.显示绑定:通过 call 、apply 以及 bind 方法改变 this 的行为,相比隐式绑定,我们能清楚的感知 this 指向变化过程,如果在使用 call 之类的方法改变 this 指向时,指向参数提供的是 null 或者 undefined,那么 this 将指向全局对象

    4.new 绑定:抽象理解为新对象就是 this

    5.this 绑定优先级:显式绑定 > 隐式绑定 > 默认绑定,new 绑定 > 隐式绑定 > 默认绑定 ,不存在同时显示和 new 绑定同时生效的场景

    来源:https://www.cnblogs.com/echolun/p/11962610.html

    2 条回复    2021-08-16 14:53:12 +08:00
    libook
        1
    libook  
       2021-08-12 11:03:53 +08:00
    学习笔记嘛

    “箭头函数相当于匿名函数”这个可能还需要深究一下。实际上箭头函数跟匿名函数没有直接联系,匿名函数只是函数无法被使用名称调用到的抽象概念,对于 JS 本身来说,并没有一个特别的概念叫“匿名函数”。

    JS 是万物皆对象的设计理念,但并没有其他面向对象语言那么复杂的语法和特性,在相当长的时间里,JS 都是使用“原型”特性来实现对象特性的。所以 JS 的函数其实并不是纯粹的函数,而是兼任了类型的构造函数、方法的职责,被塞入了 this 等机制。
    后来人们发现:
    1. 经常需要在对象方法内部使用函数来减少代码的冗余,此时往往希望调用方法的 this 而不是函数自己的 this,那么函数的 this 就显得碍手了,你会经常见到在函数执行前有类似 that=this 这种写法,以确保在函数中使用 that 来调用到方法的 this 。
    2. 对于大多函数式的程序设计来说,JS 函数的 function 关键字有些长(不像其他语言有 fn 或 func 这种简单写法),另外函数所集成的 this 等特性完全用不到。
    3. 很多语言都有不可实例化的语法制约方案,使得一个预期不能被实例化的结构不接受被实例化,以避免一些 bug,JS 的函数因为同时也可以被用作构造函数,没有这种限制,使得一些 bug 不容易被发现。

    箭头函数就是来解决上述问题的。
    所以“箭头函数的 this 指向取决于外层作用域中的 this”这个也并不严谨,在我看来:
    一方面箭头函数对待 this 的方式取决于它的“块结构( block )”,块结构存在于很多语法中,比如 if 、for 、while 、switch 、不用做方法的 funciton 、JSON 对象,或者纯粹为了隔离作用域而特意写的{},你可以理解为凡是两个大括号括起来的都是块结构(有例外的话请补充),可以理解箭头函数对待 this 跟 if 块内对待 this 是没有区别的;
    另一方面箭头函数对待 this 跟对待任何一个名称是一样的,比如箭头函数外界有个变量 a,那么你就可以在箭头函数内访问这个变量 a,外界有个 this,自然也就能在箭头函数内调用到这个“this”,对于箭头函数本身是和变量 a 一样的存在。

    想要理解 this 的特性,建议了解一下原型和原型链的特性,几乎是 JS 里面半数特性的根基。
    MaoRong
        2
    MaoRong  
    OP
       2021-08-16 14:53:12 +08:00
    @libook 多谢,学习了!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1027 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:17 · PVG 06:17 · LAX 14:17 · JFK 17:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.