您现在的位置是:首页 > 文章详情

前端学习笔记(5) - JavaScript中this 关键字的机制

日期:2019-08-15点击:329

JavaScript中有几种函数

1.使用function定义的函数

function foo(){ }

2.使用箭头函数定义的函数

const foo=()=>{ }

3.在class中定义的函数

class A{ foo(){ } }

4.生成器函数

function* foo(){ }

5.class定义的类,实际上也是函数

class Foo { constructor(){ } }

6、7、8异步函数

async function foo(){ } const foo = async () => { } async function foo*(){ }

不同函数this关键字的行为

 function showThis(){ console.log(this); } var o = { showThis: showThis } showThis(); // global o.showThis(); // o

普通函数的 this 值由“调用它所使用的引用”决定,其中奥秘就在于:我们获取函数的表达式,它实际上返回的并非函数本身,而是一个 Reference 类型。Reference 类型由两部分组成:一个对象和一个属性值。

不难理解 o.showThis 产生的 Reference 类型,即由对象 o 和属性“showThis”构成。

当做一些算术运算(或者其他运算时),Reference 类型会被解引用,即获取真正的值(被引用的内容)来参与运算,而类似函数调用、delete 等操作,都需要用到 Reference 类型中的对象。在这个例子中,Reference 类型中的对象被当作 this 值,传入了执行函数时的上下文当中。

调用函数时使用的引用,决定了函数执行时刻的 this 值。

const showThis = () => { console.log(this); } var o = { showThis: showThis } showThis(); // global o.showThis(); // global 

我们看到,改为箭头函数后,不论用什么引用来调用它,都不影响它的 this 值。

class C { showThis() { console.log(this); } } var o = new C(); var showThis = o.showThis; showThis(); // undefined o.showThis(); // o

创建一个类并实例化以后再次调用获得的结果又是不同的

this关键字的机制

JavaScript 标准定义了 [[thisMode]] 私有属性。[[thisMode]] 私有属性有三个取值。

  • lexical:表示从上下文中找 this,这对应了箭头函数。
  • global:表示当 this 为 undefined 时,取全局对象,对应了普通函数。
  • strict:当严格模式时使用,this 严格按照调用时传入的值,可能为 null 或者 undefined。

class中的函数this行为与其他函数不一样正是因为class设计成了默认为strict模式执行。在strict模式下普通函数与class中的函数行为一致。

"use strict" function showThis(){ console.log(this); } var o = { showThis: showThis } showThis(); // undefined o.showThis(); // o

而箭头函数中this的指向当前上下文中的this,所以下例中foo函数内部潜逃的剪头函数this与foo相同,o.foo()中this为对象o所以内部剪头函数的this均为o。

var o = {} o.foo = function foo(){ console.log(this); return () => { console.log(this); return () => console.log(this); } } o.foo()()(); // o, o, o

操作this的内置函数

JavaScript中提供了apply call bind三个方法来改变函数中this的指向(不清楚用法自行百度)。三个方法只针对普通函数有效,箭头函数、class均不会报错,但是无法改变this,可以传参。

原文链接:https://yq.aliyun.com/articles/714646
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章