JavaScript中的this關(guān)鍵詞指向?qū)嵗治?/h1>

發(fā)布時(shí)間：2022-05-25 10:09:53 來(lái)源：億速云 閱讀：132 作者：zzz 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要講解了“JavaScript中的this關(guān)鍵詞指向?qū)嵗治觥保闹械闹v解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript中的this關(guān)鍵詞指向?qū)嵗治觥卑桑?/p>

1、es5中的this的指向

• this是JavaScript的一個(gè)關(guān)鍵字，他是函數(shù)執(zhí)行過(guò)程中，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，指當(dāng)前的對(duì)象，只在當(dāng)前函數(shù)內(nèi)部使用。

• 在es5中this的指向取決于函數(shù)運(yùn)行時(shí)的環(huán)境。

• 沒(méi)有直接掛載者(或稱調(diào)用者)的函數(shù)中this，非嚴(yán)格模式下指向window，在use strict嚴(yán)格模式下，默認(rèn)為undefined。以下都是在非嚴(yán)格模式下討論

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

obj.fn()在執(zhí)行時(shí)，fn中的this指向的是當(dāng)前的調(diào)用對(duì)象obj。fn()執(zhí)行時(shí)，this指向的是window對(duì)象。

var fn = obj.fn; // 等價(jià)于 window.fn = obj.fn;
fn();            // 等價(jià)于 window.fn();

匿名函數(shù)的執(zhí)行環(huán)境是全局的

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、es6中的this

• es6箭頭函數(shù)的特點(diǎn)

• 箭頭函數(shù)沒(méi)有自己的this

• 函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象，即外層代碼的this引用。

• 不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

• 沒(méi)有arguments對(duì)象。如果要用，可以用Rest參數(shù)代替。

• 不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)

示例說(shuō)明，修改上述示例代碼中的函數(shù)為箭頭函數(shù)：

// 示例代碼1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 這里的this指向的外層的this,即window對(duì)象，想當(dāng)于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代碼2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外層的this，即obj對(duì)象
    };
  }
};
obj.fn()();

感謝各位的閱讀，以上就是“JavaScript中的this關(guān)鍵詞指向?qū)嵗治觥钡膬?nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript中的this關(guān)鍵詞指向?qū)嵗治鲞@一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！