国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript 中 this 的指向問題

DTeam / 2382人閱讀

摘要：首發(fā)個人博客中的，大家都用過。箭頭函數(shù)，詞法作用域中的簡單的說，箭頭函數(shù)中的，會綁定到函數(shù)外也就是上一層作用域中的，函數(shù)外的指向哪，箭頭函數(shù)中的就指向哪。

首發(fā)個人博客

JavaScript 中的 this ，大家都用過。但是它到底指向哪里呢？今天在閱讀 《你不知道的JavaScript (上卷)》再結合自己平時看的博客，對它又有了新的認識，在此來做個小結，再碰到 this ,就再也不用擔心不知道它指向哪里了。
與調(diào)用位置有關，而與定義位置無關

以下示例（在瀏覽器端運行）

function sayHi(){
    var hi = 1;
    console.log(this.hi);
}

var hi = 2;

var obj = {
    hi : 3,
    sayHi : sayHi
}

// output
sayHi(); // 2
obj.sayHi(); // 3

從上述代碼的執(zhí)行結果我們可以看出，直接調(diào)用 sayHi() 函數(shù)，它輸出的 this.hi 不指向函數(shù)體內(nèi)自己定義的 hi 變量，也就是說，this 的指向與詞法作用域無關，這也是剛接觸 JavaScript的同學常犯的一個錯誤（包括我自己），認為 this.xx 就指向函數(shù)體里面定義的變量 xx。sayHi函數(shù)的只定義了一次，但obj.sayHi() 與 sayHi() 的輸出結果不一樣，也恰恰證明了 函數(shù)體內(nèi)this的指向與函數(shù)定義的位置無關，而與函數(shù)被調(diào)用的位置有關，至于為什么輸出結果不一樣，在下文會講到。

this 的綁定規(guī)則 默認綁定

默認綁定比較常見，表現(xiàn)形式就是在全局作用域中獨立調(diào)用，如上文中的 sayHi()，這種直接調(diào)用方式函數(shù)體內(nèi)的 this 就應用了默認綁定規(guī)則，默認綁定有以下兩種情況。

在嚴格模式下（指在函數(shù)聲明的過程中，處在嚴格模式，而不是函數(shù)調(diào)用處于嚴格模式），函數(shù)體內(nèi) this 綁定到 undefined

在非嚴格模式下，函數(shù)體內(nèi) this 指向全局對象 window 

/***** 以下例子為處在嚴格模式下 *****/
function fn1(){
    "use strict"
    console.log(this);
}

fn1(); // undefined

/***** 以下例子處于非嚴格模式下被調(diào)用 *****/
function fn2(){
    console.log(this);
}

fn2(); // window

function fn3(){
    console.log(this);
}

/*
 * 這也是在非嚴格模式下被調(diào)用
 * 因為在函數(shù)定義時沒有用嚴格模式
 */
"use strict"
fn3(); // window
隱式綁定

隱式綁定的常見形式為 obj.fn()，若obj對象中有 fn 這個方法（fn可以在別處定義，但必須被添加到obj中作為obj的一個屬性方法），那么 fn 中的 this 就指向 obj 對象，如最開始代碼中 obj.sayHi() 輸出3，就是因為sayHi中的this隱式綁定到obj對象。(個人覺得默認綁定中綁定到window對象時也可以歸類為隱式綁定，因為在全局對象中，非嚴格模式且不考慮ES6的話，所有的全局變量都自動成為window的屬性)。來看個具有迷惑性的例子(出自于原書)

function foo() { 
 console.log( this.a );
}
var obj = { 
 a: 2,
 foo: foo 
};
var bar = obj.foo; // 函數(shù)別名！
var a = "oops, global"; // a 是全局對象的屬性
bar(); // "oops, global"

這是個具有迷惑性的例子，obj 對象有函數(shù) foo 這個方法，后面又在全局作用域中，bar 引用了這個方法，最后再調(diào)用 bar。我們只需要關注函數(shù)最后被調(diào)用的位置，它是在全局作用域中被多帶帶調(diào)用的，所以還是為默認綁定，指向 window

顯式綁定

顯示綁定就比較簡單了，用 call，apply，bind方法,都會綁定函數(shù)中的this到傳入的參數(shù)對象中

new 綁定

所謂new綁定就是在用構造函數(shù)new一個對象的時候，其中的this指向生成的對象。這就完了嘛？還沒有哦。

