ECMAScript 之深入探討 Call()、Apply()、Bind() 與 This
栏目: JavaScript · 发布时间: 5年前
内容简介: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
。
outerThis
為 window
。
- 在 Sloppy Mode 下,Function Declaration 的
this
為window
,因此為true
- 在 Sloppy Mode 下,Anonymous Function 的
this
為window
,因此為true
- 在 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
。
outerThis
為 window
。
- 在 Strict Mode 下,Function Declaration 的
this
為undefined
,因此為false
- 在 Strict Mode 下,Anonymous Function 的
this
為undefined
,因此為false
- 在 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。
outerThis
為 window
。
- 在 Sloppy Mode 下,Function Declaration 的
this
為window
,因此為true
- 在 Sloppy Mode 下,Function Declaration 的
call()
若傳入null
,不會影響this
,一樣是windows
,因此為true
- 在 Sloopy Mode 下, Function Declaration 的
apply()
若傳入undefined
,不會影響this
,一樣是window
,因此為true
- 在 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。
outerThis
為 window
。
- 在 Strict Mode 下,Function Declaration 的
this
為undefined
,因此為false
- 在 Strict Mode 下,Function Declaration 的
call()
若傳入null
,不會影響this
,一樣是undefined
,因此為false
- 在 Strict Mode 下, Function Declaration 的
apply()
若傳入undefined
,不會影響this
,一樣是undefined
,因此為false
- 在 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。
outerThis
為 window
。
- 在 Sloppy Mode 下,Anonymous Function 的
this
為window
,因此為true
- 在 Sloppy Mode 下,Anonymous Function 的
call()
若傳入null
,不會影響this
,一樣是window
,因此為true
- 在 Sloopy Mode 下, Anonymous Function 的
apply()
若傳入undefined
,不會影響this
,一樣是window
,因此為true
- 在 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。
outerThis
為 window
。
- 在 Strict Mode 下,Anonymous Function 的
this
為undefined
,因此為false
- 在 Strict Mode 下,Anonymous Function 的
call()
若傳入null
,不會影響this
,一樣是undefined
,因此為false
- 在 Strict Mode 下, Anonymous Function 的
apply()
若傳入undefined
,不會影響this
,一樣是undefined
,因此為false
- 在 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。
outerThis
為 window
。
- 在 Sloppy Mode 下,Arrow Function 的
this
為 parent scope 的window
,因此為true
- 在 Sloppy Mode 下,Arrow Function 的
call()
無論傳入什麼都不會改變this
,一樣是window
,因此為true
- 在 Sloopy Mode 下, Arrow Function 的
apply()
無論傳入什麼都不會改變this
,一樣是window
,因此為true
- 在 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。
outerThis
為 window
。
- 在 Strict Mode 下,Arrow Function 的
this
為 parent scope 的window
,因此為true
- 在 Strict Mode 下,Arrow Function 的
call()
無論傳入什麼都不會改變this
,一樣是window
,因此為true
- 在 Strict Mode 下, Arrow Function 的
apply()
無論傳入什麼都不會改變this
,一樣是window
,因此為true
- 在 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 scopewindow
- 無論在 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 【1】JavaScript 基础深入——数据类型深入理解与总结
- 深入理解 Java 函数式编程,第 5 部分: 深入解析 Monad
- 深入理解 HTTPS
- 深入理解 HTTPS
- 深入浅出Disruptor
- 深入了解 JSONP
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员修炼之道(影印版)
Andrew Hunt、David Thomas / 中国电力出版社 / 2003-8-1 / 39.00
本书直击编程陈地,穿过了软件开发中日益增长的规范和技术藩篱,对核心过程进行了审视——即根据需求,创建用户乐于接受的、可工作和易维护的代码。本书包含的内容从个人责任到职业发展,直至保持代码灵活和易于改编重用的架构技术。从本书中将学到防止软件变质、消除复制知识的陷阱、编写灵活、动态和易适应的代码、避免出现相同的设计、用契约、断言和异常对代码进行防护等内容。一起来看看 《程序员修炼之道(影印版)》 这本书的介绍吧!
URL 编码/解码
URL 编码/解码
html转js在线工具
html转js在线工具