JavaScript 中this的使用

 this跟函数的定义没有关系，只跟函数的调用有关系，当函数被调用时，通常分为一下四类调用：

 

 

 1.默认绑定全局变量
　　这条规则是最常见的，也是默认的。当函数被单独定义和调用的时候，应用的规则就是绑定全局变量。如下：　

1. function fn() {
2.      console.log( this.a );
3. }
4. var a = 2;
5. fn(); // 2 -- fn单独调用，this引用window

 2.隐式绑定

　　隐式调用的意思是，函数调用时拥有一个上下文对象，就好像这个函数是属于该对象的一样。例如：

• function fn() {
•      console.log( this.a );
• }
• var obj = {
•      a: 2,
•      fn: fn
• };
• obj.fn(); // 2 -- this引用obj。

 　　需要说明的一点是，最后一个调用该函数的对象是传到函数的上下文对象（绕懵了）。如：

1.   function fn() {
2.       console.log( this.a );
3.   }
4.   var obj2 = {
5.       a: 42,
6.       fn: fn
7.   };
8.   var obj1 = {
9.       a: 2,
10.      obj2: obj2
11. };
12. obj1.obj2.fn(); // 42 -- this引用的是obj2.

 　　还有一点要说明的是，失去隐式绑定的情况，如下：

1.   function fn() {
2.       console.log( this.a );
3.   }
4.   var obj = {
5.       a: 2,
6.       fn: fn
7.   };
8.   var bar = obj.fn; // 函数引用传递
9.   var a = "全局"; // 定义全局变量
10. bar(); // "全局"

 

　　如上，第8行虽然有隐式绑定，但是它执行的效果明显是把fn赋给bar。这样bar执行的时候，依然是默认绑定全局变量，所以输出结果如上。

　3.显示绑定

　　学过bind()\apply()\call()函数的都应该知道，它接收的第一个参数即是上下文对象并将其赋给this。看下面的例子：

function fn() {

1.      console.log( this.a );
2. }
3. var obj = {
4.      a: 2
5. };
6. fn.call( obj ); // 2

 　　如果我们传递第一个值为简单值，那么后台会自动转换为对应的封装对象。如果传递为null，那么结果就是在绑定默认全局变量，如：

1. function fn() {
2.       console.log( this.a );
3.   }
4.   var obj = {
5.       a: 2
6.   };
7. var a = 10;
8. fn.call( null); // 10

 

　　4. new新对象绑定
　　如果是一个构造函数，那么用new来调用，那么绑定的将是新创建的对象。如：

1. function fn(a) {
2.      this.a = a;
3. }
4. var bar = new fn( 2 );
5. console.log( bar.a );// 2

 

　　注意，一般构造函数名首字母大写，这里没有大写的原因是想提醒读者，构造函数也是一般的函数而已。