細說 Javascript 函數篇（二） : this 的工作機制

ZoomQuiet 發布于2019-08-21 12:16 / 2442人閱讀

摘要：與其他編程語言相比，對的使用是一套完全不同的機制。在五種情況下的值是各有不同的。調用一個函數時在這里，同樣指向全局對象。此時在函數內，指向新建的對象。盡管，晚綁定初看上去是個不好的決定，但實際上這是原型式繼承工作的基礎。

與其他編程語言相比，Javascript 對 this 的使用是一套完全不同的機制。this 在五種情況下的值是各有不同的。

全局作用域下

this;

當在全局作用域中使用 this,它指向全局對象。
這里詳細介紹下全局對象：

全局對象(Global object) 是在進入任何執行上下文之前就已經創建了的對象；
這個對象只存在一份，它的屬性在程序中任何地方都可以訪問，全局對象的生命周期終止于程序退出那一刻。
全局對象初始創建階段將 Math、String、Date、parseInt 作為自身屬性，等屬性初始化，同樣也可以有額外創建的其它對象作為屬性（其可以指向到全局對象自身）。例如，在 DOM 中，全局對象的 window 屬性就可以引用全局對象自身。
所以在 console 內輸入 window 和 this.window 是一樣的。

調用一個函數時

foo();

在這里，this 同樣指向全局對象。

調用一個方法時

test.foo();

在這個例子中，this 將會指向 test 對象。

調用一個構造函數時

new foo();

一個函數在被調用時和關鍵字 new 一起使用，我們稱之為構造函數。此時在函數內，this 指向新建的對象。

顯式設置時

function foo(a, b, c) {}//

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

當使用 Function.prototype 的 apply 和 call 方法時，this 的值為顯式設置為該方法的第一個參數。
因此，不同于調用一個函數時的規則，上例中 this 指向了 bar。
這里介紹下 call 和 apply 方法：

  call 方法:

  語法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

  定義：調用一個對象的一個方法，以另一個對象替換當前對象。

  apply 方法：

  語法：apply([thisObj[,argArray]])

  定義：應用某一對象的一個方法，用另一個對象替換當前對象。

在這里我們要注意一點，在對象的字面聲明時，this 不能用來指向對象本身。如下：

var obj = {me: this}

這里，this 不會指向 obj，this 的應用只限于以上五種情形。

總結

盡管上述情形在大多時候是有意義的，但是第二種情形（即調用一個函數時）的 this 實際上是很少有用途的，這被認為是 Javascript 設計上的另一個錯誤。

Foo.method = function() {
    function test() {
        // this is set to the global object
    }
    test();
}

根據我們上面所述，這里的 this 將會指向全局對象，而不是 Foo 函數。
為了在 test 中獲得指向 Foo 的途徑，我們需要在 method 內部創建一個局部變量指向 Foo。

Foo.method = function() {
    var that = this;
    function test() {
        // Use that instead of this here
    }
    test();
}

that 只是普通的變量名，但是它經常被用來指向外部的 this。
還有一個比較有意思的地方與函數別名相關，即將一個方法賦值給一個變量時。

var test = someObject.methodTest;
test();

上例中，test 將會被當做一個普通函數看待，所以根據第二種情形（即調用一個函數時），其內部的 this 將會指向全局變量，而不是 someObject。
盡管，this 晚綁定初看上去是個不好的決定，但實際上這是原型式繼承工作的基礎。

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

此時，當 method 被調用時，它將指向 Bar 的實例對象。

參考

http://bonsaiden.github.io/JavaScript-Garden/#function.this

云服務器 GPU云服務器 javascript的this js中的this機制工作機制 javaScript中的this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87519.html

細說 Javascript 函數篇（一） : 函數聲明和函數表達式

摘要：函數表達式對于函數聲明，函數的名稱是必須的，而對于函數表達式而言則是可選的，因此，就出現了匿名函數表達式和命名函數表達式。這是因為對命名函數處理的機制，函數的名稱永遠在函數內部的作用域中有效。 function 是 Javascript 中的第一類對象，這就意味著函數可以像其他值一樣被傳遞。一個最常見的用法就是將一個匿名函數作為回調函數傳遞到另外一個異步函數中。函數聲明 func...

hizengzeng 2019-08-21 12:16 評論0 收藏0
細說 Javascript 函數篇（五） : ?構造函數

Javascript 中的構造函數與其他語言相比也是不同的。任何通過關鍵字 new 調用的函數都可以當做構造函數。在構造函數體內，this 指向新創建的對象。如果構造函數體內沒有顯示的 return 表達式，那么我們就默認返回 this，也就是新建的對象。 function Foo() { this.bla = 1; } Foo.prototype.test = function()...

sPeng 2019-08-19 14:42 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

摘要：并沒有類繼承模型，而是使用原型對象進行原型式繼承。我們舉例說明原型鏈查找機制當訪問一個對象的屬性時，會從對象本身開始往上遍歷整個原型鏈，直到找到對應屬性為止。原始類型有以下五種型。此外，試圖查找一個不存在屬性時將會遍歷整個原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點，然...

lansheng228 2019-08-19 14:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0