ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

栏目: JavaScript · 发布时间: 7年前

内容简介：ECMAScript 的一大特色是 Function 能透過ECMAScript 5ECMAScript 2015

ECMAScript 的一大特色是 Function 能透過 call() 、 apply() 與 bind() 去動態改變 this ，尤其在寫 Vue 時特別重要，因為 Vue 預設會將 this 指向 Vue Instance，若你自行抽 function 時，觀念不清楚很容易使 this 就指向 undefined ，所以寫 Vue 一定要搞清楚 ECMAScript 的 this 。

Version

ECMAScript 5

ECMAScript 2015

Scope

Sloppy Mode

const outerThis = this;

function func1() {
  console.log(this === outerThis);
}

const func2 = function() {
  console.log(this === outerThis);
};

const func3 = () => {
  console.log(this === outerThis);
};

func1();
func2();
func3();

在 Sloppy Mode 分別以 Function Declaration、Anonymous Function 與 Arrow Function 三種方式檢視 this 。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Sloppy Mode 下，Function Declaration 的 this 為 window ，因此為 true
  2. 在 Sloppy Mode 下，Anonymous Function 的 this 為 window ，因此為 true
  3. 在 Sloppy Mode 下，Arrow Function 的 this 為 parent scope 的 window ，因此為 true

Strict Mode

"use strict";

const outerThis = this;

function func1() {
  console.log(this === outerThis);
}

const func2 = function() {
  console.log(this === outerThis);
};

const func3 = () => {
  console.log(this === outerThis);
};

func1();
func2();
func3();

在 Strict Mode 分別以 Function Declaration、Anonymous Function 與 Arrow Function 三種方式檢視 this 。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Strict Mode 下，Function Declaration 的 this 為 undefined ，因此為 false
  2. 在 Strict Mode 下，Anonymous Function 的 this 為 undefined ，因此為 false
  3. 在 Strict Mode 下，Arrow Function 的 this 為 parent scope 的 window ，因此為 true

Function Declaration 與 Anonymous Function 在 Sloppy Mode 與 Strict Mode 下的 this 意義不一樣，分別是 window 與 undefined ；但 Arrow Function 在 Sloppy Mode 與 Strict Mode 下的 this 始終都是 parent scope 的 window

Function Declaration

Sloppy Mode

const outerThis = this;

function func() {
  console.log(this === outerThis);
}

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Sloppy Mode 分別以 call() 、 apply() 與 bind() 執行 Function Declaration。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Sloppy Mode 下，Function Declaration 的 this 為 window ，因此為 true
  2. 在 Sloppy Mode 下，Function Declaration 的 call() 若傳入 null ，不會影響 this ，一樣是 windows ，因此為 true
  3. 在 Sloopy Mode 下， Function Declaration 的 apply() 若傳入 undefined ，不會影響 this ，一樣是 window ，因此為 true
  4. 在 Sloopy Mode 下，Function Declaration 的 bind() 若傳入 null 與 undefined 以外的值，如 empty object {} ， this 變成 {} ，因此為 false

Strict Mode

"use strict";

const outerThis = this;

function func() {
  console.log(this === outerThis);
}

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Strict Mode 分別以 call() 、 apply() 與 bind() 執行 Function Declaration。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Strict Mode 下，Function Declaration 的 this 為 undefined ，因此為 false
  2. 在 Strict Mode 下，Function Declaration 的 call() 若傳入 null ，不會影響 this ，一樣是 undefined ，因此為 false
  3. 在 Strict Mode 下， Function Declaration 的 apply() 若傳入 undefined ，不會影響 this ，一樣是 undefined ，因此為 false
  4. 在 Strict Mode 下，Function Declaration 的 bind() 若傳入 null 與 undefined 以外的值，如 empty object {} ， this 變成 {} ，因此為 false

無論在 Sloppy Mode 或 Strict Mode 下， call() 、 apply() 與 bind() 傳入 null 或 undefined 都不會改變 this

Anonymous Function

Sloppy Mode

const outerThis = this;

