以及其任何超类对此上下文都是未知的_web前端入门到实战:Javascript 中的「上下文」你只需要看这一篇
正文
上下文
是Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域
」 和 「闭包
」呢?是不是就很亲切了。
「作用域」
和「闭包」
都是和「执行上下文」
密切相关的两个概念。
在解释「执行上下文」是什么之前, 我们还是先回顾下「作用域」 和 「闭包」。
作用域
首先, 什么是作用域呢?
域, 即是范围
。
作用域,其实就是某个变量或者函数的可访问范围
。
它控制着变量和函数的可见性
和生命周期
。
作用域也分为: 「全局作用域
」和 「局部作用域
」。
全局作用域:
如果一个对象在任何位置都能被访问到, 那么这个对象, 就是一个全局对象, 拥有一个全局作用域。
拥有全局作用域的对象可以分为以下几种情况:
- 定义在最外层的变量
- 全局对象的属性
- 任何地方隐式定义的变量(即:未定义就直接赋值的变量)。隐式定义的变量都会定义在全局作用域中。
局部作用域:
JavaScript的作用域是通过函数
来定义的。
在一个函数中定义的变量, 只对此函数内部可见
。
这类作用域,称为局部作用域。
还有一个概念和作用域联系密切, 那就是作用域链
。
作用域链
作用域链是一个集合
, 包含了一系列的对象, 它可以用来检索
上下文中出现的各类标识符
(变量, 参数, 函数声明等)。
函数在定义的时候, 会把父级的变量对象AO/VO的集合保存在内部属性 [[scope]]
中,该集合称为作用域链。
- AO : Activation Object 活动对象
- VO : Variable object 变量对象
Javascript 采用了词法作用域
(静态作用域),函数运行在他们被定义
的作用域中,而不是他们被执行
的作用域。
看个简单的例子 :
var a = 3;
function foo () {console.log(a)
}
function bar () {var a = 6foo()
}
bar()
如果js采用动态作用域,打印出来的应该是6而不是3.
这个例子说明了javasript是静态作用域
。
此函数作用域链的伪代码:
function bar() {function foo() {// ...}
}
bar.[[scope]] = [globalContext.VO
];
foo.[[scope]] = [barContext.AO,globalContext.VO
];
函数在运行激活的时候,会先复制 [[scope]] 属性创建作用域链,然后创建变量对象VO,然后将其加入到作用域链。
executionContextObj: {VO: {},scopeChain: [VO, [[scope]]]
}
总的来说, VO要比AO的范围大很多, VO是负责把各个调用的函数串联起来的。
VO是外部的, 而AO是函数自身内部的。
下面我们说一下闭包。
闭包
闭包也是面试中经常会问到的问题, 考察的形式也很灵活, 譬如:
- 描述下什么是闭包
- 写一段闭包的代码
- 闭包有什么用
- 给你一个闭包的例子,让你修改, 或者看输出
那闭包究竟是什么呢?
说白了, 闭包其实也就是函数
, 一个可以访问自由变量
的函数。
自由变量
: 不在函数内部声明的变量。
很多所谓的代码规范里都说, 不要滥用闭包, 会导致性能问题, 我当然是不太认同这种说法的, 不过这个说法被人提出来,也是有一些原因的。
毕竟,闭包里的自由变量会绑定
在代码块上,在离开创造它的环境下依旧生效,而使用代码块的人可能无法察觉。
闭包里的自由变量的形式有很多,先举个简单例子。
function add(p1){return function(p2){return p1 + p2;}
}
var a = add(1);
var b = add(2);
a(1) //2
b(1) // 3
在上面的例子里,a 和 b这两个函数,代码块是相同的,但若是执行a(1)和b(1)的结果却是不同的,原因在于这两者所绑定的自由变量是不同的,这里的自由变量其实就是函数体里的 p1 。
自由变量的引入,可以起到和OOP
里的封装
同样作用,我们可以在一层函数里封装一些不被外界知晓的自由变量,从而达到相同的效果, 很多模块的封装
, 也是利用了这个特性。
然后说一下我遇到的真实案例, 是去年面试腾讯QQ音乐
的一道笔试题:
for (var i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)}, i * 1000)
}
这段代码会输出一堆 6
, 让你改一下, 输出 1, 2, 3, 4, 5
解决办法还是很多的, 就简单说两个常见的。
- 用闭包解决
for (var i = 1; i <= 5; i++) {;(function(j) {setTimeout(function timer() {console.log(j)}, j * 1000)})(i)
}
使用立即执行函数
将 i 传入函数内部。
这个时候值就被固定在了参数 j 上面不会改变,当下次执行 timer 这个闭包的时候,就可以使用外部函数的变量 j ,从而达到目的。
- [推荐] 使用
let
for (let i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)}, i * 1000)
}
执行上下文
首先, 执行上下文是什么呢?
简单来说, 执行上下文就是Javascript 的执行环境
。
当javascript执行一段可执行
代码的时候时,会创建
对应的执行上下文
。
组成如下:
executionContextObj = {this,VO,scopeChain: 作用域链,跟闭包相关
}
由于Javavscript是单线程
的,一次只能处理一件事情,其他任务会放在指定上下文栈
中排队。
Javascript 解释器在初始化执行代码时,会创建一个全局执行上下文到栈中,接着随着每次函数的调用都会创建并压入一个新的执行上下文栈
。
函数执行后,该执行上下文被弹出。
执行上下文建立的步骤:
- 创建阶段
- 初始化作用域链
- 创建变量对象
- 创建arguments
- 扫描函数声明
- 扫描变量声明
- 求this
- 执行阶段
- 初始化变量和函数的引用
- 执行代码
this
this 是Javascript中一个很重要的概念, 也是很多初级开发者容易搞混到的一个概念。
今天我们就好好说道说道。
首先, this 是运行时
才能确认的, 而非定义时
确认的。
在函数执行时,this 总是指向调用该函数
的对象。
要判断 this 的指向,其实就是判断 this 所在的函数属于谁
。
this 的执行,会有不同的指向情况, 大概可以分为:
- 指向调用对象
- 指向全局对象
- 用new 构造就指向新对象
- apply/call/bind, 箭头函数
我们一个个来看。
1. 指向调用对象
function foo() {console.log( this.a );
}
var obj = {a: 2,foo: foo
};
obj.foo(); // 2
2. 指向全局对象
这种情况最容易考到, 也最容易迷惑人。
先看个简单的例子:
var a = 2;
function foo() {console.log( this.a );
}
foo(); // 2
没什么疑问。
看个稍微复杂点的:
function foo() {console.log( this.a );
}
function doFoo(fn) {this.a = 4fn();
}
var obj = {a: 2,foo: foo
};
var a = 3
doFoo( obj.foo ); // 4
对比:
function foo() {this.a = 1console.log( this.a );
}
function doFoo(fn) {this.a = 4fn();
}
var obj = {a: 2,foo: foo
};
var a = 3
doFoo(obj.foo); // 1
发现不同了吗?
你可能会问, 为什么下面的 a
不是 doFoo
的a
呢?
难道是foo里面的a被优先
读取了吗?
打印foo和doFoo的this,就可以知道,他们的this都是指向window
的。
他们的操作会修改window中的a的值。并不是优先
读取foo中设置的a。
简单验证一下:
function foo() {setTimeout(() => this.a = 1, 0)console.log( this.a );
}
function doFoo(fn) {this.a = 4fn();
}
var obj = {a: 2,foo: foo
};
var a = 3
doFoo(obj.foo); // 4
setTimeout(obj.foo, 0) // 1
结果证实了我们上面的结论,并不存在什么优先。
3. 用new构造就指向新对象
var a = 4
function A() {this.a = 3this.callA = function() {console.log(this.a)}
}
A() // 返回undefined, A().callA 会报错。callA被保存在window上
a = new A()
a.callA() // 3, callA在 new A 返回的对象里
4. apply/call/bind
这个大家应该都很熟悉了。
令this指向传递的第一个参数,如果第一个参数为null,undefined或是不传,则指向全局变量。
var a = 3
function foo() {console.log( this.a );
}
var obj = {a: 2
};
foo.call(obj); // 2
foo.call(null); // 3
foo.call(undefined); // 3
foo.call(); // 3
var obj2 = {a: 5,foo
}
obj2.foo.call() // 3,不是5
//bind返回一个新的函数
function foo(something) {console.log(this.a, something);return this.a + something;
}
var obj =a: 2
};
var bar = foo.bind(obj);
var b = bar(3); // 2 3
console.log(b); // 5
5. 箭头函数
箭头函数比较特殊,它没有自己的this
。它使用封闭执行上下文
(函数或是global)的 this 值:
var x=11;
var obj={x:22,say: () => {console.log(this.x);}
}
obj.say(); // 11
obj.say.call({x:13}) // 11
x = 14
obj.say() // 14
//对比一下
var obj2={x:22,say() {console.log(this.x);}
}
obj2.say();// 22
obj2.say.call({x:13}) // 13
总结
以上我们系统的介绍了上下文
, 以及与之相关的作用域
, 闭包
, this
等相关概念。
介绍了他们的作用,使用场景以及区别和联系。
希望能对大家有所帮助, 文中若有纰漏, 欢迎指正, 谢谢。
在学习上有什么疑问随时可以找我我,与大家分享互联网web前端实战操作,无论你是否有基础,我都欢迎。点:前端技术分享
以及其任何超类对此上下文都是未知的_web前端入门到实战:Javascript 中的「上下文」你只需要看这一篇相关推荐
- 以及其任何超类对此上下文都是未知的_ECCV'20 |OCRNet化解语义分割上下文信息缺失难题...
编者按:图像语义分割一直都是场景理解的一个核心问题.针对语义分割中如何构建上下文信息,微软亚洲研究院和中科院计算所的研究员们提出了一种新的物体上下文信息--在构建上下文信息时显式地增强了来自于同一类物 ...
- web前端入门到实战:16个网页设计趋势,你都有知道吗?
时间进入2019年,我们在网页设计中看到旧有风格的重生,也见证了新的设计趋势的诞生.Web 技术的快速发展,不仅让设计和产品足以满足更多更细致深入的需求,也让设计师能够进行更细腻更独特的表达.现今的网 ...
- 以及其任何超类对此上下文都是未知的_浏览器原理系列 - JS执行上下文详解(一):作用域
本文主要介绍JS执行上下文相关的内容,理解了JavaScript的执行上下文才能更好地理解JavaScript语言本身以及该语言一些特性,如变量提升.作用域和闭包. 一.作用域 1.1 作用域 作用域 ...
- web前端知识点太多_web前端入门必学的16个知识点,都来看一下吧
1.HTML常用标签 语言是什么 .Web前端开发语言. HTML超文本标记语言 . 网页主体结构 .常用标签.超链接(a标签).Img图片标签 2.盒子模型 初探Div盒子模型 .css样式. 简单 ...
- bootstrap 点击按钮刷新_Spring Cloud 中的 Bootstrap 上下文
学习目标 复习 Spring 事件/监听器模式(ApplicationEvent / ApplicationListener) 理解 Bootstrap 上下文 理解 Spring Boot / Sp ...
- JavaScript深入之执行上下文栈
顺序执行? 如果要问到 JavaScript 代码执行顺序的话,想必写过 JavaScript 的开发者都会有个直观的印象,那就是顺序执行,毕竟: var foo = function () {con ...
- 你想了解的「SpringCloud」都在这里
前言: 之前我们已经了解了「什么是微服务?」,现在我们开始了解「微服务」关键字下比较热门的「Spring Cloud」... 一.传统架构发展史 部分引用自:从架构演进的角度聊聊Spring Clou ...
- JavaScript 数组你都掰扯不明白,还敢说精通 JavaScript ?| 赠书
作者 | 哪吒 来源 | CSDN博客 最近小编在看文章的时候,总有很多刚刚入门的小白说精通这个,精通那个技术,更有意思的是,最近看到一则简历上说精通 JavaScript ,聊一聊发现数组还不明白, ...
- 前端基础进阶(二):执行上下文详细图解
我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? var a = 20; 暂时先不管这个例子,我们先引 ...
最新文章
- easyui toolbar分隔线
- Android实用代码(不定期更新)
- golang 反射_云原生的 Java与Golang
- 数据中心机房的监控系统是否重要?
- 画一个圆角多边形_CAD零基础教程,矩形和多边形的画法
- micropython微控制器_MicroPython:针对微控制器的Python
- mysql 存储过程 条件_mysql sql存储过程条件定义与处理
- Problem M. Mediocre String Problem(Z 函数 + PAM)
- 顺序链表的C风格实现
- 用C语言编写一个关机程序
- 关于Log4j 1.x 升级Log4j 2.x 那些事
- 2021年烷基化工艺找解析及烷基化工艺考试试卷
- 【PTA题目】7-4 计算物体自由下落的距离 (5 分)
- POJ 1606 Jugs
- 共阴共阳数码管(及74HC595控制)
- 从校园到职场,别让父母限制了你的天花板
- 跳转饿了么小程序、跳转美团小程序、获取小程序路径、小程序生成小程序码不能选择第三方小程序、领红包功能开发(附源码)
- gaussdb数据库 oracle,GaussDB OLTP 100 华为数据库的创建脚本和模板
- Python制作小游戏(一)
- Kubernetes Pod垂直自动伸缩(VPA)