美文网首页
JS之变量提升到底有多少坑

JS之变量提升到底有多少坑

作者: 树下老大爷的小老弟 | 来源:发表于2020-05-09 20:06 被阅读0次

        什么是变量提升:当栈内存(作用域形成),JS代码自上而下执行之前,浏览器首先会把所带 var  /  function 关键字的进行提前声明 或者 定义 ( 这个过程也可以叫预编译 ),预编译阶段也有几点注意事项,咱们来看一看。

        在变量提升阶段:

    1.带 VAR 的只声明未定义,而带 FUNCTION 的声明和定义都完成了

变量提升

    在全局作用域下声明就相当于是给 window 对象添加了属性,属性名能重复嘛?答案肯定是不可以的,还有网上有很多资料说函数的优先级大于变量的优先级,我个人感觉这种说法不合理,大家一起来看一道题:

变量提升重名操作

    那从上面可以看出,根本就没有什么优先级,只有提升不断重新赋值而已。

    2.变量提升只发生在当前作用域下(例如:开始加载页面的时候只对全局作用域下的进行提升,因为此时函数中存储的都是字符串而已)

画图解析

    3.变量提升只对等号左边的值进行处理,例如:

等号左边

    4. 带 function的 在老版本浏览器渲染机制下,声明和定义都会处理,但是为了迎合ES6中的块级作用域,新版浏览器对于函数(在条件判断中的函数),不管条件是否成立,都只是先声明,没有定义,类似于 var,但是在 条件成立的情况下第一件事并不是代码执行,而是类似于变量提升一样,先把fn 声明和定义了 

判断条件下

    5.带关键字 VAR 和 不带关键字 VAR 的区别:

var与不var 的区别

var 声明一个变量其实可以说是给 window 全局对象设置了一个属性,变量的值就是属性值,私有作用域中声明的私有变量和 window 无关,全局变量和 window 中的属性存在 “ 映射机制 ”,从赋值可以看出,window.a 改变了变量 a 的值。

不使用 var 的话 可以理解为给 window 对象 添加了一个属性,没有提升,此时作用域链中没有这个 b 所以就会报错。

以上就是本人对 var 变量提升的理解及认知,面试的时候也有会不少公司问到,其实就一句,不想有变量提升 可以使用ES6中 let ,但是变量提升你还不能不掌握 ,在这里就不说 let 了,最后给大家来一道面试题开开胃,下方附图片及代码

面试题

f = function () { return true; }

g = function () { return false; }

~function () {

    if (g() && [] == ![]) {

        f = function () { return false; }

        function g() { return true; }

    }

}();

console.log(f());

console.log(g());

这道题只适用于新版浏览器,不要怀疑题目给错了,各位看看考点在那里吧

还有那句话:如有不对之处及不周之处请大佬们指出,也希望对一些人有所帮助,咱们下次再会!

相关文章

  • 理解 JS 作用域链与执行上下文

    贫道,感觉,JS的坑,不是一般地大。 变量提升: 变量提升( hoisting )。 我可恨的 var 关键字: ...

  • JS之变量提升到底有多少坑

    什么是变量提升:当栈内存(作用域形成),JS代码自上而下执行之前,浏览器首先会把所带 var / function...

  • ES6——let 和 const 命令

    1.关于JS变量提升的一些坑 1.1变量 1)函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部2)...

  • JS中的提升

    JS中包含两种提升,变量提升和函数提升。 变量提升 变量提升只能是var或者function声明的变量或者函数,l...

  • 浏览器学习笔记-JS执行

    变量提升 变量提升原理浏览器对js是先编译后执行,在编译过程中,js中的变量声明会被提升到代码段落前面。函数声明和...

  • JavaScript 大纲

    js 语法基础 JavaScript 介绍 js 输出 注释 变量,变量声明提升,全局变量,常量 7 大数据类型 ...

  • Javascript 变量执行过程 和 数组 & 对象的区别

    变量提升 JS执行过程1. 先提升(先提升函数,再提升变量,如果名字一样,变量提升会覆盖函数提升)2. 再执行,如...

  • 变量提升和函数提升

    JS不像C语言,C语言是先声明后使用,否则会报错。但JS中,有变量提升现象,可以先使用后声明。 JS存在变量提升,...

  • 前端经典面试题合集(一)

    1.谈谈变量提升 考察点:js基础知识,js执行机制,变量的提升答:执行js代码时,会生成执行环境,在函数中的代码...

  • 变量声明提升

    变量声明提升是JS中一个基础的问题,同时也是对JS词法作用域认识的一个提升。在JS面试题中,关于变量声明提升的问题...

网友评论

      本文标题:JS之变量提升到底有多少坑

      本文链接:https://www.haomeiwen.com/subject/fzhlnhtx.html