读书笔记-你不知道的JS上-词法作用域
JS引擎
编译与执行
Javascript引擎会在词法分析和代码生成阶段对运行性能进行优化,包含对冗余元素进行优化(例如对语句在不影响结果的情况下进行重新组合)。
对于Javascript来说,大部分情况下编译发生在代码执行前的很短时间内,涉及的概念有引擎、编译器、作用域。
变量声明例如var a = 2这条表达式,编译阶段会先查询作用域是否有同名变量,如果有就忽略声明(仅仅忽略var的声明),继续编译。如果没有,会在当前作用域的变量集合中创建一个变量,命名为a。
{
//编译阶段找不到a 执行var a
var a = 1;
//运行阶段执行 a = 1
console.log(a); //
//编译阶段找到了变量a 忽略此条语句
var a = 2;
//运行阶段执行 a = 2
console.log(a); //
}
LHS查询与RHS查询
当变量被使用时,会进行查询操作,例如赋值操作a = 1是LHS查询,另外一种称为RHS查询。
简单理解就是,对于赋值操作(包括隐性的)为LHS,作为变量进行引用时时RHS查询。
{
//赋值操作 LHS查询
var a = 1;
function fn(a) {
//进入函数体存在一个隐性的a = 2操作
//log使用RHS查询
console.log(a);
}
//函数调用发生RHS查询 2作为引用传入
fn(2);
}
作用域嵌套
一个块或函数嵌套在另一个块或函数中时,就会形成作用域嵌套,在当前作用域无法找到某个变量时,就会在外层作用域继续查找,直到找到该变量;或者没找到,抛出一个错误,查询停止。
词法作用域
作用域有两个工作模型,一种是词法作用域,另一种叫动态作用域。
//全局作用域
//包含f1
function f1(a) {
var b = a * 2;
//f1的作用域
//包含a,b,f2,
function f2(c) {
//f2的作用域
//包含c
console.log(a, b, c); // 2,4,4
}
f2(b)
}
f1(2)
变量查找会先从最内部的作用域开始查找,找不到会去上一级嵌套的作用域。
无论函数在哪里被调用,也无论如何被调用,词法作用域都只由函数被声明时所处的位置决定。(闭包)
function outer() {
//找到后返回a
var a = 1;
//保留对outer作用域中a的引用
function inner() {
//被调用时开始查询变量a
return a;
}
return inner();
}
function f1() {
//outer作用域决定于声明处
//所以不会查找到f1的a
var a = 2;
//在这里调用词法作用域依然不会变
outer();
}
f1(); //
顺便讲一下闭包为什么会改变变量的生命周期,闭包需要两个条件。
1、外部函数内部有另外一个函数,并对外部函数的某个变量保持了引用。
2、外部函数提供一个内部函数的访问接口。
而内部函数对外部作用域的引用保持就叫闭包。
生命周期的问题还要提到GC回收问题,一般常见的回收算法有两种:引用计数算法、标记算法,由于引用计数会出现循环引用问题,这里以标记算法举例简单讲一下。标记算法会将代码构建成类似于DOM树之类的结构,根节点为window,第一轮先开始向下遍历,可以被根节点引用的变量上一个标记(假设为false)。遍历完后,第二轮开始清除操作,所有标记为true将会被垃圾回收。看不懂的话,还是看代码注释吧。
function fn1() {
var a = 1;
//闭包条件1
function fn2() {
a = a + 1;
return a;
}
//闭包条件2
return fn2;
}
var fn = fn1();
// a变量并没有被回收
// window.fn => fn2 => a 可以获取到a 保留
console.log(fn()); //
console.log(fn()); //
function fn3() {
var b = 1;
b++;
//此函数没用
function fn4() {
console.log(b);
}
return b;
}
//window.fn3 => ??? b无法被引用 消除
console.log(fn3()); //
console.log(fn3()); //2 被回收了并再次初始化
另外,可以通过eval和with语法强行修改作用域,但并不推荐使用,主要是性能方面的问题。因为引擎在编译时会对词法作用域进行分析优化,保证代码运行时能更快的找到对应的变量,但是如果有eval问题就不一样了,无法保证会传入什么代码,有可能会影响现有的作用域导致优化失败,所以引擎可能会根本不优化,
读书笔记-你不知道的JS上-词法作用域的更多相关文章
- 读书笔记-你不知道的JS上-函数作用域与块作用域
函数作用域 Javascript具有基于函数的作用域,每声明一个函数,都会产生一个对应的作用域. //全局作用域包含f1 function f1(a) { var b = 1; //f1作用域包含a, ...
- 读书笔记-你不知道的JS上-this
关于this 与静态词法作用域不用,this的指向动态绑定,在函数执行期间才能确定.感觉有点像C++的多态? var a = 1; var obj = { a: 2, fn: function() { ...
- 读书笔记-你不知道的JS上-闭包与模块
闭包定义 当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行. 看一段最简单的闭包代码: function foo() { var a = 2; //闭包 fun ...
- 读书笔记-你不知道的JS上-对象
好想要对象··· 函数的调用位置不同会造成this绑定对象不同.但是对象到底是什么,为什么要绑定他们呢?(可以可以,我也不太懂) 语法 对象声明有两个形式: 1.字面量 => var obj = ...
- 读书笔记-你不知道的JS上-声明提升
变量声明提升 Javascript代码一般情况下是由上往下执行的,但是有些情况下不成立. a = 2; //变量声明被提升在当前作用域顶部 var a; console.log(a); console ...
- 读书笔记-你不知道的JS上-混入与原型
继承 mixin混合继承 function mixin(obj1, obj2) { for (var key in obj2) { //重复不复制 if (!(key in obj1)) { obj1 ...
- 《你不知道的JavaScript》读书笔记(二)词法作用域
JavaScript 采用的是 词法作用域 的工作模型. 定义 词法化:大部分标准语言编译器的第一个工作阶段叫词法化(单词化),这个过程会对源代码中的字符进行检查,如果是有状态的解析过程,还会赋予单词 ...
- 读书笔记-你不知道的JavaScript(上)
本文首发在我的个人博客:http://muyunyun.cn/ <你不知道的JavaScript>系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷,受益匪浅,于是对其精 ...
- 读书笔记-你不知道的JS中-promise
之前的笔记没保存没掉了,好气,重新写! 填坑-- 现在与将来 在单个JS文件中,程序由许多块组成,这些块有的现在执行,有的将来执行,最常见的块单位是函数. 程序中'将来'执行的部分并不一定在'现在'运 ...
随机推荐
- 简易RPC框架-私有协议栈
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 三大修饰符static,final,abstract,接口和抽象类的区别
package com.cityhero.test; public class ThreeModifier { //static静态的 // 概念:static可以修饰方法和属性,被static修的方 ...
- GitHub使用(一) - 新建个人网站
1.首先进入“仓库Repositories”,点击“新建New”.
- java中堆栈的功能作用 以及區別(搜集)
1.用new创建的对象在堆区,函数中的临时变量在栈区,Java中的字符串在字符串常量区. 2.栈:存放进本数据类型的数据和对象的引用,但对象本身不存在栈中,而是存放在堆中. 堆:存放new产生 ...
- 当你的SSM项目中的springmvc.xml发生第一行错误解决方案
当你新建了一个SSM项目,你复制网上的xml文件来配置或者你下载了一个SSM项目打开发现xml文件错误,打开是第一行报错的时候你是不是很懵逼 或者是这样 总之就是xml文件中<?xml vers ...
- 编码格式简介:ASCII码、ANSI、GBK、GB2312、GB18030和Unicode、UTF-8,BOM头
编码格式简介:ASCII码.ANSI.GBK.GB2312.GB18030和Unicode.UTF-8,BOM头 二进制: 只有0和1. 十进制.十六进制.八进制: 计算机其实挺笨的,它只认识0101 ...
- jquery.i18n.properties前端国际化解决方案“填坑日记”
但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...
- Query DSL(2)----Full text queries
Match Query match查询接受文本/数值/日期 { "match" : { "message" : "this is a test&quo ...
- 我的第一篇blog—— 一起来赛马呀
作为一名大三的学生现在开始学习acm,或许太晚.感叹时光蹉跎....我的blog将以讲解的形式的发布,以专题的形式的形式介绍一些基本的知识和经典的题目.虽然感觉自己所剩时间无多,但也希望起到前人种 ...
- 扩展jquery.validate自定义验证,自定义提示,本地化
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...