資訊專欄INFORMATION COLUMN
摘要：中函數的調用有以下幾種方式作為對象方法調用，作為函數調用，作為構造函數調用，和使用或調用。作為構造函數調用中的構造函數也很特殊，構造函數，其實就是通過這個函數生成一個新對象，這時候的就會指向這個新對象如果不使用調用，則和普通函數一樣。
this 是 JavaScript 比較特殊的關鍵字，本文將深入淺出的分析其在不同情況下的含義，可以這樣說，正確掌握了 JavaScript 中的 this 關鍵字，才算邁入了 JavaScript 這門語言的門檻。
Tips:個人博客：https://haonancx.github.io；排版更佳~
What ’s this？要學一樣東西，首先得了解它的含義，this 關鍵字的含義是明確且具體的，即指代當前對象；細心的童鞋發現了 當前對象 中"當前" 這兩個字；說明這個 this 是在某種相對情況下才成立的。
由于其運行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它可以是全局對象、當前對象或者任意對象，這完全取決于函數的調用方式。JavaScript 中函數的調用有以下幾種方式：作為對象方法調用，作為函數調用，作為構造函數調用，和使用 apply 或 call 調用。下面我們將按照調用方式的不同，分別討論 this 的含義。
作為函數調用
作為對象方法調用
作為構造函數調用
使用 apply 或 call 調用
別急，咱一個蘿卜一個坑，帶你入坑以后，你就恍然大悟了。
作為函數調用廢話少說，上個菜?。?！
{% highlight ruby %}
function example(){
this.n = "hello world !";
console.log(this.n);
console.log(this);
}
example(); // hello world ! Window
{% endhighlight %}
很顯然，調用 example(); 時，輸出了 "hello world !" 還有 Window;這時候說它是全局對象好像不具備什么說服力；咱換個姿勢。
{% highlight ruby %}
var n = "hello world !";
function example(){
console.log(this.n);
}
example(); // hello world !
{% endhighlight %}
你瞧，又是 " hello world ! ",不急，咱有一千種姿勢等你來解鎖；再換。
{% highlight ruby %}
var n = "hello world !";
function example(){
this.n = 0;
}
example();
console.log(n); // 0 !
{% endhighlight %}
果然是一輛 "公交車" !!!
作為對象方法調用{% highlight ruby %}
var name="Akita";
var dogs={
name:"Collie",
showName:function(){
console.log(this.name);
}
}
dogs.showName(); //輸出 Collie
var otherName=dogs.showName;
otherName(); //輸出 Akita
{% endhighlight %}
快來看，當執行 dogs.showName(); 時，輸出 Collie (牧羊犬),說明這個時候的 This 是指向 dogs 這個對象的；
而當我們嘗試把 dogs.showName 賦給 otherName 時，我們回頭想想這個 showName() 是做什么用的，很顯然，輸出它函數的執行環境所指向對象的 name，而此時 otherName 變量相當于 Window 對象的一個屬性，因此 otherName() 執行的時候相當于 window.otherName(),即 window 對象調用 otherName 這個方法，所以 this 關鍵字指向 window;所以就會輸出 Akita（秋田犬）。
作為構造函數調用{% highlight ruby %}
function example(){
this.n = "hello world !";
}
var other = new example();
console.log(other.n); //hello world !
{% endhighlight %}
快來看，我們為 example 這個函數 new(構造)了一個新的對象 other,那么 this 就會指向 other 這個對象，所以就會輸出 "hello world !"。
使用 apply 或 call 調用{% highlight ruby %}
var n = "hello world!";
function example(){
console.log(this.n);
}
var o={};
o.n = "hey~";
o.m = example;
o.m.apply();//hello world!
{% endhighlight %}
來看看這行代碼，當apply()的參數為空時，就是沒有對象去替換掉當前的對象，所以默認調用全局對象。因此，這時會輸出"hello world!"，證明this指的是全局對象。
那么試試給apply（）指定一個對象。
{% highlight ruby %}
var n = "hello world!";
function example(){
console.log(this.n);
}
var o={};
o.n = "hey~";
o.m = example;
o.m.apply(o);//hey~
{% endhighlight %}
此時輸出了"hey~",說明對象替換成功，this 指向了 o 這個對象。
本文介紹了 JavaScript 中的 this 關鍵字在各種情況下的含義，雖然這只是 JavaScript 中一個很小的概念，但借此我們可以深入了解 JavaScript 中函數的執行環境，才能充分發揮 JavaScript 的特點，才會發現 JavaScript 語言特性的強大。 該文章部分知識網絡整理文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91288.html
摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...
摘要：箭頭函數沒有自己的值，箭頭函數中所使用的來自于函數作用域鏈。使用箭頭函數打印對于內層函數，它本身并沒有值，其使用的來自作用域鏈，來自更高層函數的作用域。 《JavaScript 深入淺出》系列： JavaScript 深入淺出第 1 課：箭頭函數中的 this 究竟是什么鬼？ JavaScript 深入淺出第 2 課：函數是一等公民是什么意思呢？ 普通函數與箭頭函數 普通函數指的是...
摘要：也就是說當返回的函數作為構造函數的時候，時指定的值會失效，但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數的。 JavaScript深入系列第十一篇，通過bind函數的模擬實現，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數...
摘要：深入系列第七篇，結合之前所講的四篇文章，以權威指南的為例，具體講解當函數執行的時候，執行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執行上下文棧中講到，當代碼執行一段可執行代碼時，會創建對應的執行上下文。 JavaScript深入系列第七篇，結合之前所講的四篇文章，以權威指南的demo為例，具體講解當函數執行的時候，執行上下文棧、變量對象、作用域鏈是如何變化的。 前言 在《Jav...
摘要：深入系列第十二篇，通過的模擬實現，帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂，我們在模擬之前，先看看實現了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現，帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...
閱讀 2720·2021-10-12 10:12
閱讀 2345·2021-09-02 15:41
閱讀 2577·2019-08-30 15:55
閱讀 1409·2019-08-30 13:05
閱讀 2446·2019-08-29 11:21
閱讀 3542·2019-08-28 17:53
閱讀 3037·2019-08-26 13:39
閱讀 808·2019-08-26 11:50
