Javascript中的this

初学JS，对this有些困惑，在此做一下总结，欢迎指正交流。

就和我们平常说话一样，“张三跑得飞快，因为他快迟到了”，注意这个他。我们也可以说“张三跑得飞快，因为张三快迟到了”，但是一般不这么说。同样，在JS里，我们用this来指代对象。

var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function() {​
        // 我们使用this，类比上面例句中的他
        console.log(this.firstName + " " + this.lastName);​
        // 也可以这样写
        console.log(person.firstName + " " + person.lastName);
    }
};

如果我们用person.firstName和person.lastName，语句就不够明确，在其他我们没注意到的地方可能会存在全局变量也叫"person"，所以我们使用this不仅起到简化指代的作用，更可以让语句变得明确，就像我们用"他"来特指谈到的那个张三而不是别的张三。另外，在大多数时候我们不会事先知道调用该函数的对象叫什么名字，而可以通过this来获取该对象的属性和方法。

再来看一个简单例子：

var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    // "this"被用在下面的showFullName方法里,这个方法定义在person对象里 
    showFullName: function() {
        console.log(this.firstName + " " + this.lastName);
    }​
};​
// "this"指向person对象，因为person对象调用了showFullName()方法
person.showFullName(); // Penelope Barrymore

一个简单的jQuery例子：

$("button").click(function(event) {
    // $(this)指向$("button")对象​ 
    ​// 因为button对象调用了click()方法 
    console.log($(this).prop("name"));
});

在这里，之所以$(this)指向$("button")是因为jQuery把$(this)绑定到触发click方法的对象上，虽然实际上定义这个$(this)的匿名函数是无法获取其外部函数的"this"的值的，我们会在后文加以解释。

全局作用域中的this

当代码在浏览器中执行时，所有的全局变量和函数都定义在window对象下，它是整个javascript应用或页面的容器。因此当我们在一个全局函数中使用this时，它指向window对象。

var firstName = "Peter",
    lastName = "Ally";​
function showFullName() {
    // 此函数中的"this"会指向window对象
    // 因为showFullName()定义在全局作用域下，和firstName、lastName一样​ 
    console.log(this.firstName + " " + this.lastName);
}​;
var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    showFullName: function() {
        // 这里的"this"指向person对象，因为showFullName方法被person对象调用​ 
        console.log(this.firstName + " " + this.lastName);
    }
}​;

showFullName(); // Peter Ally​ 
​
// 所有的全局变量和函数都定义在window对象下，因此
window.showFullName(); // Peter Ally​ 
​
// 这里"this"指向person对象，因此
person.showFullName(); // Penelope Barrymore

那些"不守规矩"的this

我们知道JS里的函数也是对象，所以函数可以有属性。在一个函数执行时，它会得到this属性（PS：随着深入学习，这句话不对，this并不是函数对象的属性，而是执行上下文的一个属性，this的值thisValue在进入上下文的时候确定，并在上下文运行期间永久不变，想要深入理解的同学可以去看汤姆大叔的深入理解javascript系列），其值为调用该函数的对象，我们姑且称这个函数为"this函数"。this总是指向一个对象，并且常常被用在函数或方法里，当然它也可以在函数外部全局作用域里使用。注意，直到this函数被调用时，this才被赋值。在大部分情况下，this指向调用this函数的对象，然而在某些情况下会有例外。

1.作为被传递的回调函数里的this

var user = {
    data: [{
        name: "T. Woods",
        age: 37
    }, {
        name: "P. Mickelson",
        age: 43
    }],
    clickHandler: function(event) {
        var randomNum = Math.floor(Math.random() * 2); // 0或1的随机数 
        ​
        // 从data数组中读取name和age
        console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
    }
}​; 
// 结果为undefined，因为button对象中不存在data属性
$("button").click(user.clickHandler); // Cannot read property '0' of undefined

 在这里，$("button")是一个对象，我们把user.clickHandler方法作为回调函数传递给它的click()方法，此时user.clickHandler方法里的this不再指向user对象，而是指向调用user.clickHandler方法的对象，即button对象。注意虽然我们使用user.clickHandler来调用clickHandler()方法（毕竟clickHandler是定义在user下的方法），clickHandler()方法本身是被button对象调用的，所以this指向button对象。

解决方法

现在我们很想让this.data能够表示user对象的data属性，我们可以使用Bind()，Apply()和Call()方法来专门改变this的值。

