context --> what the value of this is

1. 首先我們執(zhí)行console.log(this);异袄，即在全局作用域內(nèi)輸出this的值：

在node環(huán)境下柠新，輸出{}
在瀏覽器環(huán)境下株旷，輸出Window {....}

2. 接著我們看下面一段代碼：

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

在node環(huán)境下扇雕，輸出Object [global] {...}：
在瀏覽器環(huán)境下吓肋，輸出Window {...}

--> by default, a function runs within the scope of the object that it sits in.

因此上一段代碼中的foo();等同于window.foo();

（when you create something in the root scope, it's a part of the window object）

3. 接著看下面一段代碼

var obj = {
  foo: function () {
    console.log(this);
    console.log(this === obj);
  }
};
obj.foo();

輸出結果為

{ foo: [Function: foo] }
true

當函數(shù)是作為對象的屬性存在并調(diào)用時签孔，函數(shù)中的this指對象，否則this指window（strict模式下this為undefined）

思考題：

1. 下面代碼輸出結果是什么

var name = 'red';

function a() {
  const name = 'white';
  console.log(this.name);
}

function d(i) {
  return i();
}

const b = {
  name: 'yellow',
  detail: function () {
    console.log(this.name);
  },
  hello: function () {
    return function () {
      console.log(this.name);
    }
  } 
};

var name = 'The Window';

var object = {
  name: 'My Object',
  getNameFunc: function () {
    var that = this;
    return function () {
      return that.name;
    };
  }
};

const c = b.detail;              // line 1
b.a = a;                         // line 2
const e = b.hello();             // line 3

a();                             // line 5
c();                             // line 6
b.a();                           // line 7
d(b.detail);                     // line 8
e();                             // line 9
object.getNameFunc()();          // line 10

由標注的line1開始讀：

line 1: --> 相當于創(chuàng)建一個全局作用域下的函數(shù)c华临，函數(shù)c與b.detail指向同一個函數(shù)語句芯杀，即console.log(this.name);
line 2: --> 相當于給對象b添加一個新的屬性a，屬性a對應的值與函數(shù)a指向同一個函數(shù)語句雅潭，即const name = 'white'; console.log(this.name);揭厚，此時對象b為

{
  name: 'yellow',
  detail: [Function: detail],
  hello: [Function: hello],
  a: [Function: a]
}

line 3: --> 相當于創(chuàng)建一個全局作用域下的函數(shù)e，并將b.hello()的函數(shù)返回值function () {console.log(this.name);}賦給e
line 5: --> a()是在window對象下運行扶供，全局作用域內(nèi)最后一次給name賦值為'The Window'筛圆，因此this.name即window.name, 即'The Window'（node環(huán)境下輸出undefined-->當輸出一個對象中不存在的屬性時，輸出值為undefined）
line 6: --> c()也是在window對象下運行椿浓，this同樣指window太援，輸出'The Window'（node環(huán)境下輸出undefined）
line 7: --> b.a();在b對象下運行，this.name即b.name扳碍，輸出'yellow'
line 8: --> 由于d是一個在全局作用域下定義的函數(shù)提岔，因此將b.detail所指向的函數(shù)語句放在全局對象執(zhí)行，this指window笋敞，輸出'The Window'（node環(huán)境下輸出undefined）
line 9: --> 由于e是一個在全局作用域下定義的函數(shù)碱蒙，this指window，輸出'The Window'（node環(huán)境下輸出undefined）
line 10: --> 返回值為'My Object'（但不打印結果）液样。原因：由于在object對象下執(zhí)行了var that = this;振亮，因此that === object巧还，即函數(shù)返回值為object.name鞭莽，即'My Object'

2. 下面代碼輸出結果是什么

myobject.func();

var myobject = {
  foo: 'bar',
  func: function () {
    var self = this;             // line 1
    console.log(this.foo);       // line 2
    console.log(self.foo);       // line 3
    (function (){                // line 4
      console.log(this.foo);     // line 5
      console.log(self.foo);     // line 6
    })();
    function f() {               // line 8
      console.log(this.foo);
    }
    f();                         // line 11
  }
}

line 1: --> this為myobject，因此self也指myobject
line 2: --> 打印myobject.foo麸祷，即打印'bar'
line 3: --> 打印myobject.foo澎怒，即打印'bar'
line 4: --> 該立即執(zhí)行函數(shù)并不是作為特定對象的屬性存在并調(diào)用
line 5: --> this.foo默認為window.foo，全局對象不存在foo這個屬性，因此打印undefined
line 6: --> 打印self.foo即打印myobject.foo喷面，即打印'bar'
line 8: --> 函數(shù)f并不是作為特定對象的屬性存在并調(diào)用
line 11: --> this.foo默認為window.foo星瘾，全局對象不存在foo這個屬性，因此打印undefined

3. 下面代碼輸出結果是什么?

var myobject = {
  foo: 'bar',
  func: (function () {
    var self = this;
    console.log(this.foo);
    console.log(self.foo);

    (function () {
      console.log(this.foo);
      console.log(self.foo);
    })();
    function f() {
      console.log(this.foo);
    }
    f();
  })()
};

(function () {...})()并不是作為特定對象的屬性存在并調(diào)用惧辈， this.foo默認為window.foo琳状，全局對象不存在foo這個屬性，因此打印五個undefined

對JavaScript中this & 上下文的理解

對JavaScript中this & 上下文的理解

思考題：