JavaScript中的【this】

一、this是什麼–基於調用位置的上下文;調用位置不同,this值不同。

this是在運行時進行綁定的,並不是在編寫時綁定,它的上下文取決於函數調用時的各種條件。this的綁定和函數聲明的位置沒有任何關係,只取決於函數的調用位置(也就是函數的調用方式)!

var foo = "golbal foo";
var myObj = {foo : 'myObj foo'};
var say = function(){
	console.log(this.foo);
}
 
myObj.say = say;
myObj.say();	//結果:myObj foo
say();		//結果:golbal foo

二、爲什麼使用this

this提供了一種更優雅的方式來隱式“傳遞”對象引用,因此可以將API設計得更加簡潔並易於複用。

var me = {
	name: "fenfei"
}; 
//不使用this,調用
function speak(name){
	console.log("Hello, I'm "+ name);
}
speak(me.name);		//Hello, I'm fenfei
 
//使用this,調用
function speak(){
	console.log("Hello, I'm "+ this.name);
}
speak.call(me);		//Hello, I'm fenfei

三. this的四大綁定規則

  1. 默認綁定–函數調用類型:獨立函數調用,this指向全局對象。在嚴格模式下,全局對象將無法使用默認綁定,因此this會綁定到undefined。
var a = "foo";
function foo(){
	"use strict";
	console.log(this.a);
}
foo();	// TypeError:this is undefined
  1. 隱式綁定–調用位置是否有上下文對象,或者說被某個對象擁有或者包含
function foo(){
	console.log(this.a);
}
var obj1 = {
	a : 2,
	foo : foo
}
var obj2 = {
	a : 1,
	obj1 : obj1
}
obj2.obj1.foo();	//結果:2

當foo()被調用時,它的落腳點指向obj1對象,隱式綁定規則會把函數調用中的this綁定到這個上下文對象。
對象屬性引用鏈中只有最頂層或者說最後一次層會影響調用位置。

  1. 顯示綁定
    call、apply
function foo(){
	console.log(this.a);
}
var obj = {	a:2 };
var bar = function(){
	foo.call(obj);
};
bar(); //2
setTimeout( bar, 1000);	//2
bar.call( window );	//2

創建了函數bar(),在其內部手動調用了foo.call(obj),因此強制把foo的this綁定到了obj上。無論之後如何調用函數bar,總會手動在obj上調用foo。這種顯示的強制綁定,稱爲“硬綁定”。

  1. new綁定
    new調用函數會自動執行下面操作:
    (1)創建(或者說構造)一個全新的對象;
    (2)這個新對象會被執行[[原型]]連接;
    (3)這個新對象會綁定到函數調用的this;
    (4)如果函數沒有返回其他對象,那麼new表達式中的函數調用會自動返回這個新對象。

四、優先級

瞭解了函數調用中this綁定的四條規則,需要做的就是找到函數的調用位置並判斷對應哪條規則。

  1. 函數是否是new綁定?如果是,this綁定的是新創建的對象。
    var bar = new Foo();
  2. 函數是否通過call、apply顯示綁定或硬綁定?如果是,this綁定的是指定的對象。
    var bar = foo.call(obj);
  3. 函數是否在某個上下文對象中隱式調用?如果是,this綁定的是那個上下文對象。
    var bar = obj.foo();
  4. 上述全不是,則使用默認綁定。如果在嚴格模式下,就綁定到undefined,否則綁定到全局window對象。
    var bar = foo();

五、綁定this注意點

  1. 忽略this
    把null或undefined作爲this的綁定對象傳入call、apply、bind,調用時會被忽略,實際應用的是默認綁定規則!
function foo(){
	console.log(this.a);
}
var a = 1;
foo.call(null, 2);			//1
foo.apply(undefined, [3]);	//1
  1. 間接引用
function foo(){
	console.log(this.a);
}
var a = 2;
var o = { a : 3,foo : foo};
var p = { a : 4};
o.foo();			//3
(p.foo = o.foo)();	//2 間接引用
var pfoo = o.foo;
pfoo();			//2 隱式丟失

六、詳解如何確定this

1.(隱式綁定)如果某個對象中某個成員是個function,當從這個對象上調用這個方法時this指向當前對象。

var FenFei = {
	firstname:"li",
	lastname:"gang",
	timeTravel:function(year){
		console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
	}
}
FenFei.timeTravel(2014);	//li gang is time traveling to 2014(父/擁有者對象:FenFei)

2.(隱私綁定)可以通過創建一個新的對象,來引用FenFei對象上的timeTravel方法。

var Camile = {
	firstname:"li",
	lastname:"yunxia"
} 
Camile.timeTravel = FenFei.timeTravel;
Camile.timeTravel(2014);	//li yunxia is time traveling to 2014(父/擁有者對象:Camile)

3.(new綁定)構造函數裏的this
當使用構造函數創建一個對象的實例時,構造函數裏的this就是新建的實例。

var TimeTravel = function(fName, lName){
	this.firstname = fName;
	this.lastname = lName;
}
 
var FenFei = new TimeTravel("li", "gang");
console.log(FenFei.firstname + " " + FenFei.lastname);		//li gang

4.(顯示綁定)call和apply方法設定this值

var Camile = {
	firstname:"li",
	lastname:"yunxia"
} 
FenFei.timeTravel.call(Camile,2014);		//li yunxia is time traveling to 2014(指定this對象爲Camile)
FenFei.timeTravel.apply(Camile,[2014]);	//li yunxia is time traveling to 2014(指定this對象爲Camile)

5.(顯示綁定)bind將函數綁定至某個對象(ES5)

function f(y){
	return this.x + y;
}
var o = {x:1};
/* f.bind(o)返回一個新函數,調用g(2)會把原始的函數f()當作o的方法來調用 */
var g = f.bind(o);	
g(2);	// 3

補充

  1. 使用new爲函數創建多個實例的時候,這些實例會共享prototype。
    當在一個實例裏直接給this添加屬性的時,會隱藏prototype中與之同名的屬性。
    如果想訪問prototype中的屬性值而不是自己的設定的屬性值:
    (1)刪除實例自己添加的屬性: delete 實例名.屬性名
    (2)直接訪問prototype中的屬性:Thing.prototype.name
function Thing(){}
Thing.prototype.name = "leegang";
Thing.prototype.getName = function(){
	console.log(this.name);
}
Thing.prototype.setName = function(newName){
	this.name = newName;
}
Thing.prototype.deleteName = function(){
	delete this.name;
}
 
var thing = new Thing();	/*thing:Thing {}*/
thing.setName("liyunxia");	/*thing:Thing {name: "liyunxia"}*/
thing.getName();		//結果:liyunxia
thing.deleteName();		/*thing:Thing {}*/
thing.getName();		//結果:leegang	thing.__proto__爲Thing {name: "leegang"}
 
thing.name = "liyunxia";	/*Thing {name: "liyunxia"}*/
thing.getName();		//結果:liyunxia
delete thing.name;		/*thing:Thing {}*/
thing.getName();		//結果:leegang thing.__proto__爲Thing {name: "leegang"}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章