在这个例子里，我们使用bind方法，将这一行

$("button").click(user.clickHandler);

改为以下这行，把clickHandler方法绑定到user对象

$("button").click(user.clickHandler.bind(user)); // P. Mickelson 43

2.闭包中的this

 另一个常见的情况就是内部函数（闭包）中的this。我们知道闭包不能通过this关键字来访问它的外部函数的this变量，这个this变量只能由外部函数自身来访问。

var user = {
    tournament: "The Masters",
    data: [{
        name: "T. Woods",
        age: 37
    }, {
        name: "P. Mickelson",
        age: 43
    }],  ​
    clickHandler: function() {
        // 在这里使用this.data没有问题，因为"this"指向user对象，data是user对象的属性       ​
        this.data.forEach(function(person) {
            // 但在这个内部匿名函数里，"this"不再指向user对象 
            // 这个内部函数无法访问外部函数的"this" 
            console.log("What is This referring to? " + this); //[object Window]​ 

            console.log(person.name + " is playing at " + this.tournament);
            // T. Woods is playing at undefined​ 
            // P. Mickelson is playing at undefined​ 
        })
    }​
};​
user.clickHandler(); // What is "this" referring to? [object Window]

这个匿名函数里的this无法访问外部函数的this，所以它被绑定到全局的window对象上。

解决方法

一个惯例方法是在进入forEach方法之前，我们把this的值赋给另一个变量。

var user = {
    tournament: "The Masters",
    data: [{
        name: "T. Woods",
        age: 37
    }, {
        name: "P. Mickelson",
        age: 43
    }],
    clickHandler: function(event) {
        // 趁着在这里"this"还是指向user对象的，我们此时把"this"的值赋给that变量
        var that = this;
        this.data.forEach(function(person) {
            // 把this.tournament改为that.tournament​，由于作用域链，内部函数可以访问外部函数的that变量
            console.log(person.name + " is playing at " + that.tournament);
        })
    }​
};​
user.clickHandler();
// T. Woods is playing at The Masters​ 
//  P. Mickelson is playing at The Masters

这个that变量可以是任意名字，一般我们取名为that。

3.当方法被赋值给一个变量时的this

// 全局变量data 
var data = [{
    name: "Samantha",
    age: 12
}, {
    name: "Alexis",
    age: 14
}];​
var user = {
    // user的属性data 
    data: [{
        name: "T. Woods",
        age: 37
    }, {
        name: "P. Mickelson",
        age: 43
    }],
    showData: function(event) {
        var randomNum = Math.floor(Math.random() * 2);
        ​
        console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
    }​
};​
// 把user.showData赋值给一个变量
var showUserData = user.showData;​

//​ 调用showUserData时，取得的是全局data，而不是user对象的data
showUserData(); // Samantha 12 

解决方法

可以用bind()方法来设置this的值

// 把showData方法绑定到user对象 
var showUserData = user.showData.bind(user);​
// 现在我们取得的是来自user对象的data
showUserData(); // P. Mickelson 43

4.借用函数时的this

// 现在有两个对象，一个有avg()方法，另一个没有​ 
var gameController = {
    scores: [20, 34, 55, 46, 77],
    avgScore: null,
    players: [{
        name: "Tommy",
        playerID: 987,
        age: 23
    }, {
        name: "Pau",
        playerID: 87,
        age: 33
    }]
};​
var appController = {
    scores: [900, 845, 809, 950],
    avgScore: null,
    avg: function() {​
        var sumOfScores = this.scores.reduce(function(prev, cur, index, array) {
            return prev + cur;
        });​
        this.avgScore = sumOfScores / this.scores.length;
    }
};​
// 我们想让gameController借用avg()方法，求得自己scores的平均值
// 同时不改变appController的avgScore

// 下面这行肯定是行不通的
gameController.avgScore = appController.avg();

解决方法

我们可以使用apply()方法

// 注意我们在使用apply()方法，所以第二个参数必须是数组，它包含要传递给appController.avg()的参数​ 
appController.avg.apply(gameController, gameController.scores);​

// 成功得到gameController对象的avgScore的值，虽然借用的是appController对象的avg()方法​ 
console.log(gameController.avgScore); // 46.4​ 
​
// appController.avgScore仍然为null​ 
console.log(appController.avgScore); // null

译自http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/