前端学习笔记(5) - JavaScript中this 关键字的机制
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,可以传参。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Composer 基本使用
基本用法 引言 介绍基本用法,我们将安装 monolog/monolog 日志库作为范例。如果你还没有安装 Composer,请参阅 Composer 安装 章节。 注意:为简便起见,我们假定你已经 本地 安装了 Composer。 composer.json:项目设置 若要在项目中使用 Composer 你需要一个 composer.json 文件。该文件描述了你的项目依赖关系和其他元数据。 require 键 首先(通常也是唯一)应该做的事情就是在你的 composer.json 文件中定义好 require 键。你应该简要告诉 Composer 你的项目所依赖的包有哪些。 { "require": { "monolog/monolog": "1.0.*" } } 如上所示, require 获取了一个包名称 (例如 monolog/monolog)映射到版本约束 (例如 1.0.*)的 json 对象。 Composer 使用该信息去「版本库」中搜索,你在 Composer.json 中注册的 repositories 键所指定的版本仓库中的相关合适的文件,或是在 Packagi...
- 下一篇
5种JVM垃圾收集器特点和8种JVM内存溢出原因
先来看看5种JVM垃圾收集器特点 一、常见垃圾收集器 现在常见的垃圾收集器有如下几种:新生代收集器:SerialParNewParallel Scavenge老年代收集器:Serial OldCMSParallel Old堆内存垃圾收集器:G1每种垃圾收集器之间有连线,表示他们可以搭配使用。 二、新生代垃圾收集器 (1)Serial 收集器Serial 是一款用于新生代的单线程收集器,采用复制算法进行垃圾收集。Serial 进行垃圾收集时,不仅只用一条线程执行垃圾收集工作,它在收集的同时,所有的用户线程必须暂停(Stop The World)。就比如妈妈在家打扫卫生的时候,肯定不会边打扫边让儿子往地上乱扔纸屑,否则一边制造垃圾,一遍清理垃圾,这活啥时候也干不完。如下是 Serial 收集器和 Serial Old 收集器结合进行垃圾收集的示意图,当用户线程都执行到安全点时,所有线程暂停执行,Serial 收集器以单线程,采用复制算法进行垃圾收集工作,收集完之后,用户线程继续开始执行。 适用场景:Client 模式(桌面应用);单核服务器。可以用 -XX:+UserSerialGC 来选...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS8编译安装MySQL8.0.19
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Windows10,CentOS7,CentOS8安装Nodejs环境