JavaScript学习总结——this对象

在JavaScript中，this关键字是动态绑定的，或称为运行期绑定，这极大地加强的咱们程序的灵活性，同时也给初学者带来了不少困惑。本文总结了this的几个使用场景和常见误区。

全局环境

在全局环境中使用this，它会指向全局对象。在web游览器中，也就是window对象。

alert(this === window);    // true

函数调用

看成为普通函数被调用时，函数内部的的this也会指向全局对象。

var name = "window";

function sayName(){
    var name = "fun";
    alert(this.name);
}

sayName();    // "window"

做为对象的方法调用

看成为对象内部的方法被调用时，这里this指向这个方法所在的对象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
};

obj.sayName();    // "obj"

做为构造函数调用

JavaScript 中的构造函数很特殊，若是不使用 new 调用，则和普通函数同样。做为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。若是调用正确，this 绑定到新建立的对象上。

function Person(name){
    this.name = name,
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person("daoko");
person1.sayName();    // "darko"

apply和call调用

apply和call是函数对象的的两个方法，它们能够修改函数执行的上下文环境，即this绑定的对象。apply和call的第一个参数就是this绑定的对象，若apply和call的参数为空，则默认调用全局对象。

var name = "window"

var obj = {
  name: "object"
}

function sayName(){
  alert(this.name);
}

sayName();    // 直接调用函数sayName
sayName.call(obj);    // 用call方法修改this的指向
sayName.call();    // 当call方法的参数为空时，默认调用全局对象

特殊状况

常见错误

咱们首先来看这样一个栗子：

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var test = function(){
      alert(this.name);    // this绑定到全局对象上
    }
    test();
  }
}

obj.sayName();    // "window"

是否是和上面说的做为对象的方法调用状况很像，按照咱们的理解此时的this应该指向obj对象，可是实际状况不是这样的，此时的this指向全局对象。

这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，为了规避这一缺陷，咱们能够使用变量替代的方法，约定俗成，该变量通常被命名为 that。 在这个栗子中，这样咱们建立了一个局部变量that来指向obj对象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var that = this;    // that指向对象obj
    var test = function(){
      alert(that.name);
    }
    test();
  }
}

obj.sayName();    // "obj"

方法的赋值表达式

当咱们把一个对象的方法赋值给一个变量时，它的this会发生什么变化呢? 看个栗子:

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
}

var test = obj.sayName;
obj.sayName();    // "obj"
test();    // "window"

从上面这个栗子中咱们能够看到，当把对象obj的方法赋值给一个新的变量test时，它的this指向发生了变化，test就向一个普通的函数同样被调用，此时指向全局对象。