JS中函数的调用和this的值

时间:2023-03-08 20:42:24

调用每一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数,每个函数还接收两个附加的参数:this arguments

参数this在面向对象编程中非常重要,他的值取决于调用的模式。

在JS中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。

  • 方法调用模式

  当一个函数被保存为对象的一个属性时,我们称为一个方法。当一个方法被调用时,this被绑定到该对象。

    var myObject = {
value: 0,
increment: function(inc){
this.value += typeof inc === "number" ? inc : 1;
}
}; myObject.increment();
console.log(myObject.value); //
myObject.increment(3);
console.log(myObject.value); //
  • 函数调用模式

  当一个函数并非一个对象的属性时,那么它就是被当做一个函数来调用。以此模式调用函数时,this被绑定到全局对象。有一个很容易的解决方案:如果该方法定义一个变量并给它赋值      为this,那么内部函数就可以通过那个变量访问到this。

    var value = 122;
var myObject = {
value: 0,
increment: function(inc){
this.value += typeof inc === "number" ? inc : 1;
},
double: function () {
var that = this;
return function () {
return that.value = add(that.value, that.value);
}();
} }; myObject.increment(); // 1
myObject.increment(3); // 4
// console.log(myObject.value);
myObject.double();
console.log(myObject.value); // 8
function add(a, b) {
return a + b;
}
  • 构造器调用模式

  创建构造器函数。如果在一个函数前面带上 new 来调用,那么背地里将会创建一个连接到该函数的 prototype 成员的新对象,同时this被绑定到那个新的对象上。

也就是说this代表的是那个新实例。

  • Apply调用模式

  该调用模式详见:如何理解和熟练运用js中的call和apply