都說 JavaScript 是一種很靈活的語言，這其實也可以說它是一個混亂的語言。它把 函數式編程 和 面向對象編程 糅合一起，再加上 動態語言 特性，簡直強大無比（其實是不能和C++比的，^_^ ）。

JS 里的 this

目錄

* 一個特例
* 開始判斷
    * 法則一：對象方法中的this指向對象本身（箭頭函數形式的除外）
    * 法則二：多層嵌套函數中的this指向等同于包含該this的最近一個function的this
    * 法則三：箭頭函數以及非指向對象方法中的function的情況下this指向window
* 習題集
    * 普通函數中的this
    * 函數執行后返回另外一個函數中的this（普通函數中）
    * 多層嵌套函數中的this（定時器&箭頭函數）1
    * 多層嵌套函數中的this（定時器&箭頭函數）2

一個特例

在正式開始之前，我們先來說一個特例。

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

在構造函數中，this上的值會在創建實例的時候被綁定到新創建的實例上。不適用于下面的判斷方法，所以特此說明。

開始判斷

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

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: ƒ, …}

法則一：對象方法中的this指向對象本身（箭頭函數形式的除外）

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

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

箭頭函數沒有獨立的this作用域，所以繼續往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個function內部的this指向。根據法則一，this指向對象本身。

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