都說(shuō) JavaScript 是一種很靈活的語(yǔ)言，這其實(shí)也可以說(shuō)它是一個(gè)混亂的語(yǔ)言。它把 函數(shù)式編程 和 面向?qū)ο缶幊?糅合一起，再加上 動(dòng)態(tài)語(yǔ)言 特性，簡(jiǎn)直強(qiáng)大無(wú)比（其實(shí)是不能和C++比的，^_^ ）。

JS 里的 this

• 在 function 內(nèi)部被創(chuàng)建
• 指向調(diào)用時(shí)所在函數(shù)所綁定的對(duì)象（拗口）
• this 不能被賦值，但可以被 call/apply  改變

目錄

* 一個(gè)特例
* 開始判斷
    * 法則一：對(duì)象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外）
    * 法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個(gè)function的this
    * 法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window
* 習(xí)題集
    * 普通函數(shù)中的this
    * 函數(shù)執(zhí)行后返回另外一個(gè)函數(shù)中的this（普通函數(shù)中）
    * 多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）1
    * 多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）2

一個(gè)特例

在正式開始之前，我們先來(lái)說(shuō)一個(gè)特例。

// 構(gòu)造函數(shù)
function Student(name) {
 this.name = name
}
// 創(chuàng)建小明和小紅兩個(gè)實(shí)例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 輸出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

在構(gòu)造函數(shù)中，this上的值會(huì)在創(chuàng)建實(shí)例的時(shí)候被綁定到新創(chuàng)建的實(shí)例上。不適用于下面的判斷方法，所以特此說(shuō)明。

開始判斷

下面是一個(gè)典型例子，我們的分析從這里開始。

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

法則一：對(duì)象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外）

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個(gè)function的this

箭頭函數(shù)沒有獨(dú)立的this作用域，所以繼續(xù)往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個(gè)function內(nèi)部的this指向。根據(jù)法則一，this指向?qū)ο蟊旧怼?/p>

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此處的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

我們可以試著在瀏覽器中運(yùn)行，看看結(jié)果。

法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window

根據(jù)法則二，this是指向最近的function，因此，這里的this等同于返回的函數(shù)中的this，不是對(duì)象方法中的this，所以，指向全局。

是不是感覺有點(diǎn)奇怪？不過(guò)實(shí)踐證明確實(shí)如此。

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

習(xí)題集

歡迎大家按照法則一到三依次判斷，猜測(cè)結(jié)果，并在瀏覽器下測(cè)試。測(cè)試結(jié)果也可以回復(fù)，大家一起討論。

因本人能力有限，該系列法則可能在部分情況下失效。歡迎大家一起討論。

下面是做題時(shí)間。

普通函數(shù)中的this

function x() {
 console.log(this)
}
x()

函數(shù)執(zhí)行后返回另外一個(gè)函數(shù)中的this（普通函數(shù)中）

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

多層嵌套函數(shù)中的this（定時(shí)器&箭頭函數(shù)）2

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

再次說(shuō)明，該法則為實(shí)驗(yàn)性法則，未進(jìn)行大范圍的測(cè)試，不保證在所有情況下都有一致的結(jié)果。如果你發(fā)現(xiàn)了法則判斷失敗的情況，歡迎留言，一起探討。

總結(jié)

以上所述是小編給大家介紹的Mysql 5.7.19 winx64 ZIP Archive 安裝及使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論