this第一奧義：

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

前提先知：

對于在開始講解this之間我們需要知道，從java或者是從PHP等標(biāo)準(zhǔn)語言對于this的看法來說苛骨。大多數(shù)情況下篱瞎，雖說this能夠使用的場景有許多，但是this作為表示類方法中的當(dāng)前對象的實(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ù)體中可訪問的變量粱挡、對象和函數(shù)的集合赠幕。

JS調(diào)用方式：

在就是中使用this的情況就與前文所的有所不同，this在這更多是表示函數(shù)當(dāng)前執(zhí)行上下文询筏，而在js調(diào)用函數(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!’)?

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

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

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

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

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

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

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

this 在函數(shù)調(diào)用中是一個全局對象，局對象由執(zhí)行環(huán)境決定减细。在瀏覽器中匆瓜，this是 window 對象。在函數(shù)調(diào)用中未蝌，執(zhí)行上下文是全局對象驮吱。

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

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

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

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

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

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

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

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

在方法調(diào)用中后德，this是擁有這個方法的對象。當(dāng)調(diào)用對象上的方法時抄腔，this就變成了對象本身瓢湃。

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

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

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

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

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

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

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

總結(jié)：

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

Damon會繼續(xù)發(fā)掘一些有用的咨詢旷祸，知識以及新工具钓试，與大家一同分享疯攒，謝謝腕巡！