Javascript this 函数深入详解

什么是this?

this 是javascript中一个非常重要和有用的关键字，它代表当前函数执行的上下文，在不同的函数内部指向不同的对象。需要注意的是，this 的指向并不是在定义的时候确定的，而是在运行的时候才确定的。

this 的4中绑定规则

当你在函数里使用 this 时，请先看调用该函数的方式，它式通过调用方式来决定的。

默认绑定

当函数独立使用时，它的this处在默认绑定，也就是全局绑定。例如：

function yourFunction() {
    console.log(this);
}
yourFunction();

这段代码运行的结果为 window，因为这里的 this 等同于 window 。

隐式绑定

当函数是作为某个对象的属性时，它的this处在隐式绑定状态。例如：

var myObj = {
  myMethod: function() {
    console.log(this);
  }
}
myObj.myMethod();

这段代码的结果为 myObj，因为这里的 this 指向了 myObj 。

显示绑定

使用 call 或 apply 可以直接指定函数的 this 值。例如：

function yourFunction() {
    console.log(this);
}
yourFunction.call(myObj);

这段代码的结果为 myObj，因为使用了 call 方法将 this 值绑定到了 myObj 。

new 绑定

当一个函数被用作构造器时（即带有 new 关键字），它的this绑定到正在构造的新对象上。例如：

function YourFunction() {
  this.name = 'Jack';
}
var yourObj = new YourFunction();
console.log(yourObj.name);

这段代码的结果为 Jack，因为 this 在执行 YourFunction() 函数时指向了新的对象 yourObj 。

示例1：解释默认绑定下this的指向

function yourFunction() {
    console.log(this);
}
yourFunction();

这段代码运行的结果为 window，因为这里的 this 等同于 window。因为在全局作用域下默认会把 this 绑定到全局对象 window 上。

示例2：了解隐式绑定下this的指向

var myObj = {
  myMethod: function() {
    console.log(this);
  }
}
myObj.myMethod();

这段代码的结果为 myObj，因为这里的 this 指向了 myObj 。

结论

学习 this 的规则和实际应用场景需要时间，可以在代码中加入 console.log(this) 来帮助理解 this 的指向关系。在解决问题时要仔细考虑 this 的绑定方式，以避免出现意外的结果。