JavaScript之this

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

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

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

概述

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

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

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

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

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

一、全局上下文

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

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

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

二、函數(shù)聲明

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

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

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

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

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

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

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

obj.foo(); // "foo"

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

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 會(huì)隱式綁定到調(diào)用的最近一層上下文對(duì)象。

三、call & apply

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

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

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

obj.foo();  // `.` 點(diǎn)調(diào)用其實(shí)是語(yǔ)法糖

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

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

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

let obj2 = {
    a: 2
}

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

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

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

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

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

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

var obj = new Foo();

obj.a // 3

五、箭頭函數(shù)

ES6 中，提供了函數(shù)定義的語(yǔ)法糖，讓定義函數(shù)變得更簡(jiǎn)潔（沒(méi)有 arguments, 沒(méi)有原型）。同時(shí)上面四條綁定規(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ù)定義時(shí)， obj {} 不是執(zhí)行上下文，say 變量引用的箭頭函數(shù)，其 this 是父級(jí)執(zhí)行上下文，也就是全局上下文，所以 this.a 就是全局變量 a: 1;

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

總結(jié)

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98533.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Yang_River

男|高級(jí)講師

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

TA的文章

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

閱讀 4075·2021-09-22 16:03
如何登陸云主機(jī)-怎么登錄云主機(jī)？

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

JavaScript之this

相關(guān)文章

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

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

Yang_River

男|高級(jí)講師

TA的文章

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

如何登陸云主機(jī)-怎么登錄云主機(jī)？

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

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

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

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

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