首页 > 编程语言 >JavaScript词法作用域(你不知道的JavaScript)

JavaScript词法作用域(你不知道的JavaScript)

时间:2023-03-13 18:32:21浏览次数:39  
标签:function console log 作用域 JavaScript 词法 var foo


JavaScript并不是传统的块级作用域,而是函数作用域!

一、作用域


1. JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤:

第一步(编译阶段):var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。

第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值。

2. LHS & RHS(当前作用域->上级作用域->...->全局作用域)

LHS(左侧):试图找到变量的容器本身

RHS(右侧):查找某个变量的值

示例:

function foo(a){
var b = a;
return a + b;
}
var c = foo(2);
// LHS(3处):c;a(隐式变量分配);b;
// RHS(4处):foo(2);=a;a;b;

3. 异常


function foo(a){
console.log(a + b);
b = a;
}
foo(2);

(1)在ES5“严格模式”下,LHS抛出ReferenceError;“非严格模式”下,LHS会自动隐式的创建一个全局变量。

(2)RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。

(3)RHS查询到一个变量,但你尝试对其不合理的操作(引用null或undefined类型中的属性),会抛出TypeError。

一句话概括之:ReferenceError同作用域判别失败相关;而TypeError则代表作用域判别成功了,但是对结果的操作是非法或不合理的。


PS:从原理上阐述了博客中《JavaScript函数及其prototype》函数执行覆盖等问题!!!

二、词法作用域


词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。JavaScript中有两个机制可以“欺骗”词法作用域:eval(...)和with。

1. eval

eval函数可以接受一个字符串参数,并将其中的内容视为好像在书写时存在于程序中这个位置的代码(在当前位置,可生成代码,并运行)。

eval可以对一段包含一个或多个声明的“代码”字符串进行演算,并借此修改已经存在的词法作用域(运行阶段)。

function foo(str,a){
eval(str);
console.log(a, b); //1 , 3
console.log(a, window.b); //1 , 2
}
var b = 2;
foo("var b = 3;", 1);

解释:上述全局变量b被覆盖了,由于b是全局的,可以window.b获取到;但非全局的变量如果被覆盖,就无法访问到了!


严格模式下:


function foo(str,a){
"use strict";
eval(str);
console.log(a, b); //1 , 2
console.log(a, window.b); //1 , 2
}
var b = 2;
foo("var b = 3;", 1);

2. with


with通常被当作重复引用一个对象中的多个属性的快捷方式,可以不需要重复引用对象本身。


with将对象的属性当作作用域中的标识符来处理,从而创建了一个新的词法作用域(运行阶段)。


function foo(obj){
with(obj){
a = 2;
}
}
var o1 = { a : 3 };
var o2 = { b : 3 };

foo(o1);
console.log( o1.a ); // 2

foo(o2);
console.log( o2.a ); // undefined
console.log( a ); // 2,表明a泄漏到全局作用域上了!

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化,导致代码运行速度变慢,建议不要使用它们!


PS:从原理上阐述了博客《 JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因!!! 

三、函数作用域和块作用域


1. 匿名和具名

/* 匿名(引用自身只能用过期的arguments.callee引用) */
setTimeout(function(){
console.log("i wait 1 second!")
},1000);
/* 具名(可读性好) */
setTimeout(function timeoutHandler(){
console.log("i wait 1 seco nd!")
},1000);

2. 立即执行函数表达式


/* IIFE模式 */
var a = 2;
(function IIFE(global){
var a = 3;
console.log(a); //3
console.log(global.a); //2
})(window);
/* UMD模式 */
var b = 2;
(function UMD(def){
def(window);
})(function tmpF(global){
var b = 3;
console.log(b); //3
console.log(global.b); //2
});

3. 块作用域


try/catch会创建一个块作用域


try{
undefined();
}catch(err){
console.log(err); //可以正常使用
}
console.log(err); //ReferenceError: err is not defined

/* 坑1 */
for(var i=0;i<10;i++){}
console.log(i); //10
/* 坑2 */
{
console.log(bar); //undefined 不会报错!!
var bar = 2;
}

ES6中引入新的let关键字!!


/* 填坑1 */
for(let i=0;i<10;i++){}
console.log(i); //SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
/* 填坑2 */
{
console.log(bar); //SyntaxError 报错!!
let bar = 2;
}


推荐两个将ES6代码转化成兼容ES6之前的环境(大部分是ES5,但不全是)工具:Traceur和let-er


标签:function,console,log,作用域,JavaScript,词法,var,foo
From: https://blog.51cto.com/u_15998238/6118372

相关文章

  • 1.javaScript日期格式化转换
    //(newDate()).Format("yyyy-MM-ddhh:mm:ss.S")==>2006-07-0208:09:04.423Date.prototype.Format=function(fmt){varo={"M+":this.getMonth()+1,//mont......
  • JavaScript事件代理,减少开销提高效率
    JavaScript事件代理(事件委托),即把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。众所周知,DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事......
  • JavaScript回调函数
    JavaScriptAPI里这样解释:Acallbackisafunctionthatispassedasanargumenttoanotherfunctionandisexecutedafteritsparentfunctionhascompleted.(回调......
  • java学习日记20230311-方法重载/可变参数/作用域
    方法重载java中允许同一个类中,多个同名方法的存在,但要求形参列表不一致:System.out.println();减轻了起名的麻烦减轻了记名的麻烦方法名必须相同形参列表必须不同(个......
  • JavaScript异步编程的深入理解,使用回调函数实现异步编程
    异步编程是指在程序运行时,任务不会按照函数调用的顺序依次执行,而是可以同时执行多个任务。JavaScript异步编程有很多种方式,例如使用回调函数、Promise、async/await等。下面......
  • [JS JavaScript] 使用CryptoJS库对给定的加密字符串进行解密
    本代码可以使用在Web中,或者其他可以出入密码的场景在需要解密的信息不大的情况下,可以将加密后的信息放入到JS中,在输入密码后,对加密后的信息进行解密在vue中,可以很方便的......
  • Android与H5(JavaScript)之间的简单交互
    Android响应Js的动作 假设网页端要调用Android原生的方法:showToast();1.做一个盆子接收消息(创建一个工具类,写一个方法(*带注解))publicclassJavaScriptMethod{......
  • 【JavaScript】41_包装类与垃圾回收机制
    10、包装类在JS中,除了直接创建原始值外,也可以创建原始值的对象通过newString()可以创建String类型的对象通过newNumber()可以创建Number类型的对象通过newBoolean()......
  • JavaScript表单
          ......
  • Spring-DI(依赖注入)及Bean的作用域
    DI(依赖注入)1、构造器注入前面已经说过了2、set方式注入【重点】依赖注入:Set注入依赖:bean对象的创建依赖于容器注入:bean对象中的所有属性,由容器来注入【环境......