JavaScript this 從此不再疑惑

Barrior 發(fā)布于2019-08-20 17:52 / 3467人閱讀

摘要：是的，始終指向調用對象，調用對象，這個很重要，的靜態(tài)成員是沒有的概念的。所以和，的區(qū)別是返回一個明確的新函數(shù)，和立即執(zhí)行了。

1. 問題引入

function A() {}
A.prototype.fna = function() {
    console.log(this);
}

我的問題是 fna 的 this 是指向哪里的？

var a = new A();
a.fna();  // A {}

var fnt = a.fna;
fnt();  // window {...}

再看我們經(jīng)常遇到的情形

function A() {
    this.name = "A";
}

A.prototype.fna = function() {
    return this.name;
}

function sayName(fn) {
    console.log(fn());
}

var a = new A();
sayName(a.fna); //undefined
sayName(a.fna.bind(a));  //A

這里就是我們平時在寫代碼的時候為什么要調用 bind 函數(shù)來綁定上下文

function A() {
    this.fna = function() {
        console.log(this);
    }
}

A.prototype.getFna = function() {
    return this.fna;
}

function sayContext(fn) {
    fn();
}

var a = new A();
var fna = a.getFna();
sayContext(fna);  //window

為什么會有以上這種情況呢，在 java 中 this 是始終指向調用對象的。是的，始終指向調用對象，調用對象，這個很重要，java 的靜態(tài)成員是沒有 this 的概念的。在 javascript 中 this 只和函數(shù)的執(zhí)行環(huán)境有關。只有三種情況，在瀏覽中 window、調用對象、嚴格模式下的undefined，對應我們開發(fā)者來說能接觸到的就是以上三者，所以我們可以理解為函數(shù)的執(zhí)行環(huán)境就是以上三者。

2. 確定 this 指向

我們如何確定 this 的指向呢，有很多文章介紹 this 確定指向，方式也有很多種，而我是根據(jù)函數(shù)的調用形勢去判斷的，有以下兩個判斷標準。

1 如果函數(shù)的最終調用形式是 fn(); 那么在非嚴格模式下 this 指向 window 對象，在嚴格模式下指向 undefined
2 如果是通過對象調用 o.fn(); 這種形式 this 指向對象 o

是的就這兩個標準，就這么簡單。

3. 通過 call 、apply、bind 深入理解 this

函數(shù)調用原型

fn.call(thisArg, arg1, arg2, ...)
fn.apply(thisArg, [argsArray])
fn.bind(thisArg[, arg1[, arg2[, ...]]])

上面這三個函數(shù)都是用來改變函數(shù)的 this 指向的
1 call 第一個參數(shù)是 fn 中 this 的期望指向，值可以是對象或者 undefined，后面的參數(shù)是要傳遞給 fn 的參數(shù)列表

2 apply 第一個參數(shù)是 fn 中 this 的期望指向，值可以是對象或者 undefined，后面的值是 fn 的參數(shù)，是一個數(shù)組

call 和apply 功能相同，唯一不同的是選擇將參數(shù)以 參數(shù)列表 傳入或者以 數(shù)組 傳入，都可以，可以互換
使用。調用者兩個函數(shù)會立即執(zhí)行 fn，這里是立即執(zhí)行

3 bind 第一個參數(shù)是 fn 中 this 的期望指向，值可以是對象或者 undefined，后面的參數(shù)是要傳遞給 fn 的參數(shù)列表

調用 bind 函數(shù)會返回一個函數(shù)，這個函數(shù)是 fn 的包裝，和 fn 的唯一區(qū)別是綁定了 this，即 this指向明確。所以 bind 和 call、apply，的區(qū)別是 bind 返回一個 this 明確的新函數(shù)，call 和 apply立即執(zhí)行了 fn。

到這里我想 javascript 的 this 已經(jīng)說的很清楚了。

GPU云服務器云服務器從此不再 javascript的this javaScript中的this javascript中this詳解

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

轉載請注明本文地址：http://systransis.cn/yun/83941.html

對Koa-middleware實現(xiàn)機制的分析

摘要：現(xiàn)在我們從實現(xiàn)一個簡易的方法開始探索其中的機制。其中內部的可以將上一個的返回值傳遞給外部。一言以蔽之實現(xiàn)了遞歸調用的方法。當執(zhí)行到的中間件沒有時并且返回的為時逆序執(zhí)行。本文發(fā)布在github.com/ssssyoki,歡迎star,issues共同交流。 Koa是基于Node.js的下一代web開發(fā)框架，相比Express更輕，源碼只有幾百行。與傳統(tǒng)的中間件不同，在Koa 1.x中采...

MageekChiu 2019-08-22 10:50 評論0 收藏0
不再彷徨：完全弄懂JavaScript中的this（譯文總結）

摘要：至于，其只是以數(shù)組的方傳入?yún)?shù)，其它部分是一樣的，如下它們也可用于在中的類繼承中，調用父級構造器。間接調用，調用了父級構造器對比方法和，它倆都立即執(zhí)行了函數(shù)，而函數(shù)返回了一個新方法，綁定了預先指定好的，并可以延后調用。其實this是一個老生常談的問題了。關于this的文章非常多，其實我本以為自己早弄明白了它，不過昨天在做項目的過程中，還是出現(xiàn)了一絲疑惑，想到大概之前在JavaScri...

YanceyOfficial 2019-08-21 10:56 評論0 收藏0
JavaScript prototype 疑惑

摘要：看了高級程序設計中關于對象的介紹，記錄一下對于其中有些地方的疑惑。看了《JavaScript高級程序設計》中關于對象的介紹，記錄一下對于其中有些地方的疑惑。使用構造函數(shù)創(chuàng)建對象時，prototype中如果定義一個屬性指向函數(shù)，在函數(shù)中引用this，為什么this是指向構造函數(shù)而不是prototype對象？試驗： function SuperType() { this.pr...

Half 2019-08-21 17:25 評論0 收藏0
編程界也有修仙秘籍？程序員碼字3年終得《JavaScript 百煉成仙》

摘要：百煉成仙走紅該書于年月出版，作者楊逸飛是一名從事開發(fā)六年的程序員，寫過諸多技術博客。作者在博客上對粉絲提出關于百煉成仙的問題進行了統(tǒng)一回復，該博文持續(xù)占據(jù)熱榜第二，熱度達。剛接觸編程的小伙伴，估計都想過把枯燥無聊的編程教材變成小說讀的念頭，這不，說曹操曹操就來了，真的有程序員用寫修仙小說的...

zzbo 2021-11-22 09:34 評論0 收藏0
深入javascript——無處不在的this

摘要：由于匿名函數(shù)的作用域是全局性的，因此閉包的通常指向全局對象調用返回值為而不是我們預期的，在閉包中函數(shù)作為某個對象的方法調用時，要特別注意，該方法內部匿名函數(shù)的指向的是全局變量。有人的地方就有江湖，有函數(shù)的地方就有this。而this在不同的環(huán)境下，又表現(xiàn)為不同的形式，難免讓人有種此this非彼this的疑惑在java等面向對象的語言中，this指的就是當前對象，而在jav...

Scorpion 2019-08-21 12:27 評論0 收藏0