531
深入淺出了解 JavaScript 中的 this
this是Javascript語言的一個關鍵字;它代表函數運行時自動生成的一個內部對象,隻能在函數內部使用
首先必須要說的是,this的指向不是在函數定義時確定的,隻有函數執行的時候才能確定,實際上this最終指向那個調用它的對象(網上大部分的文章都是這樣說的,而且在很多情況下這樣理解不會出問題,但實際上這樣理解是不準確的)
為什麼要了解this
肯定有人會問:既然this這麼難以理解,那麼為個甚還要用它呢?
function identify() {
return this.name.toUpperCase();
}
function sayHello() {
var greeting = "Hello, I'm " + identify.call(this);
console.log( greeting );
}
var person1= {
name: "Kyle"
};
var person2= {
name: "Reader"
};
identify.call( person1); // KYLE
identify.call( person2); // READER
sayHello.call( person1); // Hello, I'm KYLE
sayHello.call( person2); // Hello, I'm READER
這段代碼我們定義了兩個函數:identify和sayHello,並且在不同的對象環境下執行它們達到了複用的效果,而不用針對不同的對象環境寫對應的函數了;簡言之,this給函數帶來了複用;也肯定會有人說,我不用this一樣可以實現
function identify(context) {
return context.name.toUpperCase();
}
function sayHello(context) {
var greeting = "Hello, I'm " + identify( context);
console.log( greeting );
}
var person1= {
name: "Kyle"
};
var person2= {
name: "Reader"
};
identify( person1); // KYLE
identify( person2); // READER
sayHello( person1); // Hello, I'm KYLE
sayHello( person2); // Hello, I'm READER
顯然這個解決方法也達到了類似的效果,但隨著代碼的增加/函數嵌套/各級調用等變得越來越複雜,傳遞一個對象的引用將變得越來越不明智,它會把你的代碼弄得非常亂,甚至你自己都無法理解清楚;而this機製提供了一個更加優雅而靈便的方案,傳遞一個隱式的對象引用讓代碼變得更加簡潔和複用
純粹的函數調用
這是函數的最通常用法,屬於全局性調用,因此this就代表全局對象Global
function a(){
var user = "名稱";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
按照我們上麵說的this最終指向的是調用它的對象,這裏的函數a實際是被Window對象點出來的,下麵的代碼就可以證明
function a(){
var user = "名稱";
console.log(this.user); //undefined
console.log(this); //Window
}
window.a();
結果證明:這兩段代碼是一致的,其實alert也是window的一個屬性,也是window點出來的
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
作為對象方法的調用
函數還可以作為某個對象的方法調用,這時this就指這個上級對象
var o = {
user:"名稱",
fn:function(){
console.log(this.user); //名稱
}
}
o.fn();
這裏的this指向的是對象o,因為你調用這個fn是通過o.fn()執行的;再次強調:this的指向在函數創建的時候是決定不了的,在調用的時候才能決定,誰調用的就指向誰
其實上麵的例子說的並不夠準確,下麵這個例子就可以推翻上麵的理論
var o = {
user:"名稱",
fn:function(){
console.log(this.user); //名稱
}
}
window.o.fn();
這段代碼和上麵的那段幾乎是一樣的,但這裏的this為什麼不指向window;如果按照上麵的理論:this指向的是調用它的對象;window是js的全局對象,我們創建的變量實際上是給window添加屬性,所以可以用window.o對象
這裏先不解釋上麵的代碼this為什麼沒有指向window,我們再來看一段代碼
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();
這裏也是對象o點出來的,但是同樣this並沒有執行它,那你肯定會說我一開始說的不就都是錯誤的嗎?其實隻是一開始說的不準確,接下來補充一句話,相信你就可以徹底的理解this的指向的問題
情況1:如果一個函數中有this,但是它沒有被上一級的對象所調用,那麼this指向的就是window,這裏需要說明的是:在js的嚴格版中this指向的不是window,但是我們這裏不探討嚴格版的問題,想了解可以自行上網查找
情況2:如果一個函數中有this,這個函數有被上一級的對象所調用,那麼this指向的就是上一級的對象
情況3:如果一個函數中有this,這個函數中包含多個對象,盡管這個函數是被最外層的對象所調用,this指向的也隻是它上一級的對象,如果不相信,那麼接下來我們繼續看幾個例子
var o = {
a:10,
b:{
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();
盡管對象b中沒有屬性a,這個this指向的也是對象b,因為this隻會指向它的上一級對象,不管這個對象中有沒有this要的東西
還有一種比較特殊的情況:
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j(); //這裏將o.b.fn方法賦給j變量,此時j變量相當於window對象的一個屬性,因此j()執行的時候相當於window.j(),即window對象調用j這個方法,所以this關鍵字指向window
這裏this指向的是window,是不是有些蒙了?其實是因為你沒有理解一句話,這句話同樣至關重要
this永遠指向的是最後調用它的對象,也就是看它執行的時候是誰調用的,上例中雖然函數fn是被對象b所引用,但在將fn賦值給變量j的時候並沒有執行所以最終指向的是window
再換種形式：
var personA={
name:"xl",
showName:function(){
console.log(this.name); //輸出 XL
}
}
var personB={
name:"XL",
sayName:personA.showName
}
personB.sayName(); //雖然showName方法是在personA這個對象中定義,但是調用的時候卻是在personB這個對象中調用,因此this對象指向personB
對於內部函數,即聲明在另外一個函數體內的函數,這種綁定到全局對象的方式會產生另外一個問題
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var moveX = function(x) {
this.x = x; //this綁定到了哪裏？
};
var moveY = function(y) {
this.y = y;//this 綁定到了哪裏？
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1
在這個例子中打印this,會發現他是綁定到window的,所以改變了x和y的值而不是對象中的point.x和point.y的值;這屬於JavaScript的設計缺陷,正確的設計方式是內部函數的this應該綁定到其外層函數對應的對象上,為了規避這一設計缺陷,聰明的JavaScript程序員想出了變量替代的方法
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
var moveX = function(x) {
that.x = x;
};
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1
作為構造函數調用
所謂構造函數,就是通過這個函數生成一個新對象(object),this就指這個新對象
function Fn(){
this.user = "名稱";
}
var a = new Fn();
console.log(a.user); //名稱
之所以對象a可以點出函數Fn裏的user是因為new關鍵字可以改變this的指向,將這個this指向對象a;為什麼說a是對象,因為new就是創建一個對象實例,即這裏用變量a創建了一個Fn實例(相當於複製一份Fn到對象a裏麵),此時隻是創建並沒有執行,而調用這個函數Fn的是對象a,那麼this指向的自然是對象a
為了表明這時this不是全局對象,我對代碼做一些改變
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
console.log(x); //2
運行結果為2,表明全局變量x的值根本沒變
除上麵這些外,還可以通過JS中call,apply,bind方法自行改變this的指向
new操作符
下麵這段代碼模擬了new操作符(實例化對象)的內部過程
function person(name){
var o={};
o.__proto__=Person.prototype; //原型繼承
Person.call(o,name);
return o;
}
var personB=person("xl");
console.log(personB.name); // 輸出 xl
首先在person裏創建一個空對象o,將o的proto指向Person.prototype完成對原型的屬性和方法的繼承
Person.call(o,name)即函數Person作為apply/call調用,將Person對象裏的this改為o,即完成了o.name=name操作
返回對象o
因此person("xl")返回了一個繼承了Person.prototype對象上的屬性和方法,以及擁有name屬性為"xl"的對象,並將它賦給變量personB,所以console.log(personB.name)會輸出"xl"
使用apply或call調用
再一次重申,在JavaScript中函數也是對象,對象則有方法,apply和call就是函數對象的方法,他們允許切換函數執行的上下文環境(context),即this綁定的對象;很多JavaScript中的技巧以及類庫都用到了該方法;它們的第一個參數為改變後調用這個函數的對象;因此this指的就是這第一個參數
var x = 0;
function test(){
console.log(this.x); //0
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //apply()的參數為空時默認調用全局對象,這時的運行結果為0,證明this指的是全局對象;如果把最後一行代碼修改為
o.m.apply(o); //1
當this碰到return
function fn(){
this.user = '名稱';
return {};
}
var a = new fn;
console.log(a.user); //undefined
再看一個
function fn(){
this.user = '名稱';
return function(){};
}
var a = new fn;
console.log(a.user); //undefined
再來
function fn(){
this.user = '名稱';
return 1;
}
var a = new fn;
console.log(a.user); //名稱
function fn(){
this.user = '名稱';
return undefined;
}
var a = new fn;
console.log(a.user); //名稱
什麼意思呢?如果返回值是一個對象,this指向的就是那個返回的對象;如果返回值不是一個對象,那麼this還是指向函數的實例
function fn(){
this.user = '名稱';
return undefined;
}
var a = new fn;
console.log(a); //fn {user: "名稱"}
還有一點就是雖然null也是對象,但在這裏this還是指向那個函數的實例,因為null比較特殊
function fn(){
this.user = '名稱';
return null;
}
var a = new fn;
console.log(a.user); //名稱
Function.prototype.bind()方法
.apply()和.call()都立即執行了函數,而.bind()函數返回了一個新方法,綁定了預先指定好的this,並可以延後調用;.bind()方法的作用是創建一個新的函數,執行時上下文環境為.bind()傳遞的第一個參數,它允許創建預先設置好this的函數
var name="XL";
function Person(name){
this.name=name;
this.sayName=function(){
setTimeout(function(){
console.log("my name is "+this.name); //my name is XL
},50)
}
}
var person=new Person("xl");
person.sayName()
這裏的setTimeout()定時函數,相當於window.setTimeout(),由window這個全局對象調用,因此this的指向為window, this.name則為XL;那麼如何才能輸出"my name is xl"呢?
var name="XL";
function Person(name){
this.name=name;
this.sayName=function(){
setTimeout(function(){
console.log("my name is "+this.name); //my name is xl
}.bind(this),50) //注意這個地方使用的bind()方法,綁定setTimeout裏麵的匿名函數的this一直指向Person對象
}
}
var person=new Person("xl");
person.sayName();
這裏setTimeout(function(){console.log(this.name)}.bind(this),50);匿名函數使用bind(this)方法後創建了新的函數,這個新的函數不管在什麼地方執行this都指向Person而非window,因此最後的輸出為"my name is xl"而不是"my name is XL"
使用.bind()時應該注意:.bind()創建了一個永恒的上下文鏈並且不可修改;一個綁定函數即使使用.call()或.apply()傳入其他不同的上下文環境也不會更改它之前連接的上下文環境,重新綁定也不會起任何作用;隻有在構造器調用時,綁定函數可以改變上下文,然而這並不是推薦的做法
tips
超時調用的代碼都是在全局作用域中執行的,因此函數中的this的值,在非嚴格模式下是指向window對象,在嚴格模式下是指向undefined;因此setTimeout/setInterval/匿名函數執行的時候this默認指向window對象,除非手動改變this的指向
var name="XL";
function Person(){
this.name="xl";
this.showName=function(){
console.log(this.name); //XL
}
setTimeout(this.showName,50); //在setTimeout(this.showName,50)語句中，會延時執行this.showName方法
}
var person=new Person();
this.showName方法即構造函數Person()裏麵定義的方法;50ms後執行this.showName方法,this.showName裏麵的this此時便指向了window對象,則會輸出"XL";修改上麵的代碼:
var name="XL";
function Person(){
this.name="xl";
var that=this;
this.showName=function(){
console.log(that.name); //xl
}
setTimeout(this.showName,50)
}
var person=new Person();
這裏在Person函數當中將this賦值給that,即讓that保存Person對象,因此在setTimeout(this.showName,50)執行過程當中console.log(that.name)即會輸出Person對象的屬性"xl"
下麵來看個匿名函數:
var name="XL";
var person={
name:"xl",
showName:function(){
console.log(this.name);
}
sayName:function(){
(function(callback){
callback();
})(this.showName)
}
}
person.sayName(); //輸出 XL
更改後:
var name="XL";
var person={
name:"xl",
showName:function(){
console.log(this.name); //xl
}
sayName:function(){
var that=this;
(function(callback){
callback();
})(that.showName)
}
}
person.sayName(); //匿名函數的執行同樣在默認情況下this是指向window的，除非手動改變this的綁定對象
Eval函數
該函數執行的時候，this綁定到當前作用域的對象上
var name="XL";
var person={
name:"xl",
showName:function(){
eval("console.log(this.name)");
}
}
person.showName(); //輸出 "xl"
var a=person.showName;
a(); //輸出 "XL"
箭頭函數
es6裏麵this指向固定化,始終指向外部對象,因為箭頭函數沒有this,因此它自身不能進行new實例化,同時也不能使用call/apply/bind等方法來改變this的指向;箭頭函數一次綁定上下文後便不可更改,即使使用了上下文更改的方法:
function Timer() {
this.seconds = 0;
setInterval(() => this.seconds ++, 1000);
}
var timer = new Timer();
setTimeout(() => console.log(timer.seconds), 3100); // 3
在構造函數內部的setInterval()內的回調函數,this始終指向實例化的對象並獲取實例化對象的seconds的屬性,每1s這個屬性的值都會增加1否則最後在3s後執行setTimeOut()函數執行後輸出的是0
知識點補充
1.在嚴格版中的默認的this不是window而是undefined
2.new操作符會改變函數this的指向問題,雖然我們上麵了解過了,但是並沒有深入的討論這個問題,網上也很少說,所以在這裏有必要說一下
function fn(){
this.num = 1;
}
var a = new fn();
console.log(a.num); //1
什麼this會指向a?首先new關鍵字會創建一個空的對象,然後會自動調用一個函數apply方法(new一個空對象的時候js內部並不一定是用apply方法來改變this指向的,這裏我隻是打個比方而已)將this指向這個空對象,這樣的話函數內部的this就會被這個空的對象替代
最後更新：2017-11-07 18:03:47