JavaScript学习——this

在JavaScript中，this的值取决于函数调用时的上下文。

• 全局上下文

  • 行为描述：在任何函数之外执行
  • 作用：引用全局对象

  • 不同环境下区别：

    • web浏览器：全局对象为window，引用window对象
    • Node.js环境：全局对象为global，引用global对象

• 函数上下文：

  • 行为描述：在普通函数内部执行，值会取决于函数调用方式

  • 不同调用方式区别：

    • 函数在全局上下文中调用：

      • 严格模式：this的值为undefined
      • 非严格模式：this的值为全局对象

    • 函数是对象中的方法：

      • 执行上下文：

        • 描述：函数被调用的方式和位置
        • this的值不绑定函数本身而是该函数被调用的对象。

      • 外部词法上下文：

        • 描述：函数外部
        • 箭头函数不具有自己的this，从创建时的父作用域继承this

• 事件处理程序的上下文：

  • 行为描述：事件处理程序中的this
  • 作用：this引用附加了事件监听器的元素，等同event.currentTarget

  • 区别：

    • event.target：引发事件的实际DOM元素。对于冒泡事件，该元素是实际被点击的最内层元素是会冒泡到外部的元素。
    • event.currentTarget：表层触发事件的元素

• 构造函数上下文：

  • 行为描述：构造函数内部的this元素

  • 作用：引用新创建的对象，差不都就跟其他基于类的语言中的this含意一样了

    • 引入new关键字知识：

      • 使用new时，js的操作：

        1. 创建一个空对象，就只是一个什么都没有的空对象
        2. 使用构造函数内部的this去引用这个新对象，新对象与构造函数内的this关联起来
        3. 正常执行构造函数内容
        4. 如果构造函数没返回自己的对象就返回新对象。如果构造函数返回一个对象，就不返回新对象。如果返回其他任何内容就返回新对象。

• 类上下文：

  • 行为描述：在类中的方法内调用this
  • 作用：跟基于类的语言中this含意一致

• 显示/隐式绑定

  • 行为描述：字面意思
  • 作用：用来明确设置this的上下文

  • call方法：

    • 描述：通过.call()调用，第一个参数成为调用该方法的函数的内部this值，后续的参数会作为函数的参数传递进去

    • 常见用途：

      • 调用不属于当前对象的函数: 例如，借用其他对象的方法。
      • 类数组对象（Array-like objects）上使用数组方法: 例如，arguments 对象或 NodeList。

  • apply()方法：

    • 描述：调用具有给定this值的函数，以及一个数组（类数组）提供参数
    • 语法：function.apply(thisArg, [argsArray])第一个参数是指定给调用该方法的函数的this值，第二个是传给函数的参数。
    • 与call()区别：Apply 接受 Array (或 Arguments 对象)。

  • bind方法：

    • 描述：js中内置的方法，允许我们设置方法中的this值。该方法创建新函数并将其this设置为提供的值，以及在调用新函数时提供一系列参数。
    • 特点：创建了一个永久绑定的this值，无论任何调用该函数都不会更改this值
    • 用途：在设置事件处理程序时，希望 this 值始终引用特定对象，或者在使用调用回调函数的库或框架时，希望在回调中控制 this 引用的对象。