我對JavaScript中this的一些理解

focusj 發布于2019-08-23 15:23 / 2094人閱讀

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。

因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。
這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自己更好的理解this，進而總結一篇文章。

this 是什么

this是 JavaScript 語言的一個關鍵字。它是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。
實際是在函數被調用時才發生的綁定，也就是說this具體指向什么，取決于你是怎么調用的函數。

this 指向的四種情況

這四種情況基本涵蓋了JavaScript中常見的this指向問題

1. 全局的函數調用，this指向window

var a = 1;
function fn() {
   console.log(this.a);
}
fn();  // 1

這種情況下的this其實就是window對象，這個很好理解。
但是還有一種情況，就是匿名函數的this也會指向window。

var a= "window";
var obj={a: "object"}
obj.fn=function(){
    console.log(this.a);//Object
    +function(){
        console.log(this.a)//window
    }()
}
obj.fn()

匿名函數的執行環境具有全局性，因此它的this對象通常指向windows。
如果對此有疑惑，可以看知乎上的答案：知乎 - 匿名函數的this指向為什么是window?

2. 作為對象方法的調用，this指向該對象

var a ="window"
var obj={
  a: "object",
  fn: function(){
    console.log(this.a);
  }
}

obj.fn(); // object

當函數作為某個對象的方法調用時，this就指這個函數所在的對象。

3. 作為構造函數調用，this指向實例

function fn() {
　this.x = 1;
}
var obj = new fn();
console.log(obj.x) // 1

構造函數中的this，在通過new之后會生成一個新對象，this就指這個新對象。
對new有疑問的話，可以看冴羽的博客 JavaScript深入之new的模擬實現

4. 使用call/apply/bind調用, this指向第一個參數

var obj1={
  a: "boj1"
}
var obj2={
  a: "obj2"
}
var obj3={
  a: "obj3"
}
function fn(){
  console.log(this.a);
}
// apply
fn.apply(obj1);// "obj1"
// call
fn.call(obj2);// "obj2"
// bind
var fnBind= fn.bind(obj3);
fnBind();// "obj3"

call/ apply / bind 都有一個共同的特點，就是改變this的指向，使用這種方法可以把別人的方法拿過來用到自己身上。

第一個參數為 null 的時候，視為指向 window.

var a="window"
var obj={
  a: "boj",
  fn: function (){
    console.log(this.a);
  }
}
obj.fn.call(null);// "window"

在這里如果是obj.fn()調用的fn()方法，this應該指向obj沒錯。
但是因為call(null)的存在，改變了指向，所以this指向了window。

深入理解

正因為比較難理解，所以this指向也是面試時最容易遇到的問題，比如下面這道我曾遇到的一個面試題：

var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn){
    fn();
    arguments[0]();
  }
};
obj.method(fn, 1);

在這道題里，不僅考察了對this熟悉程度，還考察了函數的傳參形式、作用域、以及arguments這種特殊的數組的理解。
只有真正理解了這些才能正確的判斷this究竟指向了誰。
所以，只有對JavaScript中的各項知識點深入理解，才會對this的概念越加清晰。

參考：
阮一峰 - Javascript 的 this 用法
前端開發博客 - 深入理解JavaScript this

文章僅日常學習工作所得，歡迎大家訪問我的blog。

GPU云服務器云服務器 javascript中this詳解 javascript的this vps日常維護中的一些要點總結 javaScript中的this

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

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

我對JavaScript對象的理解

摘要：通過這種操作，就有了構造函數的原型對象里的方法。你也看到了，就是一個普通對象，所以這種寄生式繼承適合于根據已有對象創建一個加強版的對象，在主要考慮通過已有對象來繼承而不是構造函數的情況下，這種方式的確很方便。原文地址在我的博客, 轉載請注明出處，謝謝！標簽： [es5對象、原型, 原型鏈, 繼承] 注意（這篇文章特別長）這篇文章僅僅是我個人對于JavaScript對象的理解，并不是...

roadtogeek 2019-08-21 16:59 評論0 收藏0
對Javascript 類、原型鏈、繼承的理解

摘要：因為我們用這個函數來構造對象，所以我們也把稱作構造函數。所以通過定義構造函數，就相當于定義了一個類，通過關鍵字，即可生成一個實例化的對象。一、序言 ??和其他面向對象的語言（如Java）不同，Javascript語言對類的實現和繼承的實現沒有標準的定義，而是將這些交給了程序員，讓程序員更加靈活地（當然剛開始也更加頭疼）去定義類，實現繼承。（以下不討論ES6中利用class、exten...

sevi_stuo 2019-08-22 17:36 評論0 收藏0
用函數式編程對JavaScript進行斷舍離

摘要：函數式編程一開始我并不理解。漸漸地，我熟練掌握了使用函數式的方法去編程。但是自從學習了函數式編程，我將循環都改成了使用和來實現。只有數據和函數，而且因為函數沒有和對象綁定，更加容易復用。在函數式的中，這些問題不復存在。譯者按: 當從業20的JavaScript老司機學會函數式編程時，他扔掉了90%的特性，也不用面向對象了，最后發現了真愛啊！！！原文: How I rediscov...

dkzwm 2019-08-21 16:48 評論0 收藏0
JavaScript中的this淺談

摘要：在函數中調用時指向調用函數的對象，調用函數的在不同情況下有直接調用，此時函數內部的指向全局對象作為對象的方法，此時指向該對象構造函數，此時指向構造的實例對象改變指向是語言的一個關鍵字。但是有一個總的原則，那就是指的是，調用函數的那個對象。 this在全局中調用時指向的是全局對象。this在函數中調用時指向調用函數的對象，調用函數的在不同情況下有 1.直接調用，此時函數內部的this指向...

YJNldm 2019-08-21 17:52 評論0 收藏0
ES6部分方法點評（一）

一直以來，我對ES6都不甚感興趣，一是因為在生產環境中使用ES5已是處處碰壁，其次則是只當這ES6是語法糖不曾重視。只是最近學習react生態，用起babel來轉換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學習。這一學習，便覺得這語法糖實在是甜，忍不住嘗鮮，于是記錄部分自覺對自己有用的方法在此。箭頭函數(Arrow Functions) 箭頭函數是一個典型的語法糖，即創造了一種...

weakish 2019-08-19 18:14 評論0 收藏0