javascript中this值的引用

嚴格模式下

1.全局做用域指向當前Window

2.函數內部的this，運行在全局做用域下，this值爲undefined

3.當即執行函數的 this值爲undefined

"use strict"
 			var sb='sb';
 			
 			//全局做用下的this
 			console.log(this);//Window
 			
 			function sayHello(){
 					console.log('function');
 					//console.log(this);//undefined
 				}
 				
 				//運行在全局做用域下的函數
 				sayHello();
 				
 				
 				//匿名當即執行函數
 				(function(){
 					console.log('anonymous');
 					console.log(this);//undefined
 					})();

在非嚴格模式下

在該模式下**this** 引用老是指向一個值，該值老是指向持有**this**的 **Funtion或者Object **所運行的做用域

var firstName="Peter",
 	  lastName='Ally';
 	  
 	  function showFullName(){
 	  		//持有this的Funtion showFullName運行在全局做用域下，因此this指向Window
 	  		//輸出PeterAlly
 	  		console.log(this.firstName+""+this.lastName);
 	  	}	
 	  	
 	  	showFullName();	
 	  	
 	  	var person={
 	  				firstName:"Penelope",
 	  				lastName:'Barrymore',
 	  				showFullName:function(){
 	  					//持有this的Funtion showFullName運行在person做用域下，因此this指向person
 	  					//輸出PenelopeBarrymore
 	  					console.log(this.firstName+""+this.lastName);
 	  					}
 	  		}
 	  		
 	  		person.showFullName();

一些特殊狀況

1.咱們能夠利用**Bind ()**, Apply (), **Call ()從新指定this**引用

var person={
 	  				firstName:"Penelope",
 	  				lastName:'Barrymore',
 	  				showFullName:function(){
 	  					//持有this的Funtion showFullName運行在person做用域下，因此this指向person
 	  					//輸出PenelopeBarrymore
 	  					console.log(this.firstName+""+this.lastName);
 	  					}
 	  		}
 	  		
 	  		//person.showFullName();
 	  		
 	  		var anotherPerson={
 	  				firstName:'Rohit',
 	  				lastName:'Khan'
 	  			}
 	  			
 	  			//從新指定this爲anotherPerson
 	  			//輸出爲RohitKhan
 	  			person.showFullName.apply(anotherPerson);

2.回調函數中的**this**

var user={
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
 	  				clickHandler:function(event){
 	  						 var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​
 	  						 console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
 	  					}
 	  				}
 	  				
 	  				 $ ("button").click (user.clickHandler);

**button的click事件擊發的時候this並不能訪問到 user的屬性data,由於此時的this**引用的是 **$ ("button")**對象

修正以下：

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

3.閉包

var user={
 	  				tournament:"The Masters",
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
 	  				clickHandler:function(event){
 	  						this.data.forEach(function(person){
 	  							//這是一個內部函數this再也不指向user
 	  							//this只能被Function,Object自身訪問
 	  								console.log ("What is This referring to? " + this); //[objectWindow]
 	  								console.log (person.name + " is playing at " + this.tournament);
 	  								 // T. Woods is playing at undefined​
 	  								 // P. Mickelson is playing at undefined​​
 	  							})
 	  					}
 	  				}
 	  				  user.clickHandler();

修正以下:

clickHandler:function(event){
 	  					var theUserObj = this;
 	  						this.data.forEach(function(person){
 	  							//這是一個內部函數this再也不指向user
 	  							//this只能被Function,Object自身訪問
 	  								console.log ("What is This referring to? " + this); //[objectWindow]
 	  								console.log (person.name + " is playing at " + theUserObj.tournament);
 	  								 // T. Woods is playing at undefined​
 	  								 // P. Mickelson is playing at undefined​​
 	  							})
 	  					}

在外部函數中定義一個變量保存**this，在閉包中經過訪問這個變量訪問外部的this**

4.將方法賦值給變量

var data=[{
 	  						name:"Samantha",
 	  						age:12
 	  					},{
 	  						name:"Alexis",
 	  						age:14
 	  						}];
 	  				
 	  			var user={
 	  				tournament:"The Masters",
 	  				data:[{
 	  					name:"T.Woods",
 	  					age:37
 	  				},{
 	  					name:"P. Mickelson",
 	  					age:43
 	  					}],
						showData:function(event){
								var randomNum = ((Math.random () * 2 | 0) + 1) - 1;
                                                         // random number between 0 and 1
								
                        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
							}
 	  				}
 	  				
 	  				var showUserData = user.showData;
 	  				showUserData (); // Samantha 12 (from the global data array)​

最終輸出的數據爲全局變量中**data**的數據

修正以下:

var showUserData = user.showData.bind (user);