捉摸不透的this到底是什么？

psychola 發布于2019-08-26 10:40 / 1645人閱讀

摘要：前言中的重中之重，也是在面試中被問得最多的問題，在這里到底是什么我也時常疑惑于此，特用此文來整理思路理解并方便日后回顧。是什么看調用并轉換例子是看調用，是全局定義函數，掛載在對象上，所以是。

前言

JS中的重中之重，也是在面試中被問得最多的問題，在這里this到底是什么？我也時常疑惑于此，特用此文來整理思路理解并方便日后回顧。

函數的調用

JS（ES5）里面有三種函數調用形式：

func(p1, p2) //等價于func.call(undefined, p1, p2)
obj.child.method(p1, p2) //等價于obj.child.method.call(obj.child, p1, p2)
func.call(context, p1, p2)

把所有的調用轉換成call的形式后，this指的就是call后面的第一個參數。
特別注意，全局定義的函數轉換成call的形式后，雖然第一個參數為undefined，但是由于全局定義的函數都是掛載到window/global對象上的，所以this會指向window/global。

this是什么？

看調用并轉換

例子1

 function showName(){
     console.log(this); //this是window
 }
showName();//showName.call(undefined)

看調用，showName是全局定義函數，掛載在window對象上，所以this是window。

例子2

var name="hello window!";
function testName () {
    var name="hello this!";
    console.log(this.name);
}
testName();//testName.call(undefined)

為什么log出來的不是"hello this!"而是"hello window!"呢？
同樣，testName也是掛載在window上的，所以testName函數在調用時this是window，
所以打出來的自然是window.name，也就是全局變量name的值"hello window!"而不是"hello this!"。

例子3

var obj={
    a:"哈哈哈",
    b:function(){
        var a="嘿嘿嘿";
        console.log(this.a);//"哈哈哈"
    }
};
obj.b();//obj.b.call(obj)

那么以上代碼為什么會打出"哈哈哈"呢？
顯然，這里的this是指obj，也就是會去找obj.a，所以打出的就是"哈哈哈"啦。

總結

fn()            this=>window/global
obj.fn()        this=>obj
fn.call(xxx)    this=>xxx
fn.apply(xxx)   this=>xxx
fn.bind(xxx)    this=>xxx
new Fn()        this=>新的對象
fn = () =>{}    this=>外面的this

方法：
1.看源碼中對應的函數是怎么被 call 的（這是最靠譜的辦法）
2.看文檔
3.console.log(this)

GPU云服務器云服務器前端到底是什么云計算到底是什么 python到底是什么 php到底是什么

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

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

令人捉摸不透的云計算:像霧像雨又像風

摘要：據預測，到年，大多數的企業應用將被遷移到云中。在云計算的霧期更需要對云計算產業有一個清醒的認識，不要在最后隨著霧散去自己也隨霧而去。從概念開始逐漸轉為應用落地，各企業紛紛加入到云計算浪潮，國家也在大力扶植云計算產業。據預測，到2020年，大多數的企業應用將被遷移到云中。與此同時，越來越多的應用開發商也將把應用開發、測試平臺遷移到云中。　　　　專家表示，以云計算為代表的新型計算機模式未來將成...

VishKozus 2019-04-25 16:49 評論0 收藏0
JavaScript 的This綁定方式導圖

摘要：本文是對加深對的理解一文的導圖版翻譯中的是一個捉摸不透的東西，它很喜歡變化，很詭異。寫在后面的幾種綁定規則，歸根結底，的套路就是關于幾種模式的等價變換形式，知乎上面有大神解答，猛戳這最后是全圖附上思維導圖的下載鏈接去有道云筆記下載本文是對《加深對 JavaScript This 的理解》一文的導圖版翻譯 JS中的this是一個捉摸不透的東西，它很喜歡變化，很詭異。擁抱變化，接收詭異...

lbool 2019-08-20 18:05 評論0 收藏0
再記面向對象

摘要：實例對象與構造函數的原型聯系是在創建實例時確定的，當創建后更改原型對象并不改變之前創建的實例所關聯的原型對象，新創建的使用新的原型對象。再記面向對象函數和對象的聯系先理一下函數的功能：創建：可以通過字面量創建可以賦值給變量、數組作為成員和其他的對象作為屬性作為函數的參數作為返回值自身可以添加屬性在上面列出的函數功能對象皆具有詳細函數介紹為什么介紹函數？因為閉...

mochixuan 2019-08-22 16:28 評論0 收藏0
javascript的this的理解

摘要：的關鍵字總是讓人捉摸不透，關鍵字代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，因為函數的調用場景不同，的指向也不同。其實只要理解語言的特性就很好理解。個人對中的關鍵字的理解如上，如有不正，望指正，謝謝。 javascript的this關鍵字總是讓人捉摸不透，this關鍵字代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，因為函數的調用場景不同，this的指向也不...

jimhs 2019-08-21 10:56 評論0 收藏0
現代JS名詞概念系列——函數的純潔性【龜速翻譯】

摘要：原文函數的純潔性純函數非純函數副作用純函數一個函數返回的值只取決于他輸入的值，并且沒有副作用，那這個函數就是純函數。因此，純函數無法對它的父作用域作出任何修改。更多關于函數純潔性的資料原文：Glossary of Modern JavaScript Concepts: Part 1 函數的純潔性：純函數、非純函數、副作用純函數一個函數返回的值只取決于他輸入的值，并且沒有副作用，那...

you_De 2019-08-21 16:42 評論0 收藏0