摘要：構(gòu)造函數(shù)也是函數(shù)，所以當(dāng)你用普通調(diào)用方式調(diào)用時(shí)這個(gè)時(shí)候相當(dāng)于給對(duì)象添加了和兩個(gè)屬性。為構(gòu)造函數(shù)指定這里報(bào)錯(cuò)了，原因是我們?nèi)チ撕瘮?shù)，這里的函數(shù)不是一個(gè)構(gòu)造函數(shù)當(dāng)然解決方式也是有的。

javascript中的this是啥東西？為啥我們經(jīng)常被他搞得暈頭轉(zhuǎn)向不知所以？他是惡魔？是天使 ？是怪胎？讓我們一起來揭開它那神秘的面紗。

首先this是Javascript語言的關(guān)鍵字之一，指函數(shù)運(yùn)行時(shí)的當(dāng)前對(duì)象。那既然和函數(shù)運(yùn)行有關(guān)，js中函數(shù)有哪些調(diào)用模式呢？

純粹的函數(shù)調(diào)用

對(duì)象的方法調(diào)用

構(gòu)造函數(shù)調(diào)用

apply、call調(diào)用

我擦，有木有一千只草泥馬在心里蹦騰不息，人家是要弄懂this，你這又是整的哪一出

我們慢慢來，一步步從這些調(diào)用模式中探究this這個(gè)神奇的遠(yuǎn)古神獸

函數(shù)調(diào)用 即 functionName () 模式，這也是我們使用的最多的一種方式，其屬于全局調(diào)用，瀏覽中默認(rèn)情況下函數(shù)內(nèi)部的this指向window，當(dāng)然是在非嚴(yán)格模式下。

this.name = "qianlong";

function showName () {
  console.log(this.name);
  console.log(this === window);
}

showName() 
 
// qianlong
// true

當(dāng)一個(gè)函數(shù)作為對(duì)象的某個(gè)屬性方法被調(diào)用的時(shí)候

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  }
};

obj.showName();
// qianlong

可以看出this指向是obj這個(gè)對(duì)象，其實(shí)本質(zhì)上講函數(shù)調(diào)用形式內(nèi)部this就是指向調(diào)用它的那個(gè)對(duì)象

上面的例子相當(dāng)于

window.showName()

這也是為什么可以讀取到全局定義的name屬性的原因。

再來

var showName = function () {
    console.log(this.name);
  },
  obj = {
    name: "qianlong",
    showName: showName
  };

  obj.showName();

這個(gè)時(shí)候輸出的是什么呢

結(jié)果是不變的，在js中，一切都是對(duì)象，而這里也只是將，obj的showName屬性指向，showNmae函數(shù)的引用地址。

繼續(xù)

當(dāng)我們把showName方法賦值給了一個(gè)變量，又會(huì)有什么事情發(fā)生呢？

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  }
};

var tempShowName = obj.showName;

tempShowName()

// undefined

為什么不是期望的那樣輸出 qianlong呢。obj的showName方法是一個(gè)對(duì)象，當(dāng)把它賦值給了tempShowName變量，此時(shí)便和obj沒有什么關(guān)系了，而這個(gè)時(shí)候的調(diào)用和下面是等價(jià)的。

window.tempShowName()

window上此事并沒有name屬性，自然輸出是undefined。

當(dāng)使用 new 去調(diào)用一個(gè)構(gòu)造函數(shù)的時(shí)候，內(nèi)部的this，指向的是實(shí)例化出來的對(duì)象。

var Person = function (name, sex) {
  this.name = name;
  this.sex = sex;
  console.log(this);
};

var p1 = new Person("qianlong", "boy");

// Person {name: "qianlong", sex: "boy"};

構(gòu)造函數(shù)也是函數(shù)，所以當(dāng)你用普通調(diào)用方式調(diào)用時(shí)

var Person = function (name, sex) {
  this.name = name;
  this.sex = sex;
  console.log(this);
};

Person("qianlong", "boy");

// 這個(gè)時(shí)候相當(dāng)于給window對(duì)象添加了name和sex兩個(gè)屬性。

