// 定义函数
    function foo(name) {
      console.log("foo函数:", this)
    }

    // 1.方式一: 直接调用
    // foo()

    // 2.方式二: 通过对象调起
    var obj = { name: "why" }
    obj.aaa = foo
    
    obj.aaa()

<aside> 💡 启示:

  1. 函数在调用时,JavaScript会默认给this绑定一个值;
  2. this的绑定和定义的位置(编写的位置)没有关系;
  3. this的绑定和调用方式以及调用的位置有关系;
  4. this是在运行时被绑定的; </aside>

规则一:默认绑定

Untitled

<aside> 💡 什么情况下使用默认绑定呢?独立函数调用。

独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用

</aside>

<aside> ⚠️ 严格模式下( use strict ),独立调用的函数中的 this 指向的是 undefined

</aside>

规则二:隐式绑定

Untitled

<aside> 💡 另外一种比较常见的调用方式是通过某个对象进行调用的:

也就是它的调用位置中,是通过某个对象发起的函数调用。

</aside>

<aside> 💡 隐式绑定有一个前提条件:

  1. 必须在调用的对象内部有一个对函数的引用(比如一个属性)
  2. 如果没有这样的引用,在进行调用时,会报找不到该函数的错误
  3. 正是通过这个引用,间接的将 this 绑定到了这个对象上; </aside>

规则三:显式绑定

// 显式绑定
    var obj = {
      name: "why"
    }

    function foo() {
      console.log("foo函数:", this)
    }

    // 执行函数, 并且函数中的this指向obj对象
    // obj.foo = foo
    // obj.foo()

    // 执行函数, 并且强制this就是obj对象
    foo.call(obj)
    foo.call(123)
    foo.call("abc")

<aside> 💡 使用 callapply 函数进行显式绑定(两个函数的区别在于实参的格式不一样):

// call/apply
    function foo(name, age, height) {
      console.log("foo函数被调用:", this)
      console.log("打印参数:", name, age, height)
    }

    // ()调用
    // foo("why", 18, 1.88)

    // apply
    // 第一个参数: 绑定this
    // 第二个参数: 传入额外的实参, 以数组的形式
    // foo.apply("apply", ["kobe", 30, 1.98])

    // call
    // 第一个参数: 绑定this
    // 参数列表: 后续的参数以多参数的形式传递, 会作为实参
    foo.call("call", "james", 25, 2.05)

</aside>

new 绑定

Untitled

<aside> 💡 JavaScript 中的函数可以当做一个类的构造函数来使用,也就是使用 new 关键字

</aside>

额外函数补充:bind()

function foo(name, age, height, address) {
      console.log("foo:", this)
      console.log("参数:", name, age, height, address)
    }

    var obj = { name: "why" }

    // 需求: 调用foo时, 总是绑定到obj对象身上(不希望obj对象身上有函数)
    // 1.bind函数的基本使用
    // var bar = foo.bind(obj)
    // bar() // this -> obj

    // 2.bind函数的其他参数(了解)
    var bar = foo.bind(obj, "kobe", 18, 1.88)
    bar("james")

如果我们希望一个函数总是显式地绑定到一个对象上,可以使用 bind() 方法。使用 bind() 方法可以创建一个新的绑定函数,在 bind() 被调用时,这个新的 this 被指定为 bind() 的第一个参数,而其余参数作为新函数的参数,供调用时使用

内置函数中的调用绑定