JavaScript中的this淺談

對大多數JavaScript的初學者來說，this的取值一直困擾著大家，我曾經為了學習this也看了不少這方面的介紹。現在把我對this的理解寫出來，分享給大家，如果我這篇隨筆有幸幫到了大家，我會感到非常高興。好了，廢話少說，來點實在的。

一句話，函數中的this始終指向調用該函數的對象。

這就像一個公式，下面我們套用一下公式看看是不是這樣。

1 var name = 'hello world';2 function test(){3     alert(this.name);4     alert(this === window);5 }6 test();//等效於window.test()，輸出結果是'hello world'，true

上面的代碼中test()是一個全域函數，預設的屬於window對象，所以相當於window對象調用的該函數，this的值等於window，符合那個公式。

下面這塊代碼展示了對象中this的指向

 1 var name = 'foo'; 2 var age = 20; 3 var person = { 4     name: 'hello world', 5     age: 22, 6     sayHello:function(){ 7         alert('I\'m ' + this.name + ', and I\'m ' + this.age + ' years old'); 8     } 9 };10 person.sayHello();//I'm hello world, and I'm 22 years old

上面的代碼中調用sayHello()函數的對象是person，按照公式this的值應該是person，而事實也正是如此。

下面的代碼展示了另一種聲明對象的方式中this的取值

 1 var name = 'foo'; 2 var age = 20; 3 var Person = function(_name, _age){ 4     this.name = _name; 5     this.age = _age; 6     this.sayHello = function(){ 7        alert('I\'m ' + this.name + ', and I\'m ' + this.age + ' years old');     8     } 9 };10 var p1 = new Person('Hello World', 22);11 var p2 = new Person('ScriptJava', 20);12 p1.sayHello();//I'm Hello World, and I'm 22 years old，this指向p113 p2.sayHello();//I'm ScriptJava, and I'm 20 years old，this指向p2

 如果要修改JavaScript中this的指向，可以用call()和apply()方法。這兩個的方法功能相同，用法類似，先看下面的代碼。註：以下的代碼摘自Professional JavaScript for Web Developers

 1 window.color = "red"; 2 var o = { color: "blue"}; 3  4 function sayColor(){ 5     alert(this.color); 6 } 7  8 sayColor(); //"red" 9 o.sayColor = sayColor;10 o.sayColor(); //"blue"

第10行的結果表明this的值變成了對象o，下面的代碼可以實現同樣的效果。

window.color = "red";var o = {color: "blue"};function sayColor(){     alert(this.color);  }sayColor.apply(o);//"blue"sayColor.call(o);//"blue"

可以發現，sayColor當中的this已經變成了o，call()和apply()方法的區別在於接收參數的方式不同，如下面的代碼所示

1 function sum(x, y){2     var sum = x + y;3     alert(sum);4 }5 sum.apply(this, [1, 2]); //36 sum.call(this, 1, 2); //3

這裡的this指向window對象。從上面的代碼中你應當能看出apply()和call()的區別了。

部落格剛開通不久，寫作水平有限，不妥之處歡迎和大家交流。（完）^_^