你胸大你先说:变量提升

  场景引入:一个屋子里,不管进门的顺序如何,如果有胸大腰细的妹子,总是有最先说话的权利。  场景类比:一段代码内,不管声明的顺序如何,显式声明的变量和函数,总是会被提到最前解析。

 这次要介绍的同样是js世界很奇怪的现象:变量提升。定义如下: Hoisting is JavaScript‘s default behavior of moving declarations to the top.    提升是js的默认行为,它把声明(变量或函数)移动到(当前作用域的)最顶

    一般计算机语言,有“先声明再使用”的规则。但是对于js,在同一个作用域内,不管声明放在哪个位置,总会自动被放到最前,比如:
    cup  = ‘C‘;
  console.log("cup: " + cup);//cup: C
    var cup;//全局的罩杯会被提升到最前

    function hoisting(){
        if(!cup){
            cup = ‘D‘
        }
        console.log("cup: "+cup);
        var cup;//这个优先被解释
    }
   hoisting(); //cup: D
    //你得罩杯提升啦,开心吗?

  要注意的是,被提上来的仅仅是声明,而不是初始化(赋值),对它赋值是不能够被提前的,比如:

        function hoisting2(){
        console.log("cup: "+cup);
        var cup = ‘E‘;//你在想E罩杯岂不是更好?
    }
    hoisting2();//cup: undefined
       //很遗憾,你隆胸失败啦,并且变回了飞机场

  而函数声明同样会被提前,让人欣慰的是,函数体同样会被提前。 这个大家想必已经灰常熟悉了,但也还是展示个例子吧:

    hoisting3();  //做妹子不能太贪心,好啦,D-cuo还给你
    function hoisting3(){
        cup = ‘D‘;
        console.log("cup: "+cup);//cup: D
  }
  

  顺便提一下作用域:在JavaScript中,一个作用域(scope)中的名称(name)有以下四种:

  1. 语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。

  2. 函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。

  3. 函数声明(Function decalrations): 通过function foo() {}的形式。

  4. 变量声明(Variable declarations): 通过var foo;的形式。

  前两点,this和参数放置最前,这毫无疑问。 而对于后面两点,应该是ECMA规范,所以js就这么设计的。

  

  了解这个的意义是啥?

  我们在编码时,都应该把var声明放在代码的最前,并且同时初始化。如此,又让代码优雅,又不会出现不必要的麻烦。

时间: 2024-11-08 23:43:45

你胸大你先说:变量提升的相关文章

JavaScript中的各种变量提升(Hoisting)

首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升(Hoisting). JS 存在变量提升(Hoisting),这个的设计其实是低劣的,它允许变量不声明就可以访问,或声明在后使用在前.新手对于此则很迷惑,甚至许多使用JS多年老手也比较迷惑.但在 ES6 加入 let/const 后,变量Hoisting 就不存在了. 一. 变量未声明,直接使用 f

js变量提升的一个小坑

好久没写博客了,原本想实训结束能对整个实训项目认真总结一下,没想到回到学校一点都不轻松,最近在制作网页版简历,遇到了一个小问题,现在不总结以后肯定忙得顾不上,所以长话短说,抓紧时间写下来. 对js语法比较熟的同学可能都知道:js是没有块级作用域的,有一个新手很容易出错的地方 for(var i = 0 ; i < 10 ; i ++){ setTimeout(function(){ console.log(i) },1000*i) } 这段代码会输出10个10,而不是期望的1,2,...,10,

关于JS中变量提升的规则和原理的一点理解

????关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你看个栗子,你也会恍然大悟的: (function(){ console.log(v); var v = 'I love you'; console.log(v); })() // undefined I love you ????这就是一个典型的变量提升的例子了,规则是怎样的呢,我的理解是在一个作用

js中的变量提升和函数提升

1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域. 首先来解释一下什么是没有块级作用域? 所以此时 是可以打印输出变量a的值. 2:什么是变量提升? 在我们的js中,代码的执行时分两步走的,1.解析 2.一步一步执行 那么变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去. 那么上面这种写法其实等价于下面这种写法: 看几个例子: 把上面的例子稍作改动: 结果就会大不一样, 再看一个例

JS Foo.getName笔试题解析,杂谈静态属性与实例属性,变量提升,this指向,new一个函数的过程

 壹 ? 引 Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,遗憾的是我在19年才遇到它,比较奇妙的是现在仍有公司会使用这道题.相关解析网上是有的,这里我站在自己的理解做个记录,也算是相关知识的一次复习,题目如下,输出过程也直接标出来了: function Foo() { getName = function () { console.log(1); }; return this; }; Foo.getName = function () { cons

js 变量提升+方法提升

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = 100; function t() { alert(a); var a = 10; } t(); //输出结果为undefine

JavaScript变量提升及作用域

今天在知乎看前端面试题的时候,看到这样的问题,发现自己懂的真的是太少了,看了给的例子,所以写一下自己的理解. 首先放一段代码: var v= "hello JavaScript"; alert(v); 很明显,这样的是会弹出对话框: 将alert(v)写到一个函数中: var v= "hello JavaScript"; function test(){ alert(v); }; test(); 这样弹出的结果肯定也是和第一个一样:那么下面这种方式输出的结果是什么?

js变量提升小记

作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升. 每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在着一定的陷阱.首先看一下下面一道题: <script> var str1 = "haha"; var str2 = "hehe"; function t1() { console.log(str1); console.log(str2); var str2

js变量作用域--变量提升

1.JS作用域 在ES5中,js只有两种形式的作用域:全局作用域和函数作用域,在ES6中,新增了一个块级作用域(最近的大括号涵盖的范围),但是仅限于let方式申明的变量. 2.变量声明 1 var x; //变量声明 2 var x=1; //变量声明并赋值 3 x = 1; // 定义全局变量并赋值 3.函数声明 function fn(){}; //函数声明并定义 var fn = function(){}; // 实际上是定义了一个局部变量fn和一个匿名函数,然后把这个匿名函数赋值给了fn