箭頭函數(shù)，詞法作用域中的this

簡單的說，箭頭函數(shù)中的this，會綁定到函數(shù)外（也就是上一層作用域中的this），函數(shù)外的this指向哪，箭頭函數(shù)中的this就指向哪。(代碼出自于原書)

function foo() {
    // 返回一個箭頭函數(shù)
    return (a) => {
        //this 繼承自 foo()
        console.log( this.a ); 
    };
}

var obj1 = { 
    a:2
};

var obj2 = { 
    a:3
};

var bar = foo.call( obj1 );
/*
 * foo先綁定this到obj1對象上，所以foo內(nèi)的this指向obj1,
 * 返回的箭頭函數(shù)根據(jù)詞法作用域規(guī)則，繼承了外部foo的this，
 * 所以箭頭函數(shù)中的this指向obj1
 */


bar.call( obj2 ); // 2, 不是 3 ！
/*
 * 箭頭函數(shù)中this一但綁定，不可更改
 * 此時還是指向obj1
 * 所以輸出的是 obj1.a => 2
 */
綁定的優(yōu)先級

new > 顯示 > 隱式 > 默認

上述知識來自《你不知道的JavaScript(上卷)》

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98320.html

相關文章

  • JavaScript 之 this 指向問題

    摘要：一等公民對象函數(shù)在提指向問題之前，肯定是有必要說明一等公民對象，既然是對象，那么就能像普通的值一樣傳遞。在普通瀏覽器中指向的是在中指向的是全局對象全局環(huán)境中或者模塊環(huán)境中。即指向或者的第一個參數(shù)。第二條規(guī)則，指向的不是原文鏈接 1. 一等公民對象——函數(shù) 在提t(yī)his指向問題之前，肯定是有必要說明一等公民對象function ，既然function是對象，那么就能像普通的值一樣傳遞。嗯...

    Alan 評論0 收藏0

  • 我對JavaScript中this的一些理解

    摘要：匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數(shù)的指向為什么是作為對象方法的調(diào)用，指向該對象當函數(shù)作為某個對象的方法調(diào)用時，就指這個函數(shù)所在的對象。 因為日常工作中經(jīng)常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。 這段時間翻閱了一些書籍也查閱了網(wǎng)上一些資料然后結合自己的經(jīng)驗，為了能讓自...

    focusj 評論0 收藏0

  • 關于javascript 中的高級定時器的若干問題

    摘要：閉包閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù)當某個函數(shù)被調(diào)用時，會創(chuàng)建一個執(zhí)行環(huán)境及相應的作用域鏈。要注意通過第句聲明的這個方法屬于構造函數(shù)生成的對象，而不屬于構造函數(shù)的變量對象，也就是說，并不存在于作用域鏈中。 看到評論里有仁兄建議我試試箭頭函數(shù)，真是受寵若驚，本來寫這篇文章也只是想記錄寫要點給自己日后看的。今天早上看到一篇總結javascript中this的文章JavaScr...

    zr_hebo 評論0 收藏0

  • JavaScript 的 this 指向問題深度解析

    摘要：而改變了這種狀態(tài)，雖然定義的類用運算符得到的仍然是，但它不能像普通函數(shù)一樣直接調(diào)用同時，中定義的方法函數(shù)，也不能當作構造函數(shù)用來調(diào)用。而在中，用調(diào)用一個構造函數(shù)，會創(chuàng)建一個新對象，而其中的就指向這個新對象。 JavaScript 中的 this 指向問題有很多博客在解釋，仍然有很多人問。上周我們的開發(fā)團隊連續(xù)兩個人遇到相關問題，所以我不得不將關于前端構建技術的交流會延長了半個時候討論 ...

    liuchengxu 評論0 收藏0

  • 輕松搞定javascript中this的指向

    摘要：調(diào)用在中，通過的形式調(diào)用一個構造函數(shù)，會創(chuàng)建這個構造函數(shù)實例，而這個實例的指向創(chuàng)建的這個實例。如下例所示，在構造函數(shù)內(nèi)部使用并沒有改變?nèi)肿兞康闹怠ｏ@然，箭頭函數(shù)是不能用來做構造函數(shù)。 　　關于javascript中this指向的問題，現(xiàn)總結如下，如有不正確，歡迎指正。 　　javascript中，this的指向并不是在函數(shù)定義的時候確定的，而是在其被調(diào)用的時候確定的。也就是說，函數(shù)的...

    shinezejian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<