const func = function() {
  console.log(this === outerThis);
};

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Sloppy Mode 分別以 call() 、 apply() 與 bind() 執行 Anonymous Function。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Sloppy Mode 下，Anonymous Function 的 this 為 window ，因此為 true
  2. 在 Sloppy Mode 下，Anonymous Function 的 call() 若傳入 null ，不會影響 this ，一樣是 window ，因此為 true
  3. 在 Sloopy Mode 下， Anonymous Function 的 apply() 若傳入 undefined ，不會影響 this ，一樣是 window ，因此為 true
  4. 在 Sloopy Mode 下，Anonymous Function 的 bind() 若傳入 null 與 undefined 以外的值，如 empty object {} ， this 變成 {} ，因此為 false

Strict Mode

"use strict"

const outerThis = this;

const func = function() {
  console.log(this === outerThis);
};

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Strict Mode 分別以 call() 、 apply() 與 bind() 執行 Anonymous Function。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Strict Mode 下，Anonymous Function 的 this 為 undefined ，因此為 false
  2. 在 Strict Mode 下，Anonymous Function 的 call() 若傳入 null ，不會影響 this ，一樣是 undefined ，因此為 false
  3. 在 Strict Mode 下， Anonymous Function 的 apply() 若傳入 undefined ，不會影響 this ，一樣是 undefined ，因此為 false
  4. 在 Strict Mode 下，Anonymous Function 的 bind() 若傳入 null 與 undefined 以外的值，如 empty object {} ， this 變成 {} ，因此為 false

Function Declaration 與 Anonymous Function 對於 call() 、 apply() 與 bind() 對 this 的影響都是一樣的，無論是 Sloppy Mode 或 Strict Mode

Arrow Function

Sloppy Mode

const outerThis = this;

const func = () => {
  console.log(this === outerThis);
};

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Sloppy Mode 分別以 call() 、 apply() 與 bind() 執行 Arrow Function。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Sloppy Mode 下，Arrow Function 的 this 為 parent scope 的 window ，因此為 true
  2. 在 Sloppy Mode 下，Arrow Function 的 call() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true
  3. 在 Sloopy Mode 下， Arrow Function 的 apply() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true
  4. 在 Sloppy Mode 下，Arrow Function 的 bind() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true

Strict Mode

"use strict";

const outerThis = this;

const func = () => {
  console.log(this === outerThis);
};

func();
func.call(null);
func.apply(undefined);
func.bind({})();

在 Strict Mode 分別以 call() 、 apply() 與 bind() 執行 Arrow Function。

ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This

outerThis 為 window 。

  1. 在 Strict Mode 下，Arrow Function 的 this 為 parent scope 的 window ，因此為 true
  2. 在 Strict Mode 下，Arrow Function 的 call() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true
  3. 在 Strict Mode 下， Arrow Function 的 apply() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true
  4. 在 Strict Mode 下，Arrow Function 的 bind() 無論傳入什麼都不會改變 this ，一樣是 window ，因此為 true

無論是 call() 、 apply() 或 bind() ，甚至於 Sloppy Mode 或 Strict Mode，都無法改變 this

Conclusion

  • 在 Sloppy Mode 的 Function Declaration 或 Anonymous Function， this 為 window
  • 在 Strict Mode 的 Function Declaration 或 Anonymous Function， this 為 undefined
  • 無論在 Sloppy Mode 或 Strict Mode，Arrow Function 的 this 皆為 parent scope window
  • 無論在 Sloppy Mode 或 Strict Mode，將 null 或 undefined 透過 call() 、 apply() 或 bind() 傳入 Function Declaration 或 Anonymous Function，皆無法改變 this
  • 無論在 Sloppy Mode 或 Strict Mode，都無法透過 call() 、 apply() 或 bind() 改變 Arrow Function 的 this

Reference

Egghead.io , Understanding JavaScript’s this Keyword in Depth


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
挑战程序设计竞赛

挑战程序设计竞赛

秋叶拓哉、岩田阳一、北川宜稔 / 巫泽俊、庄俊元、李津羽 / 人民邮电出版社 / 2013-7-1 / CNY 79.00

世界顶级程序设计高手的经验总结 【ACM-ICPC全球总冠军】巫泽俊主译 日本ACM-ICPC参赛者人手一册 本书对程序设计竞赛中的基础算法和经典问题进行了汇总，分为准备篇、初级篇、中级篇与高级篇4章。作者结合自己丰富的参赛经验，对严格筛选的110 多道各类试题进行了由浅入深、由易及难的细致讲解，并介绍了许多实用技巧。每章后附有习题，供读者练习，巩固所学。 本书适合程序设计......一起来看看 《挑战程序设计竞赛》 这本书的介绍吧!

码农工具
XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3