带你详解 this 的四个绑定规则

第一种绑定规则：默认绑定

当函数单独调用时，没有其他的修饰符，会使用默认绑定规则，即this会指向全局对象window。

  function foo() {
    console.log(this);
  }
  foo(); // 输出结果为 Window

第二种绑定规则：隐式绑定

当函数作为对象的方法被调用时，this会指向该对象。

  var obj = {
    name: 'My object',
    foo: function() {
      console.log(this.name);
    }
  }
  obj.foo(); // 输出结果为 "My object"

第三种绑定规则：显式绑定

通过使用call()、apply()和bind()方法，可以显式地将this绑定到指定的对象上。

  function foo() {
    console.log(this.name);
  }
  var obj = {
    name: 'My object'
  }
  foo.call(obj); // 输出结果为 "My object"

第四种绑定规则：new绑定

使用new关键字调用构造函数时，会创建一个新的对象，并将该对象绑定到函数的this上。

  function Person(name) {
    this.name = name;
  }
  var person = new Person('Tom');
  console.log(person.name); // 输出结果为 "Tom"