• this 的五种绑定方式（默认 / 隐式 / 显式 / new 构造函数 / 箭头函数）

    目录

    1. this 的五种绑定方式

    1.1 默认绑定

    1.1.1 基本概念

    1.1.2 严格模式下的默认绑定

    1.1.3 let、const、var 变量的默认绑定

    1.1.4 函数作用域中的 this 指向

    1.2 隐式绑定

    1.2.1 关于 this 指向最后调用函数的那个对象，该怎么理解？

    1.2.2 隐式绑定中的 this 丢失问题

    1.2.3 使用 另一个变量 给函数取别名，会发生隐式丢失

    1.2.4 将函数作为参数传递时，会发生隐式丢失

    1.3 显示绑定

    1.3.1 call()、apply()、bind() 三者区别

    1.3.2 使用 call() 解决 setTimeout 内 this 丢失的问题

    1.3.3 ☆★☆★ 函数返回的函数被调用，除非被 call 修改 this 指向，否则都是 window 在调用 ☆★☆★

    1.3.4 call() 调用位置不同，导致结果不同

    1.3.5 bind() 调用位置不同，导致结果不同

    1.3.6 在函数内使用 call 显式绑定一个对象，实现函数内部 this 指向 始终指向该对象

    1.3.7 冷门知识：forEach、map、filter 第二个参数可以改变 this 指向

    1.3.8 ☆★☆★ 总结了一下 显式绑定 需要注意的点 ☆★☆★

    1.4 new 构造函数绑定

    1.4.1 基本用法

    1.4.2 字面量形式创建对象 VS new 构造函数创建对象

    1.4.3 new 绑定结合显示绑定

    1.5 箭头函数绑定

    1.5.1 基本用法 —— 通过查找作用域链，确定箭头函数的 this

    1.5.2 字面量对象中，普通函数与箭头函数的区别: 只有一层函数的题目

    1.5.3 字面量对象中，普通函数与箭头函数的区别：函数嵌套（返回函数）的题目

    1.5.4 构造函数对象中，普通函数和箭头函数的区别：只有一层函数的题目

    1.5.5 构造函数对象中，普通函数和箭头函数的区别：函数嵌套（返回函数）的题目

    1.5.6 箭头函数 不能被 显式绑定函数（call、apply、bind）修改 this 指向

    1.5.7 ☆★☆★ 箭头函数必坑指南 / 不能使用箭头函数的场景 ☆★☆★

    2. 参考文章（非常有用👍）

    1. this 的五种绑定方式

    1.1 默认绑定

    1.1.1 基本概念

    非严格模式下，this 指向全局对象（window / self / global）

    严格模式下，函数内的 this 指向 undefined，全局中的 this 指向不会改变

    1.1.2 严格模式下的默认绑定

    举个栗子~

    1. "use strict";
    2.  
    3. // var 定义的变量 a 挂载到 window 对象上
    4. var a = 10;
    5.  
    6. function foo () {
    7.   // 严格模式下，函数内 this 指向 undefind
    8.   console.log('this1 --- ', this) // undefined
    9.  
    10.   // 报错，Uncaught TypeError: Cannot read properties of undefined (reading 'a')
    11.   console.log(this.a) 
    12.  
    13.   console.log(window.a) // 10
    14. }
    15.  
    16. // 严格模式 不会改变全局中 this 的指向
    17. console.log('this2', this) // window
    18.  
    19. foo();

    1.1.3 let、const、var 变量的默认绑定

    let、const 声明的全局变量，不会被绑定到 window 上

    var 声明的全局变量，会被绑定到 window 上

    1. let a = 10
    2. const b = 20
    3.  
    4. function foo () {
    5.   console.log(this.a) // undefined
    6.   console.log(this.b) // undefined
    7. }
    8.  
    9. foo();
    10.  
    11. console.log(window.a) // undefined

    1.1.4 函数作用域中的 this 指向

    关键点：

    • 要判断函数是被谁调用的，进而确定 this 绑定的作用域是哪个
    • 要确定好打印的是 函数内部的变量，还是 this 上的变量（打印 a、打印 this.a 不一样）
    1. // window 中的 a
    2. var a = 1;
    3.  
    4. function foo () {
    5.   // 函数中的 a
    6.   var a = 2
    7.  
    8.   console.log(this) // Window{...}
    9.  
    10.   // 打印的是 this.a，不是 a，因此是 window 下的 a（是 window 调用的 foo 函数）
    11.   console.log(this.a) // 1
    12. }
    13.  
    14. foo()

     再举个例子~

    1. var a = 1
    2.  
    3. function foo () {
    4.  
    5.   var a = 2
    6.  
    7.   function inner () {
    8.     // inner 内没有 a，因此往上面的 foo 的函数作用域找
    9.     // foo 内有 a，但是 foo 是 window 调用的，foo 内的 this 就是 window
    10.     // 打印的是 this a，不是 a，因此要判断正确的 this，也就是 window
    11.     // 最终输出 1
    12.     console.log(this.a)
    13.   }
    14.  
    15.   inner()
    16. }
    17.  
    18. foo()

    1.2 隐式绑定

    当 函数引用 有 上下文对象 时，如 obj.foo() 的调用方式，foo() 内的 this 指向 obj

    也就是说，谁调用函数，函数内的 this 就指向谁（无论是普通对象、还是全局对象），this 永远指向最后调用它的那个对象（不考虑箭头函数）

    1.2.1 关于 this 指向最后调用函数的那个对象，该怎么理解？

    foo() 定义在 window 上，但是是 obj 对象调用了它（也就是给 obj 临时加了个 foo() 方法）

    obj.foo() 相当于 window.obj.foo()，此时的 this 指向 最后调用函数 的对象，也就是 obj（window 不是最后调用函数的对象，obj 才是最后一个）

    1. function foo () {
    2.   console.log(this.a)
    3. }
    4.  
    5. var obj = { a: 1, foo }
    6.  
    7. var a = 2
    8.  
    9. obj.foo() // 1

    1.2.2 隐式绑定中的 this 丢失问题

    隐式丢失：被 隐式绑定 的函数，在特定的情况下，会丢失绑定对象

    容易发生 隐式丢失 的两种情况：

    • 使用另一个变量来给函数取别名
    • 将函数作为参数传递时，会被隐式赋值，回调函数丢失 this 绑定，比如 setTimeout

    1.2.3 使用 另一个变量 给函数取别名，会发生隐式丢失

    关键点：

    • 给函数取别名的时候，无论是使用一个变量（var foo2 = obj.foo），还是使用一个对象（var obj2 = { a: 3, foo2: obj.foo } ），都会导致 this 隐性丢失
    • 如果发生了 this 隐式丢失，则使用上一层 this 替代丢失的 this（可能是 window，可能是 obj）
    1. function foo () {
    2.   console.log(this.a)
    3. };
    4.  
    5. var obj = { a: 1, foo };
    6.  
    7. var a = 2;
    8.  
    9. var foo2 = obj.foo;
    10.  
    11. var obj2 = { a: 3, foo2: obj.foo }
    12.  
    13. // -----------------------------------------------------------------
    14.  
    15. // 此处的 this 指向 obj，被 obj 调用进行了隐式绑定，因此打印 obj 中的 a
    16. // this 指向调用者 obj
    17. obj.foo(); // 1
    18.  
    19. // foo2 指向了 obj.foo 函数
    20. // 由于使用 另一个变量 foo2 给函数取别名，发生了 this 丢失，导致 obj 丢了
    21. // obj 丢了，就找上层 this；是 window 调用了 foo2，除了 obj 外，上层就是 window 了
    22. // 综上：foo2() 发生了隐式丢失，调用者是 window，使得 foo() 中的 this 指向 window
    23. foo2(); // 2
    24.  
    25. // obj2.foo2() 发生了隐式丢失，调用者是 obj2，使得 foo() 中的 this 指向 obj2
    26. obj2.foo2(); // 3

    1.2.4 将函数作为参数传递时，会发生隐式丢失

    如果把 一个函数 当成参数 传递到 另一个函数 中时，会发生 隐式丢失 的问题

    隐式丢失，与包裹着 函数参数 的 外层函数 的 this 指向无关（比如外层函数的 this 指向 obj2对象，但是隐式丢失后，this 和 obj2 不会有关系，只跟 window/undefined 有关系）

    • 在非严格模式下，隐式丢失后，会把函数的 this 绑定到 window 上；
    • 在严格模式下，会把函数的 this 绑定到 undefined 上；
    • 发生隐式丢失后，永远不会把函数的 this 绑定在 其他对象 上；
    1. function foo () {
    2.   console.log(this.a)
    3. }
    4.  
    5. function doFoo (fn) {
    6.   // 因为这里是 window 调用的它，所以 doFoo() 函数内的 this 本来就指向 window
    7.   console.log(this) // Window{...}
    8.  
    9.   // 函数当参数传入，发生了隐式丢失（也就是 obj 没了），因此 foo 指向了 window
    10.   fn() // 2
    11. }
    12.  
    13. var obj = { a: 1, foo }
    14.  
    15. var a = 2
    16.  
    17. var obj2 = { a: 3, doFoo }
    18.  
    19. // 将 obj.foo 当成参数传递到 doFoo 函数中，发生了隐式丢失，因此 foo 指向了 window
    20. doFoo(obj.foo)
    21.  
    22. // doFoo 此时被 obj2 调用，this 指向 obj2
    23. // 但是由于 obj.foo 函数被当作参数传入，导致 this 隐式丢失
    24. // 隐式丢失 与包裹着的函数 this 没有关系，也就是和 obj2 没有关系
    25. // 所以指向 window，打印 window 中的 a，而不是 obj2 中的 a
    26. obj2.doFoo(obj.foo) // 2

    严格模式下：

    1. "use strict"
    2.  
    3. function foo () {
    4.   console.log(this.a)
    5. }
    6.  
    7. function doFoo (fn) {
    8.   // 被 obj2 调用，this 指向 obj2
    9.   console.log(this) // { a:3, doFoo: f }
    10.  
    11.   // 函数当参数，发生 this 隐式丢失，隐式丢失和 函数参数 的 外层函数this 没有关系
    12.   // 因此指向 window，也就是 window.a = 2
    13.   // 又因为 严格模式 函数内的 this 始终为 undefind，因此获取不到 a 变量，报错
    14.   fn() // Uncaught TypeError: Cannot read property 'a' of undefined
    15. }
    16.  
    17. var obj = { a: 1, foo }
    18.  
    19. var a = 2
    20.  
    21. var obj2 = { a: 3, doFoo }
    22.  
    23. obj2.doFoo(obj.foo)

    再来一个，常见的 setTimeout，将函数作为参数

    1. var obj2 = {
    2.   a: 2,
    3.  
    4.   foo1: function () {
    5.     // 普通函数内的 this 指向调用它的对象
    6.     console.log(this.a) // 2
    7.   },
    8.  
    9.   foo2: function () {
    10.     // setTimeout 回调中的 this（对象调用绑定的 this），会丢失，因此指向 window
    11.     setTimeout(function () {
    12.       console.log(this) // window
    13.       console.log(this.a) // 3
    14.     }, 0)
    15.   }
    16. }
    17.  
    18. // 全局变量
    19. var a = 3
    20.  
    21. obj2.foo1()
    22. // 虽然是被 obj2 调用的，但是由于定时器接收函数作为参数，导致 this 丢失
    23. // 因此指向的 obj2 丢失，因此最终指向了 window
    24. obj2.foo2()

    1.3 显示绑定

    通过 call()、apply()、bind() 方法，直接指定 this 的绑定对象，如 foo.call(obj))

    1.3.1 call()、apply()、bind() 三者区别

    • 使用 call()、apply() 的函数，会直接执行
    • bind() 创建了一个新的函数，并返回，需要 手动调用 才会执行
    • call()、apply() 用法类似，区别在于 —— call() 接收若干个参数，而 apply() 接收一个数组
    • 如果 call()、apply()、bind() 接收到的第一个参数为空、null、undefined 的话，则不改变 this

    1. function foo () {
    2.   console.log(this.a)
    3. }
    4.  
    5. var obj = { a: 1 }
    6.  
    7. var a = 2
    8.  
    9. // 默认绑定，因此打印 window 上的 a
    10. foo() // 2
    11.  
    12. // call() 改变 this 指向，并立即执行
    13. foo.call(obj) // 1
    14.  
    15. // apply() 改变 this 指向，并立即执行
    16. foo.apply(obj) // 1
    17.  
    18. // bind() 改变 this 指向，需要手动执行
    19. // 此处使用 bind 创建了一个新的函数，但是没有用变量接收这个新函数，更没有调用
    20. // 此处 没有 调用函数，只是新生成了一个函数
    21. foo.bind(obj) // 不执行
    22.  
    23. // 如果接收到的第一个参数为空、null、undefined 的话，则不改变 this
    24. foo.call() // 2
    25. foo.call(null) // 2
    26. foo.call(undefined) // 2

    1.3.2 使用 call() 解决 setTimeout 内 this 丢失的问题

    注意：

    • 一定要给定时器内部的 参数函数 添加 call() 方法，而不是给 foo2 添加；
    • 如果改变了 foo2 的 this 指向，foo2 函数内部的定时器，接收参数函数，仍然会发生 this 丢失的问题（就是说 obj2.foo2.call(obj1) 这么写不行）；
    • 改变定时器内的参数函数的 this 指向，就可以避免 this 丢失问题
    • 此处也可以使用 bind() 函数改变 this 指向，因为定时器到时间了一定会执行函数，即使 bind 函数需要手动触发；此处由于定时器的原因，就不需要我们手动去触发 bind 函数调用了
    1. var obj1 = {
    2.   a: 1
    3. }
    4.  
    5. var obj2 = {
    6.   a: 2,
    7.  
    8.   foo1: function () {
    9.     console.log(this.a)
    10.   },
    11.  
    12.   foo2: function () {
    13.     setTimeout(function () {
    14.       console.log(this) // { a: 1 }
    15.       console.log(this.a) // 1
    16.     }.call(obj1), 0)
    17.   }
    18. }
    19.  
    20. var a = 3
    21.  
    22. // 此处 this 指向 调用函数的对象，也就是 obj2
    23. obj2.foo1() // 2
    24.  
    25. // 此处函数内有个定时器，定时器的参数是个函数，导致 this 丢失
    26. // 给定时器内的参数函数添加 call 方法，将他绑定到 obj1 上
    27. obj2.foo2()

    1.3.3 ☆★☆★ 函数返回的函数被调用，除非被 call 修改 this 指向，否则都是 window 在调用 ☆★☆★

    匿名函数的 this，永远指向 window

    js 词法作用域和动态作用域 - 沉默的土豆 - 博客园词法作用域，也叫静态作用域，它的作用域是指在词法分析阶段就确定了，不会改变。动态作用域是在运行时根据程序的流程信息来动态确定的，而不是在写代码时进行静态确定的。 js是本身是词法作用域.举个例子: 由https://www.cnblogs.com/tudou1223/p/9864875.html

    1. var obj1 = {
    2.   a: 1
    3. }
    4.  
    5. var obj2 = {
    6.   a: 2,
    7.   foo1: function () {
    8.     console.log(this.a)
    9.   },
    10.   foo2: function () {
    11.     function inner () {
    12.       console.log(this) // window
    13.       console.log(this.a) // 3
    14.     }
    15.     inner()
    16.   }
    17. }
    18.  
    19. var a = 3
    20.  
    21. obj2.foo2()

    虽然是 obj2 调用了 foo2()，但是 foo2 内部的函数，不是 obj2 调用的，而是 window 调用的

    再举个例子~（这个例子很重要）：

    1. function foo () {
    2.   console.log(this.a)
    3.   return function () {
    4.     console.log(this.a)
    5.   }
    6. }
    7. var obj = { a: 1 }
    8. var a = 2
    9.  
    10. // foo.call(obj) 将 this 指向 obj，并自动执行函数，因此打印 1
    11. // foo 函数返回了一个函数，这个匿名函数被调用，foo.call(obj)()【 相当于 foo()() 】
    12. // 此时，新返回的匿名函数，不是被 obj 调用，而是被 window 调用，因此打印 2
    13. foo.call(obj)()

    换汤不换药系列~： 

    1. var obj = {
    2.   a: 'obj',
    3.   foo: function () {
    4.     console.log(this.a)
    5.     return function () {
    6.       console.log(this.a)
    7.     }
    8.   }
    9. }
    10. var a = 'window'
    11. var obj2 = { a: 'obj2' }
    12.  
    13. // obj.foo() 打印 obj.a = obj，返回一个函数
    14. // obj.foo 调用后，返回的函数被调用，且是 window 调用，所以打印 window.a = window
    15. obj.foo()() // obj、window
    16.  
    17. // obj.foo 被改变 this 指向 obj2，并立即执行，打印 obj2.a = obj2
    18. // obj.foo 被 obj2 调用后，返回的函数被调用，且是 window 调用，所以打印 window.a = window
    19. obj.foo.call(obj2)() // obj2 window
    20.  
    21. // obj.foo 先被调用执行，this 指向调用函数的对象，所以打印 obj.a = obj
    22. // obj.foo 执行后返回一个函数，这个函数被 call 绑定到了 obj2 上，并自动执行
    23. // 所以打印 obj2.a = obj2
    24. obj.foo().call(obj2)

    1.3.4 call() 调用位置不同，导致结果不同

    foo.call() 和 foo().call() 的区别：

    • foo.call() —— 是针对于 函数 做处理
    • foo().call() —— 是针对于 函数的返回值 做处理
    1. function foo () {
    2.   console.log(this.a)
    3. }
    4. var obj = { a: 1 }
    5. var a = 2
    6.  
    7. // foo() 会正常打印出 window 下的 a，也就是 2
    8. foo()
    9.  
    10. // foo.call(obj )由于显式绑定了 this，所以会打印出 obj 下的 a，也就是 1
    11. foo.call(obj)
    12.  
    13. // foo().call(obj) 开始会执行 foo() 函数，打印出 2
    14. // 实际上是对 foo() 函数的 返回值 执行.call(obj) 操作
    15. // foo() 函数的返回值是 undefined，因此报错
    16. foo().call(obj)

    如果 函数返回的值 是一个函数呢？如下所示：

    1. function foo () {
    2.   console.log(this.a)
    3.   return function () {
    4.     console.log(this.a)
    5.   }
    6. }
    7. var obj = { a: 1 }
    8. var a = 2
    9.  
    10. // 虽然 foo() 函数返回了一个匿名函数，但是并没有调用它，调用应该写成 foo()()
    11. foo() // 2
    12.  
    13. // 改变了 foo this 指向，直接调用 foo，但是并没有调用 foo 的返回函数
    14. // 所以纸打印了一次 obj 内的 a
    15. foo.call(obj) // 1
    16.  
    17. // 先让 window 调用 foo，此时 this 指向 window，打印 window.a = 2
    18. // 再让 foo() 的返回函数，调用 call 方法，改变 this 指向 obj
    19. // 并且 call 让函数直接调用，因此打印 obj.a = 1
    20. foo().call(obj) // 2，1

    1.3.5 bind() 调用位置不同，导致结果不同

    1. function foo () {
    2.   console.log(this.a)
    3.   return function () {
    4.     console.log(this.a)
    5.   }
    6. }
    7. var obj = { a: 1 }
    8. var a = 2
    9.  
    10. // window 调用，打印 window.a = 2
    11. foo() // 2
    12.  
    13. // 让 foo 通过 bind 指向 obj
    14. // 由于 bind 不会自动执行新生成的函数，因此 foo.bind(obj) 并没有执行 foo
    15. foo.bind(obj) // 不打印
    16.  
    17. // 先执行了 foo，此时打印 window.a = 2
    18. // 使用 bind 改变了 foo 返回函数的 this 指向
    19. // 由于 bind 不会自动执行新生成的函数，因此 并没有让 foo 的返回函数执行，所以不打印
    20. foo().bind(obj) // 2

    1.3.6 在函数内使用 call 显式绑定一个对象，实现函数内部 this 指向 始终指向该对象

    1. function foo1 () {
    2.   console.log(this.a)
    3. }
    4.  
    5. var a = 1
    6.  
    7. var obj = {
    8.   a: 2
    9. }
    10.  
    11. var foo2 = function () {
    12.   // 函数内部显示绑定一个对象
    13.   foo1.call(obj)
    14. }
    15.  
    16. // 使用 window 调用 函数，而函数内部 绑定到了 obj 上，所以打印 obj.a = 2
    17. foo2()
    18.  
    19. // 将 foo2 显式绑定到 window 上
    20. // 而 foo2 内部仍然是 foo1 被指向 obj，所以打印 obj.a = 2
    21. foo2.call(window)

    1.3.7 冷门知识：forEach、map、filter 第二个参数可以改变 this 指向

    这三个 JavaScript 方法，都接受两个参数：

    • 回调函数，内部又接受了当前遍历项、当前遍历索引等
    • 回调函数内的 this 指向对象，默认为 window

    下面的三个方法内，都将 this 指向了 obj，所以打印的也全是 obj.a = obj

    1. function foo (item) {
    2.   console.log(item, this.a)
    3. }
    4.  
    5. var obj = {
    6.   a: 'obj'
    7. }
    8.  
    9. var a = 'window'
    10.  
    11. var arr = [1, 2, 3]
    12.  
    13. // arr.forEach(foo, obj)
    14. // arr.map(foo, obj)
    15.  
    16. arr.filter(function (i) {
    17.   // return 之前所有选项都可以打印出来
    18.   // this.a，this 被第二个参数指定为了 obj 对象
    19.   console.log(i, this.a)
    20.   return i > 2
    21. }, obj)

    1.3.8 ☆★☆★ 总结了一下 显式绑定 需要注意的点 ☆★☆★

    • this 永远指向最后调用它的那个对象
    • 匿名函数的 this 永远指向 window
    • 使用.call() 或者 .apply() 的函数，会直接执行
    • bind() 是创建一个新的函数，需要手动调用，才会执行
    • 如果call()、apply()、bind() 接收到的第一个参数是空、null、undefined，则会忽略这个参数
    • forEach()、map()、filter() 函数的第二个参数，能显式绑定 this

    1.4 new 构造函数绑定

    this 指向新生成的对象

    1.4.1 基本用法

    1. var name = 'aaa';
    2.  
    3. // 构造函数
    4. function Person (name) {
    5.   this.name = name
    6.   this.foo1 = function () {
    7.     console.log(this.name)
    8.   }
    9.   this.foo2 = function () {
    10.     return function () {
    11.       console.log(this.name)
    12.     }
    13.   }
    14. }
    15.  
    16. var person1 = new Person('Test');
    17.  
    18. // 打印的是对象里的值
    19. person1.foo1() // Test
    20.  
    21. // 执行匿名函数，是 window 调用的，因此打印 window 下的 name
    22. person1.foo2()() // aaa

    1.4.2 字面量形式创建对象 VS new 构造函数创建对象

    使用 new 构造函数创建的对象，字面量形式创建的对象，基本没什么大的区别

    如果对象中，存在 函数类型（不是箭头函数）的属性，那么解法都一样

    举个栗子~： 

    1. var name = 'window'
    2. function Person (name) {
    3.   this.name = name
    4.   this.foo = function () {
    5.     console.log(this.name)
    6.     // 匿名函数最终都是被 window 执行的，除非被显示绑定给其他对象
    7.     return function () {
    8.       console.log(this.name)
    9.     }
    10.   }
    11. }
    12. var person2 = {
    13.   name: 'person2',
    14.   foo: function() {
    15.     console.log(this.name)
    16.     // 匿名函数最终都是被 window 执行的，除非被显示绑定给其他对象
    17.     return function () {
    18.       console.log(this.name)
    19.     }
    20.   }
    21. }
    22.   
    23. var person1 = new Person('person1')
    24.  
    25. person1.foo()() // person1 window
    26. person2.foo()() // person2 window

    1.4.3 new 绑定结合显示绑定

    主要容易考的感觉还是在 函数返回函数 的时候，多看几遍揣摩吧

    个人理解：如果函数返回了（匿名）函数，被返回的（匿名）函数若要执行，则一般是 window 执行的，除非被显式绑定给其他对象

    1. var name = 'window'
    2.  
    3. function Person (name) {
    4.   this.name = name
    5.   this.foo = function () {
    6.     console.log(this.name)
    7.     return function () {
    8.       console.log(this.name)
    9.     }
    10.   }
    11. }
    12.  
    13. var person1 = new Person('person1')
    14.  
    15. var person2 = new Person('person2')
    16.  
    17.  
    18. // foo 先被 call 显示绑定给 person2
    19. // call 会自动执行函数，因此打印了 person2.name = person2
    20. // 返回的匿名函数，又被 window 直接执行（因为没被显示绑定给其他对象）
    21. // 因此打印 window.name = window
    22. person1.foo.call(person2)() // person2 window
    23.  
    24. // foo 先执行，直接打印 person1.name = person1
    25. // foo 返回的函数被显示绑定给了 person2，并自动执行
    26. // 因此虽然是匿名函数，但是有了 call 显示绑定，所以打印 person2.name = person2
    27. person1.foo().call(person2) // person1 person2

    1.5 箭头函数绑定

    1.5.1 基本用法 —— 通过查找作用域链，确定箭头函数的 this

    箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值；

    如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this；否则，this 为 undefined

    综上所述，箭头函数内的 this 始终由外层作用域决定；无法被 call 等方式修改；在定义时就已经确定 this 指向了，执行时无法改变 this 指向

    举个栗子~

    1. var obj = {
    2.  name: 'obj',
    3.  
    4.  // 箭头函数
    5.  foo1: () => {
    6.    console.log(this.name) // window
    7.  },
    8.  
    9.  // 普通函数
    10.  foo2: function () {
    11.    console.log(this.name) // obj
    12.    // 箭头函数
    13.    return () => {
    14.      console.log(this.name) // obj
    15.    }
    16.  }
    17. }
    18.  
    19. // 全局变量
    20. var name = 'window'
    21.  
    22. // 对象 obj 不属于作用域（作用域只有全局作用域、函数作用域、块级作用域）
    23. // foo1() 箭头函数的外层作用域是 window，所以会打印出 window
    24. obj.foo1()
    25.  
    26. // 首先会执行 obj.foo2()，这不是箭头函数，所以它里面的 this 指向调用它的 obj 对象
    27. // 返回的匿名函数是一个箭头函数，它的 this 由外层作用域决定，也就是 foo2 的函数作用域
    28. obj.foo2()()

    思路分析：

    • obj.foo1() —— 对象 obj 不属于作用域（作用域只有全局作用域、函数作用域、块级作用域），foo1() 的外层作用域是 window，所以会打印出 window
    • obj.foo2()() —— 首先会执行 obj.foo2()，这不是箭头函数，所以 obj.foo2() 内的 this 是调用它的 obj 对象，因此第二个打印为 obj；obj.foo2() 返回的匿名函数是一个箭头函数，它的 this 由外层作用域（也就是 obj.foo2() 的函数作用域）决定，因此第三个打印也是 obj 

    理解上面的概念很重要呢，涉及到了 80% 的题目~O(∩_∩)O

    1.5.2 字面量对象中，普通函数与箭头函数的区别: 只有一层函数的题目

    不使用箭头函数，this 指向调用函数的对象，也就是 obj1

    使用箭头函数，this 由外层作用域决定，也就是 window 全局作用域（对象不是作用域哈）

    1. var name = 'window'
    2.  
    3. var obj1 = {
    4. 	name: 'obj1',
    5.     // 不使用箭头函数
    6. 	foo: function () {
    7. 		console.log(this.name)
    8. 	}
    9. }
    10.  
    11. var obj2 = {
    12. 	name: 'obj2',
    13.     // 使用箭头函数
    14. 	foo: () => {
    15. 		console.log(this.name)
    16. 	}
    17. }
    18.  
    19. // 不使用箭头函数，this 指向调用函数的对象，也就是 obj1
    20. obj1.foo() // obj1
    21.  
    22. // 使用箭头函数，this 由外层作用域决定，也就是 window 全局作用域（对象不是作用域哈）
    23. obj2.foo() // window

    1.5.3 字面量对象中，普通函数与箭头函数的区别：函数嵌套（返回函数）的题目

    普通函数，谁调用指向谁，指向 obj

    返回的普通函数，谁调用指向谁，匿名函数没有 call 绑定，所以是 window 调用，指向 window

    箭头函数，this 由外层作用域决定，定义的时候就决定了，不是执行的时候决定的

    返回的箭头函数，this 由外层作用域决定，定义的时候就决定了，不是执行的时候决定的

    举个栗子~

    1. var name = 'window'
    2.  
    3. var obj1 = {
    4.   name: 'obj1',
    5.   // 普通函数，返回普通函数
    6.   foo: function () {
    7.     console.log(this.name)
    8.     return function () {
    9.       console.log(this.name)
    10.     }
    11.   }
    12. }
    13.  
    14. var obj2 = {
    15.   name: 'obj2',
    16.   // 普通函数，返回箭头函数
    17.   foo: function () {
    18.     console.log(this.name)
    19.     return () => {
    20.       console.log(this.name)
    21.     }
    22.   }
    23. }
    24. var obj3 = {
    25.   name: 'obj3',
    26.   // 箭头函数，返回普通函数
    27.   foo: () => {
    28.     console.log(this.name)
    29.     return function () {
    30.       console.log(this.name)
    31.     }
    32.   }
    33. }
    34.  
    35. var obj4 = {
    36.   name: 'obj4',
    37.   // 箭头函数，返回箭头函数
    38.   foo: () => {
    39.     console.log(this.name)
    40.     return () => {
    41.       console.log(this.name)
    42.     }
    43.   }
    44. }
    45.  
    46. // 普通函数，谁调用指向谁，指向 obj
    47. // 返回的普通函数，谁调用指向谁，匿名函数没有 call 绑定，所以是 window 调用，指向 window
    48. obj1.foo()() // 'obj1' 'window'
    49.  
    50. // 普通函数，谁调用指向谁，指向 obj2
    51. // 返回的箭头函数，this 由外层作用域决定
    52. // 定义的时候就决定了，不是执行的时候决定的，也就是在 obj2.foo 函数作用域里，指向 obj2
    53. obj2.foo()() // 'obj2' 'obj2'
    54.  
    55. // 箭头函数，this 由外层作用域决定
    56. // 定义的时候就决定了，外层作用域是 window（没有对象作用域），指向 window
    57. // 返回的普通函数，谁调用只想谁，匿名函数没有 call 绑定，所以是 window 调用，指向 window
    58. obj3.foo()() // 'window' 'window'
    59.  
    60. // 箭头函数，this 由外层作用域决定
    61. // 定义的时候就决定了，外层作用域是 window（没有对象作用域），指向 window
    62. // 返回的箭头函数，this 由外层作用域决定
    63. // 外层作用域是函数作用域，外层是箭头函数，外层箭头函数的 this 前面的分析得到了指向 window，因此此处仍然是 window
    64. obj4.foo()() // 'window' 'window'

    1.5.4 构造函数对象中，普通函数和箭头函数的区别：只有一层函数的题目

    new 对象（普通/箭头函数都指向 新生成的对象）：

    • 普通函数调用时，谁调用就指向谁，也就是指向 新生成的对象
    • 箭头函数调用时，this 由外层作用域决定，且指向函数定义时的 this 而非执行时；箭头函数的外层作用域是 Person 构造函数作用域；构造函数在被 new 的时候，this 会指向新生成的对象；所以此时 this 指向 新生成的对象

    字面量对象（普通函数指向 新生成的对象，箭头函数指向 window）：

    • 普通函数调用时，谁调用就指向谁，也就是指向 新生成的对象
    • 箭头函数调用时，this 由外层作用域决定，且指向函数定义时的 this 而非执行时；普通函数的外层作用域是 window（不存在对象作用域），因此指向 window
    1. var name = 'window'
    2.  
    3. function Person (name) {
    4.   this.name = name
    5.   // 普通函数
    6.   this.foo1 = function () {
    7.     console.log(this.name)
    8.   }
    9.   // 箭头函数
    10.   this.foo2 = () => {
    11.     console.log(this.name)
    12.   }
    13. }
    14.  
    15. var person2 = {
    16.   name: 'person2',
    17.   // 箭头函数
    18.   foo2: () => {
    19.     console.log(this.name)
    20.   }
    21. }
    22.  
    23. var person1 = new Person('person1')
    24.  
    25. // new对象
    26. // 普通函数调用时，谁调用就指向谁，因此指向 person1
    27. person1.foo1() // person1
    28.  
    29. // new对象
    30. // 箭头函数调用时，this 由外层作用域决定，且指向函数定义时的 this 而非执行时
    31. // 箭头函数的外层作用域是 Person 构造函数作用域
    32. // 构造函数在被 new 的时候，this 会指向新生成的对象
    33. // 所以此时 this 指向 新生成的对象 person1
    34. person1.foo2() // person1
    35.  
    36. // 字面量对象
    37. // 箭头函数调用时，this 由外层作用域决定，且指向函数定义时的 this 而非执行时
    38. // 箭头函数的外层作用域是 window（不存在对象作用域）
    39. // 所以此时 this 指向 window
    40. person2.foo2() // window

    1.5.5 构造函数对象中，普通函数和箭头函数的区别：函数嵌套（返回函数）的题目

    普通函数，谁调用指向谁

    返回的普通函数，谁调用指向谁，window 调用，指向 window，除非 call 显式绑定给其他对象

    箭头函数，由外层作用域决定 this，外层作用域是构造函数，构造函数在 new 时指向新生成的对象

    返回的箭头函数，由外层作用域决定 this，外层作用域可能是 普通函数作用域、也可能是箭头函数作用域

    1. var name = 'window'
    2.  
    3. function Person (name) {
    4.   this.name = name
    5.  
    6.   this.foo1 = function () {
    7.     console.log(this.name)
    8.     return function () {
    9.       console.log(this.name)
    10.     }
    11.   }
    12.  
    13.   this.foo2 = function () {
    14.     console.log(this.name)
    15.     return () => {
    16.       console.log(this.name)
    17.     }
    18.   }
    19.  
    20.   this.foo3 = () => {
    21.     console.log(this.name)
    22.     return function () {
    23.       console.log(this.name)
    24.     }
    25.   }
    26.  
    27.   this.foo4 = () => {
    28.     console.log(this.name)
    29.     return () => {
    30.       console.log(this.name)
    31.     }
    32.   }
    33. }
    34.  
    35. var person1 = new Person('person1')
    36.  
    37. // 普通函数，谁调用指向谁，person1
    38. // 返回的普通函数，谁调用指向谁，window 调用，指向 window
    39. person1.foo1()() // 'person1' 'window'
    40.  
    41. // 普通函数，谁调用指向谁，person1
    42. // 返回的箭头函数，由外层作用域决定 this
    43. // 外层作用域是 普通函数作用域，普通函数在此处指向了 person1
    44. person1.foo2()() // 'person1' 'person1'
    45.  
    46. // 箭头函数，由外层作用域决定 this
    47. // 外层作用域是构造函数，构造函数在 new 时指向新生成的对象，person1
    48. // 返回的普通函数，谁调用就指向谁，window 调用指向 window
    49. person1.foo3()() // 'person1' 'window'
    50.  
    51. // 箭头函数，由外层作用域决定 this
    52. // 外层作用域是构造函数，构造函数在 new 时指向新生成的对象，person1
    53. // 返回的箭头函数，由外层作用域决定 this
    54. // 外层作用域是 箭头函数作用域，也就是 person1
    55. person1.foo4()() // 'person1' 'person1'

    1.5.6 箭头函数 不能被 显式绑定函数（call、apply、bind）修改 this 指向

    箭头函数的 this 指向，只有外层作用域决定，call() 函数无法修改 箭头函数的 this 指向

    1. var name = 'window'
    2.  
    3. var obj1 = {
    4.   name: 'obj1',
    5.  
    6.   foo1: function () {
    7.     console.log(this.name)
    8.     return () => {
    9.       console.log(this.name)
    10.     }
    11.   },
    12.  
    13.   foo2: () => {
    14.     console.log(this.name)
    15.     return function () {
    16.       console.log(this.name)
    17.     }
    18.   }
    19. }
    20.  
    21. var obj2 = {
    22.   name: 'obj2'
    23. }
    24.  
    25. // 普通函数被显示绑定给 obj2 了，所以打印 obj2
    26. // 返回的箭头函数，this 由外层作用域决定，也就是 foo1 函数作用域，也就是 obj2
    27. obj1.foo1.call(obj2)() // 'obj2' 'obj2'
    28.  
    29. // 普通函数先执行，谁调用指向谁，所以 obj1
    30. // 返回的箭头函数不被 call 影响，始终由外层作用域决定，也就是函数作用域，也就是 obj1
    31. obj1.foo1().call(obj2) // 'obj1' 'obj1'
    32.  
    33. // 箭头函数不被 call 影响，始终由外层作用域决定，也就是 window 作用域
    34. // 返回的普通函数，没被 call 改变 this 指向，因此谁调用指向谁，windwow 调用指向 window
    35. obj1.foo2.call(obj2)() // 'window' 'window'
    36.  
    37. // 箭头函数直接执行，由外层作用域决定，也就是 window 作用域
    38. // 返回的普通函数，被 call 改变了 this 指向，因此指向 obj2
    39. obj1.foo2().call(obj2) // 'window' 'obj2'

    1.5.7 ☆★☆★ 箭头函数必坑指南 / 不能使用箭头函数的场景 ☆★☆★

    必坑指南：

    • 箭头函数的 this 是由外层作用域来决定的，且指向函数定义时的 this 而非执行时
    • 箭头函数的 this 无法通过 bind()、call()、apply() 修改，但是可以通过改变作用域中 this 的指向来间接修改（也就是想办法改变箭头函数外面作用域的 this 指向）
    • 字面量创建的对象，作用域是 window，如果里面有箭头函数属性的话，this 指向的是 window
    • 构造函数创建的对象，作用域是构造函数，且这个构造函数的 this 指向新建的对象，因此构造函数内的箭头函数属性，this 指向新建对象

    不能使用箭头函数的场景：

    • 使用箭头函数定义对象的方法；会导致 this 指向 window，无法获取对象内部属性
    • 定义原型方法；会导致 this 指向 window，无法获取对象内部属性
    • 构造函数使用箭头函数；会直接报错 Uncaught TypeError: Foo is not a constructor
    • 作为事件的回调函数；会导致 this 不再指向绑定事件的元素，而是指向 window

    举个栗子~

    1. /**
    2.  * 使用箭头函数定义对象的方法
    3.  */
    4. let obj = {
    5.     value: 'LinDaiDai',
    6.     // 箭头函数作用域由外层作用域决定，这样会打印 window 下的 value
    7.     getValue: () => console.log(this.value)
    8. }
    9.  
    10. obj.getValue() // undefined
    11.  
    12.  
    13. /**
    14.  * 定义原型方法
    15.  */
    16. function Foo (value) {
    17.     this.value = value
    18. }
    19.  
    20. // 箭头函数作用域由外层作用域决定，这样会打印 window 下的 value
    21. Foo.prototype.getValue = () => console.log(this.value)
    22.  
    23. const foo1 = new Foo(1)
    24. foo1.getValue() // undefined
    25.  
    26.  
    27. /**
    28.  * 构造函数使用箭头函数
    29.  */
    30. const Foo = (value) => {
    31.     this.value = value;
    32. }
    33. const foo1 = new Foo(1)
    34. // 事实上直接就报错了 Uncaught TypeError: Foo is not a constructor
    35. console.log(foo1);
    36.  
    37.  
    38. /**
    39.  * 作为事件的回调函数
    40.  */
    41. const button = document.getElementById('myButton');
    42. button.addEventListener('click', () => {
    43.     // 我们想改的显然是 button 中的文字
    44.     // 但此处 this 由于箭头函数，不再指向 button，而指向 window
    45.     console.log(this === window); // => true
    46.     this.innerHTML = 'Clicked button';
    47. });

    2. 参考文章（非常有用👍）

    下面的文章确实十分……酸爽

     

    每道题都做了，边看边加上自己的理解整理了这篇文章

     

    受益良多，很感谢作者的干货😄🌼

    【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理) - 掘金你盼世界，我盼望你无bug。Hello 大家好！我是霖呆呆！ 😂😂😂 你们一定觉得我是在吹牛...哼...我这是不愿意截屏发出来(否则我还不露馅了)。 哈哈 😄，收... 其实不管你是花了20分钟，30分钟，亦或者是两个小时来阅读它，你愿意把这部分时间完完全全的交给我，…https://juejin.cn/post/6844904083707396109#heading-2

  • 相关阅读:
    uniapp 自定义导航栏
    电源线虚接，导致信号线发烫
    数据治理-GDPR准则
    uboot基础知识一
    融合transformer和对抗学习的多变量时间序列异常检测算法TranAD论文和代码解读...
    C++学习笔记——01
    today‘s task
    java-dubbo接口测试三种方式
    Maven配置MAVEN_OPTS
    C++ Reference: Standard C++ Library reference: C Library: cwchar: wmemcmp
  • 原文地址：https://blog.csdn.net/Lyrelion/article/details/119958432