window.name // "qianlong"
window.sex // "boy"

使用call和apply方式去調(diào)用一個(gè)函數(shù)的時(shí)候，內(nèi)部的this指向的是傳進(jìn)來的第一個(gè)參數(shù)，當(dāng)?shù)谝粋€(gè)參數(shù)是undefined或者null的時(shí)候，依舊指向window

關(guān)于call和apply歡迎查看另一篇文章

js中call、apply、bind那些事

var showName = function () {
      console.log(this);
    };

showName() // window
showName.call(undefined) // window
showName.call(null) // window
showName.call({name: "qianlong"}) // {name: "qianlong"}

在 ES6 的新規(guī)范中，加入了箭頭函數(shù)，它和普通函數(shù)最不一樣的一點(diǎn)就是 this 的指向，普通函數(shù)中的this，是運(yùn)行時(shí)候決定的，而箭頭函數(shù)卻是定義時(shí)候就決定了。

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  },
  showNameLater: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 1000)
  }        
};

obj.showNameLater();

// qianlong

var obj = {
  name: "qianlong",
  showName: () => {
    console.log(this.name);
  }
};

obj.showName();
// undefined

1. setTimeout

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  },
  showNameLater: function () { 
    setTimeout(this.showName, 1000);
  }
};

obj.showNameLater();

// undefined

這里在執(zhí)行setTimeout這個(gè)函數(shù)的時(shí)候傳了obj的showName函數(shù)作為第一個(gè)參數(shù)，其效果與

var showName = obj.showName

是相同的。而setTimeout內(nèi)部其實(shí)也是執(zhí)行了傳進(jìn)去這個(gè)函數(shù)而已，即。

showName();

還記得這種調(diào)用方式和window.showName()是類似的效果嗎？這個(gè)時(shí)候輸入為undefined也就好理解了。

那么怎么解決這個(gè)問題呢，畢竟我們期望的效果是輸出qianlong。

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  },
  showNameLater: function () { 
    var self = this;
    setTimeout(function () {
      self.showName();
    }, 1000);
  }
};

obj.showNameLater();

或者

var obj = {
  name: "qianlong",
  showName: function () {
    console.log(this.name);
  },
  showNameLater: function () { 
    setTimeout(this.showName.bind(this), 1000);
  }
};

obj.showNameLater();

2. setTimeout

尼瑪坑爹啊，居然還是因?yàn)槟恪?/p>

"use strict";

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

show(); // undefined 

setTimeout(show, 1); // window

在嚴(yán)格模式下面，函數(shù)調(diào)用的時(shí)候沒有指定this的情況下，內(nèi)部this的表現(xiàn)為undefined,但是setTimeout卻不同，其內(nèi)部默認(rèn)還是指向window。

3. 為構(gòu)造函數(shù)指定this

var Person = function (name, sex) {
  this.name = name;
  this.sex = sex;
};

var p1 = new Person.call({});

// Uncaught TypeError: Person.call is not a constructor

這里報(bào)錯(cuò)了，原因是我們?nèi)?new 了 Person.call 函數(shù) ，這里的函數(shù)不是一個(gè)構(gòu)造函數(shù)；

當(dāng)然解決方式也是有的。

var Person = function (name, sex) {
  this.name = name;
  this.sex = sex;
};

var p1 = new (Person.bind({}))("qianlong", "sex");

// Person {name: "qianlong", sex: "sex"}

4. 為箭頭函數(shù)指定this

var show = (str) => {
  console.log(str);
  console.log(this);
};

show("qianlong");
// qianlong
// window

show.call({name: "qianlong"}, "qianlong");
// qianlong
// window

可以看到使用call來手動(dòng)改變箭頭函數(shù)中的this的時(shí)候，無法成功。 箭頭函數(shù)中的 this 在定義它的時(shí)候已經(jīng)決定了（執(zhí)行定義它的作用域中的 this），與如何調(diào)用以及在哪里調(diào)用它無關(guān)，包括 (call, apply, bind) 等操作都無法改變它的 this。

文章可能有些疏漏與錯(cuò)誤之處，歡迎各位指正。