JavaScript之this

Yang_River 發(fā)布于2019-08-23 12:27 / 651人閱讀

摘要：的指向只和函數(shù)的調(diào)用位置方式有關(guān)，和函數(shù)聲明的位置無關(guān)。全局瀏覽器全局這是中的默認(rèn)綁定，在全局上下文中，會默認(rèn)綁定到全局對象。同時上面四條綁定規(guī)則在箭頭函數(shù)中不適用，使得的查找更可控。

本文共 1065 字，讀完只需 4 分鐘

概述

在 JAVA 中，this 的概念很透徹，就是指向當(dāng)前對象（方法和屬性的持有者），在編譯的時候就能確定 this 指代，而由于 JavaScript 中 this 是動態(tài)綁定，或稱為運行期綁定的，在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了 this 的值，所以在 JS 中不能在定義時決定地定義 this 是哪個上下文對象。

this 的指向只和函數(shù)的調(diào)用位置（方式）有關(guān)，和函數(shù)聲明的位置無關(guān)。

本文就從 this 應(yīng)用場景調(diào)用方式的角度，解析 this 的用法。

首先，要知道，this 的作用是什么？

函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運行上下文。

一、全局上下文

在全局上下文中，this 指向全局對象，在瀏覽器中指向 window，在 NodeJs 中指向 global。

var a = "全局";
console.log(this)  // 瀏覽器：window
console.log(this)  // nodejs：global
console.log(this.a)  // "全局"

這是 JS 中的默認(rèn)綁定，在全局上下文中，this 會默認(rèn)綁定到全局對象。

二、函數(shù)聲明

在非嚴(yán)格模式下，未加關(guān)鍵字 var 聲明的變量，會成為全局對象下的屬性，所以，此時
在嚴(yán)格模式下，this 將保持他進(jìn)入執(zhí)行上下文時的值，所以下面的 this 將會默認(rèn)為 undefined。

function foo() {
    "use strict";
    console.log(this);
}

foo();  // undefined 嚴(yán)格模式

上述也是 JS 中 this 的默認(rèn)綁定，在函數(shù)定義中，函數(shù)中的 this 會默認(rèn)綁定到全局對象或者 undefined。

當(dāng)函數(shù)作為對象里的方法被調(diào)用時，函數(shù)中 this 是調(diào)用該函數(shù)的對象。

function foo() {
    console.log("foo");
}

var obj = {
    this.bar = "bar";
    this.foo = foo;
}

obj.foo(); // "foo"

在調(diào)用位置，是 obj 對象調(diào)用了 foo 函數(shù)，此時 this 就指向了 obj 對象。

function foo() {
    console.log(this.bar);
}

var obj2 =  {
    bar: "2",
    foo: foo
}

var obj1 = {
    bar: "1",
    obj2: obj2
}

obj1.obj2.foo()  // "2";

這是 JS 中 this 的隱式綁定，this 會隱式綁定到調(diào)用的最近一層上下文對象。

三、call & apply

其實在函數(shù)中，函數(shù)正確的調(diào)用應(yīng)該是用 call, apply 函數(shù)的形式。

function foo() {
    console.log(this.bar);
}

let obj = {
    bar: "1",
    foo: foo
}

obj.foo();  // `.` 點調(diào)用其實是語法糖

foo.call(obj)  // 1 正確的姿勢
foo.apply(obj) // 1

這是 JS 中 this 的顯式綁定，函數(shù)通過從 call 和 apply 函數(shù)可以顯式指定函數(shù)的調(diào)用對象。

ES5 提供了一個 bind()方法：

let obj2 = {
    a: 2
}

let foo = function () {
    console.log(this.a);
}

let bar = foo.bind(obj2);
bar() // 2;

就是 JS 中 this 的硬綁定，bind() 函數(shù)會返回一個指定了調(diào)用對象的函數(shù)，返回的函數(shù)的被指定了 this 且 this 無法改變。

