一、js作用域

一、理解js作用域

1、作用域:作用域是一套规则,用于确定在何处以及如何查找变量(标字符)。
2、LHS查询:查找的目的是对变量进行赋值;
3、RHS查询:查找的目的是获取变量的值;
(赋值操作符会导致LHS查询、=操作符获调用函数是传入参数的操作会都会导致关联作用域的赋值操作)
eg、

function foo(a){
    var b=a;
    return a+b;
}
var c=foo(2);
//LHS查询(3处)c=...、a=2(调用函数传参的隐式变量分配)、b=..
//RHS查询(4处)foo(2..)、=a、a..、...b

4、JavaScript引擎会先在代码执行前对其进行编译,如var a=2分为两个步骤:
(1)、首先,var a在其作用域中声明新的变量a、这会在最开始的阶段,也就是代码执行前进行(声明提前);
(2)、接下来,a=2会查询(LHS查询)变量a并对其进行赋值。

LHS和RHS查询都会在先在当前执行作用域中开始,如果在当前作用域中没有找到所需标识符,就会向上一级继续查找直到顶层全局作用域
**不成功的RHS引用会抛出referenceError异常;不成功的LHS引用会导致自动隐式的创建一个全局变量(非严格模式下) **

二、词法作用域

  • 定义
    。定义在词法阶段的作用域,由你写代码是将变量和块作用域写在哪里所决定
  • 查找
    。作用域始终从运行时所处的最内部作用域开始查找,逐级向外部进行,直到遇见第一个匹配的标识符为止;
  • 词法欺骗
    。在词法阶段通过代码欺骗和假装成书写,来实现修改词法作用域;
    。欺骗词法作用域会导致性能下降,应尽量避免使用;
    。js中会“欺骗”词法作用域的两种机制:
    (1)eval(..)
    *可接收一字符串参数,并将其内容视为在书写时就存在于程序中的这个位置;
    eg:
function foo(str,a) {
    eval(str);//欺骗
    console.log(a,b);
    // body...
}
var b=2;
foo("var b=3;",1);//1  3

*在严格模式的程序中,eval()在运行时有其自己的词法作用域,即其中的声明无法修改所在的作用域;
eg:

function foo(str,a) {
    "use strict";
    eval(str);//欺骗
    console.log(a,b);
    // body...
}
function foo1(str) {
    "use strict";
    eval(str);//欺骗
    console.log(a);//ReferenceError: a is not defined
    // body...
}
foo1("var a=3;");

(2)with
。重复引用同一对象中多个属性的快捷方式;
。with可以将一个没有或有多个属性的对象处理为为一个完全隔离的词法作用域,因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。
eg:

function foo2(obj){
   with(obj){
        a=2; //实际是一个LHS引用
    }
}
var o1={
    a:3
};
var o2={
    b:3
};
foo2(o1);
console.log(o1.a);//2;o1传递进去,a=2赋值操作找到o1.a并将2赋值给它
foo2(o2);
console.log(o2.a);//undefined:o2传递进去,o2没用a属性,因此不会创建这个属性
console.log(a)//2----a被泄露到全局作用域

。o2、foo(..)、和全局的作用域中都没有找到标识符a,因此当a=2执行时会自动创建一个全局变量(非严格模式)
。尽管with块可以将一个对象处理为词法作用域,但这个块内部的正常var声明不会被限制在这个块中,而是被添加到with所处的函数作用域中。
eg:

function foo3(obj){
    with(obj){
        var a=2; //实际是一个LHS引用
}
}
var o1={
    a:3
};
var o2={
    b:3
};
foo3(o1);
console.log(o1.a);//2;o1传递进去,a=2赋值操作找到o1.a并将2赋值给它
foo3(o2);
console.log(o2.a);//undefined:o2传递进去,o2没用a属性,因此不会创建这个属性
console.log(a)//ReferenceError: a is not defined

三、函数作用域

  • 含义:
    。指的是属于这个函数的全部变量都可以在整个函数的范围内使用及复用(事实上在 嵌套的作用域中也可以使用)
  • 函数声明和函数表达式:
    。区分:看function关键字出现在声明中的位置;如果是声明中的第一词,那么就是一个函数声明,否则就是一个函数表达式.
  • IIEF立即执行函数表达式
    eg:
var a=2;
(function IIEF(global){
    var a=3;
    console.log(a);//3
    console.log(global.a);//2
})(window);
console.log(a);//2

1)函数被包含在()中,因此成了一个表达式;通过后面的()可以立即执行这个函数;
2)通过后面的()可传入参数,例中传入window对象并命名为global。
。IIEF还有一种变化用途是倒置代码的运行顺序,将需要运行的函数放在第二位,在IIEH执行之后当做参数传递进去
eg:

var a = 2;
(function IIFE( def ) {
    def(window);
})(function def( global ) {
    var a = 3;
    console.log( a );   // 3
    console.log( global.a);   //2
});

四、块作用域

  • 在JavaScript中只有函数作用域,没有块级作用域。
for(var i = 0; i < 10; i++) {}console.log( i ); // 10

。在for循环的头部定义了变量i,通常只是想在for循环内部的上下文使用i,而忽略了i会被绑定到外部作用域(函数或全局)。

var foo = true;if (foo) { var bar = foo * 2; }console.log( bar ); // 2

。bar变量虽然在if声明中的上下文使用,但它们最终都属于外部作用域。

  • ** with**
    。with也是块级作用域的一种形式,用with从对象中创建出的作用域仅在with声明中有效。
  • ** try/catch**
    。ES3规范的try/catch的catch分句会创建一个块级作用域,其中声明的变量只在catch内部有效。
try {
 foo();
}
catch(err) {
 var a = 0; console.log( err ); //可以执行
}
console.log( a ); // 0;
console.log( err ); // err not found
  • let
    。ES6的let可以将变量绑定到所在的任意作用域(通常是{...})。
var foo = true;
if (foo) {
 let bar = foo * 2;
 console.log( bar ); // 2
}
console.log( bar ); //referenceError
。**使用let进行的声明不会在块级作用域中提升。声明的代码被运行前,声明并不“存在”。**
console.log( bar ); //ReferenceError
 let bar = 2;
  • ** const**
    。 ES6引入const同样能创建块级作用域,但其值是常量。
var foo = true;
if (foo) { 
var a = 2;
 const b = 3; // 包含在if中的块级作用域常量
 a = 3;
 b = 4; // 错误
}
console.log( a ); // 3
console.log( b ); // ReferenceError

五、提升(声明提前)

eg:

foo();
function foo(){
    a=2;
    console.log(a);//2
    var a;
}

。定义声明如var a;是在编译阶段进行的;赋值声明会留在原地等待执行阶段;
。简单讲,即包含变量和函数在内的所有声明都会在任何代码被执行之前首先被处理.
。注意:函数声明会被提升,当是函数表达式不会被提升。(下例中,var ber被提升,但函数表达式..=function foo(){}并不会提升,故ber()抛出TypeError异常而不是ReferenceError)
eg:

ber();  //TypeError: ber is not a function
var ber=function foo(){
    a=2;
    console.log(a);
    var a;
}
  • 函数优先
    。函数声明和变量声明都会被提升,但是函数会首先被提升,然后才是变量
    eg:
foo1();//a
var foo1;
function foo1(){
    console.log("a");
};
foo1=function(){
    console.log("b")
};
foo1()//b
。以上代码被引擎理解为:
function foo1(){
    console.log("a");
}
foo1();//a
foo1=function(){
    console.log("b")
}
foo1()//b
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容