this第一奧義：

對(duì)于許多剛剛接觸前端的學(xué)者來說，this時(shí)常出現(xiàn)在編程中。雖然知道this用途的強(qiáng)大，但對(duì)于提示的作用并不是過于了解，而今天就讓Damon跟大家說說this在JS中能夠扮演的角色。

前提先知：

對(duì)于在開始講解this之間我們需要知道，從java或者是從PHP等標(biāo)準(zhǔn)語言對(duì)于this的看法來說。大多數(shù)情況下，雖說this能夠使用的場(chǎng)景有許多，但是this作為表示類方法中的當(dāng)前對(duì)象的實(shí)例，是無法使用在方法之外進(jìn)行使用。

函數(shù)調(diào)用：執(zhí)行構(gòu)成函數(shù)主體的代碼：例如，parseInt函數(shù)調(diào)用是’’’parseInt(‘15’)’’’。

調(diào)用的上下文：指 this 在函數(shù)體內(nèi)的值。例如，’’’map.set(‘key’, ‘value’)的調(diào)用上下文是 map。

函數(shù)的作用域：是指在函數(shù)體中可訪問的變量、對(duì)象和函數(shù)的集合。

JS調(diào)用方式：

在就是中使用this的情況就與前文所的有所不同，this在這更多是表示函數(shù)當(dāng)前執(zhí)行上下文，而在js調(diào)用函數(shù)時(shí)常是用一下這些方法：

函數(shù)的調(diào)用：alert('Hello World!')

方法的調(diào)用：console.log('Hello World!')

方法的調(diào)用：console.log('Hello World!')?

隱式調(diào)用: alert.call(undefined, ‘Hello World!’)?

對(duì)于以上的調(diào)用方式，每種調(diào)用類型以自己的方式定義上下文，所以在日常編程中也是容易出現(xiàn)混淆的情況。另外一點(diǎn)就是在嚴(yán)格模式中，調(diào)用函數(shù)會(huì)出現(xiàn)影響上下文的情況。

函數(shù)調(diào)用角色

首先，在我們?nèi)粘＞庉嫷臅r(shí)候，當(dāng)一個(gè)表達(dá)式為函數(shù)接著一個(gè)(，一些用逗號(hào)分隔的參數(shù)以及一個(gè)）時(shí)，函數(shù)調(diào)用被執(zhí)行。在這里我們從日常的比如parseInt(‘18’)能夠看出。

但是我們也是知道函數(shù)調(diào)用表達(dá)式不能是屬性方式的調(diào)用，如 obj.myFunc()，這種是創(chuàng)建一個(gè)方法調(diào)用。再如 [1,5].join(‘,’)不是函數(shù)調(diào)用，而是方法調(diào)用，這種區(qū)別需要記住哈，很重要滴。

下面給大家舉一個(gè)調(diào)用的例子：

在這里我們可以看到，hello(‘World’)是函數(shù)調(diào)用: hello表達(dá)式等價(jià)于一個(gè)函數(shù)，跟在它后面的是一對(duì)括號(hào)以及’World’參數(shù)。

在函數(shù)調(diào)用中的this扮演什么角色？

this 在函數(shù)調(diào)用中是一個(gè)全局對(duì)象，局對(duì)象由執(zhí)行環(huán)境決定。在瀏覽器中，this是 window 對(duì)象。在函數(shù)調(diào)用中，執(zhí)行上下文是全局對(duì)象。

接下來我們通過案例來看下：

在調(diào)用sum(15,16)時(shí)，JS 自動(dòng)將this設(shè)置為全局對(duì)象，在瀏覽器中該對(duì)象是window。當(dāng)this在任何函數(shù)作用域(最頂層作用域:全局執(zhí)行上下文)之外使用，this 表示 window 對(duì)象

嚴(yán)格模式下的函數(shù)調(diào)用 this 扮演什么角色？

this 在嚴(yán)格模式下的函數(shù)調(diào)用中為 undefined。嚴(yán)格模式是在 ECMAScript 5.1中引入的，它提供了更好的安全性和更強(qiáng)的錯(cuò)誤檢查。要啟用嚴(yán)格模式，函數(shù)頭部寫入use strict 即可。啟用后，嚴(yán)格模式會(huì)影響執(zhí)行上下文，this 在常規(guī)函數(shù)調(diào)用中值為undefined。與上述情況2.1相反，執(zhí)行上下文不再是全局對(duì)象。

下面展示下嚴(yán)格模式函數(shù)調(diào)用示例：

當(dāng)multiply(2,5)作為函數(shù)調(diào)用時(shí)，this是undefined。嚴(yán)格模式不僅在當(dāng)前作用域中有效，在內(nèi)部作用域中也是有效的(對(duì)于在內(nèi)部聲明的所有函數(shù)):

‘use strict’被插入到執(zhí)行體的頂部，在其作用域內(nèi)啟用嚴(yán)格模式。因?yàn)楹瘮?shù)concat是在執(zhí)行的作用域中聲明的，所以它繼承了嚴(yán)格模式。單個(gè)JS文件可能包含嚴(yán)格和非嚴(yán)格模式。因此，對(duì)于相同的調(diào)用類型，可以在單個(gè)腳本中具有不同的上下文行為：

方法調(diào)用中 this 扮演什么角色？

在方法調(diào)用中，this是擁有這個(gè)方法的對(duì)象。當(dāng)調(diào)用對(duì)象上的方法時(shí)，this就變成了對(duì)象本身。

-在這里我們來看個(gè)案例：首先創(chuàng)建一個(gè)對(duì)象，該對(duì)象有一個(gè)遞增數(shù)字的方法

調(diào)用calc.increment()使increment函數(shù)的上下文成為calc對(duì)象。所以使用this.num來增加num屬性是有效的。再來看看另一個(gè)例子。JS對(duì)象從原型繼承一個(gè)方法，當(dāng)在對(duì)象上調(diào)用繼承的方法時(shí)，調(diào)用的上下文仍然是對(duì)象本身

Object.create()創(chuàng)建一個(gè)新對(duì)象myDog，并根據(jù)第一個(gè)參數(shù)設(shè)置其原型。myDog對(duì)象繼承sayName方法。執(zhí)行myDog. sayname()時(shí)，myDog是調(diào)用的上下文。在EC6 class 語法中，方法調(diào)用上下文也是實(shí)例本身

構(gòu)造函數(shù)中的 this所扮演的角色

在構(gòu)造函數(shù)調(diào)用中 this 指向新創(chuàng)建的對(duì)象。構(gòu)造函數(shù)調(diào)用的上下文是新創(chuàng)建的對(duì)象。它利用構(gòu)造函數(shù)的參數(shù)初始化新的對(duì)象，設(shè)定屬性的初始值，添加事件處理函數(shù)等等。

來看看下面示例中的上下文

new Foo() 正在進(jìn)行構(gòu)造函數(shù)調(diào)用，其中上下文是fooInstance。在Foo內(nèi)部初始化對(duì)象：this.property被賦值為默認(rèn)值。同樣的情況在用class語法（從ES6起）時(shí)也會(huì)發(fā)生，唯一的區(qū)別是初始化在constructor方法中進(jìn)行:

總結(jié)：

作為一個(gè)新生程序猿，Damon希望能夠與大家一同進(jìn)步。文章或者描述有所不足的地方，希望大家多多提出來，一同進(jìn)步。

Damon會(huì)繼續(xù)發(fā)掘一些有用的咨詢，知識(shí)以及新工具，與大家一同分享，謝謝！