四、構(gòu)造函數(shù)

當(dāng)函數(shù)加上關(guān)鍵字 new 后，函數(shù)會變成一個構(gòu)造函數(shù)，此時構(gòu)造函數(shù)中的 this 指向即將創(chuàng)建的對象實例，同時對象實例會關(guān)聯(lián)到構(gòu)造函數(shù)的原型對象 prototype 上。

function Foo() {
    this.a = 3;
}

var obj = new Foo();

obj.a // 3

五、箭頭函數(shù)

ES6 中，提供了函數(shù)定義的語法糖，讓定義函數(shù)變得更簡潔（沒有 arguments, 沒有原型）。同時上面四條綁定規(guī)則在箭頭函數(shù)中不適用，使得 this 的查找更可控。

// 一般函數(shù)：
var a = 1;
var obj = {
  a: 2,
  say: function() {
    console.log(this.a)
  }
}
obj.say();  // console.log 打印值為 2

// 箭頭函數(shù)
var a = 1;
var obj = {
  a: 2,
  say: () => {
    console.log(this.a)
  }
}
obj.say(); // 1   !!!

由于箭頭函數(shù)定義時， obj {} 不是執(zhí)行上下文，say 變量引用的箭頭函數(shù)，其 this 是父級執(zhí)行上下文，也就是全局上下文，所以 this.a 就是全局變量 a: 1;

在箭頭函數(shù)中，this 與封閉詞法上下文的 this 保持一致，this 被永久綁定到了它最近一層非箭頭函數(shù)的 this，而與函數(shù)的調(diào)用位置無關(guān)。

總結(jié)

在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了 this 的值，但最終都指向了調(diào)用了它的那個上下文對象。

歡迎關(guān)注我的個人公眾號“謝南波”，專注分享原創(chuàng)文章。

GPU云服務(wù)器云服務(wù)器 javascript的this javaScript中的this javascript中this詳解 this[]

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98533.html

發(fā)表評論

登陸后可評論

0條評論

Yang_River

男|高級講師

我要關(guān)注我要私信

TA的文章

虛擬主機技術(shù)是什么-什么是虛擬主機？

閱讀 3994·2021-09-22 16:03
如何登陸云主機-怎么登錄云主機？

閱讀 5344·2021-09-22 15:40
??大佬都在學(xué)什么？Python爬蟲分析C站大佬收藏夾，跟著大佬一起學(xué)，你就是下一個大佬??!

閱讀 1197·2021-09-06 15:02
web前端編碼規(guī)范整合

閱讀 878·2019-08-30 15:53
微信小程序中圖片上傳阿里云Oss

閱讀 2231·2019-08-29 15:35
大話-node真的是單線程嗎？

閱讀 1116·2019-08-23 18:22
使用Proxy實現(xiàn)雙向綁定

閱讀 3345·2019-08-23 16:06
JavaScript之this

閱讀 652·2019-08-23 12:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript之this

相關(guān)文章

JavaScript深入之執(zhí)行上下文

JavaScript深入之bind的模擬實現(xiàn)

JavaScript深入之new的模擬實現(xiàn)

JavaScript深入之繼承的多種方式和優(yōu)缺點

**學(xué)習(xí)JavaScript之this,call,apply**

JavaScript深入之創(chuàng)建對象的多種方式以及優(yōu)缺點

發(fā)表評論

0條評論

Yang_River

男|高級講師

TA的文章

虛擬主機技術(shù)是什么-什么是虛擬主機？

如何登陸云主機-怎么登錄云主機？

??大佬都在學(xué)什么？Python爬蟲分析C站大佬收藏夾，跟著大佬一起學(xué)，你就是下一個大佬??!

web前端編碼規(guī)范整合

微信小程序中圖片上傳阿里云Oss

大話-node真的是單線程嗎？

使用Proxy實現(xiàn)雙向綁定