深入浅出分析javaScript中this用法

这篇文章主要介绍了javaScript中this用法,实例分析了javascript中this的用途与相关的使用技巧,需要的朋友可以参考下

本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下：

之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章，才理解过来的。现在把别人写的东西搬过来，怕以后忘记。

总得来说 this的指向分三种。指向全局window,该对象,构造函数。

结论：在Javascript中，this指向函数执行时的当前对象。 简单点说就是调用的方法属于哪个对象，this就指向那个对象。

1. 全局window

简单代码

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. printMessage(); 

因为调用方法printMessage是属于window的，所以输出结果为:

true this in window

现在如果将代码改复杂点

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMsg : function(){ 
9. printMessage(); 
10. } 
11. }; 
12. obj.printMessage(); 

此时printMessage方法是属于window的，所以他的this还是指向window。obj.printMessage 方法是属于obj对象的，看看下面的分析。

所以输出结果还是为:true this in window

2. 该对象

现在看看该对象的，稍微改一下代码

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMessage : window.printMessage 
9. }; 
10. obj.printMessage(); 

结果：

false this in obj

对的，你想的没错 , 还是上一步的结论，obj.printMessage 方法是属于obj对象的，所以this是指向obj的。

好的再呕心点，看代码:

1. var message = "this in window"; 
2. var printMessage = function(){ 
3. console.info(this === window); 
4. console.info(this.message); 
5. }; 
6. var obj = { 
7. message: 'this in obj', 
8. printMessage : function(){ 
9. var obj2 = { 
10. message:'this in obj2', 
11. printMessage: window.printMessage 
12. }; 
13. obj2.printMessage(); 
14. } 
15. }; 
16. obj.printMessage(); 

最终调用的是 obj2.printMessage()，所以执行到this的时候，那个this是obj2

结果：

false,this in obj2

哈哈，是不是和你想的一样，谁调用的，就指向谁。

3. 构造函数

1. var Person = function(){ 
2. this.age = 1; 
3. this.name = 'no name'; 
4. }; 
5. var p = new Person(); 
6. console.info('age = ' + p.age); 
7. console.info('name = ' + p.name); 

结果：

age = 1 name = no name。

那么构造函数对this作了什么呢? 前面讲的《深入浅出理解javaScript原型链》 有对new做分析。

1. var Person = function(){}; 
2. var p = new Person(); 

new的过程拆分成以下三步：

(1) var p={}; 也就是说，初始化一个对象p

(2) p.__proto__ = Person.prototype;

(3) Person.call(p); 也就是说构造p，也可以称之为初始化p

那么就来说说call。

call 方法

应用于：Function 对象

调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数：

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2, , argN

可选项。将被传递方法参数序列。

说明：

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

解释一下，call方法的作用其实是更改默认方法的this指向。调用call方法的肯定是一个方法对象，当调用call，方法对象的this指向会变成call方法的第一个参数，就这么简单。

var p = new Person();

当调用构造函数Person时，可能是通过call来处理，使Person内的this指向了p,this.age = 1 就相当于p.age = 1，这样就张p添加了age这个属性。

希望本文所述对大家的javascript程序设计有所帮助。