JS中var let声明范围区别详解

 更新时间:2023年07月13日 09:01:49   作者:土豆  
这篇文章主要为大家介绍了JS中var let声明范围区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

var声明提升

console.log(name)  //土豆
var name = '土豆';

使用var声明的变量会自动提升到函数作用域的顶部

function foo(){
    console.log(name);
    var name = "土豆";
}
foo()  //undefined
//等价于
function foo(){
    var name;
    console.log(name);
    name = "土豆";
}
foo(); //undefined
console.log(name)  //ReferenceError name没有被定义
let name ="土豆";

而使用let定义的name不会被提升,报出ReferenceError的错误;

var可以重复声明同一个变量

var name = "番茄";
var name = "西瓜";
var name = "土豆";
console.log(name);//土豆

而使用let重复声明同一个变量会报错。

var name = "土豆";
let name = "土豆";
console.log(name);//'name' has already been declared
let name = "土豆";
var name = "土豆";
console.log(name);//Cannot redeclare block-scoped variable 'name'.

var全局声明

var name = "土豆";
console.log(window.name);//土豆
let age = "24";
console.log(window.age);  //undefined

使用var定义的变量会被挂载到window上,成为window对象的属性,而使用let不会。

作用域

if(true){
    var name = "土豆";
    console.log(name);
}
console.log(name);
//土豆
//土豆
if(true){
    let age = 24;
    console.log(age);
}
console.log(age);
//24
//undefined

使用var声明的范围是函数作用域,使用let声明的范围是块作用域。

以上就是JS中var let声明范围区别详解的详细内容,更多关于JS var let声明范围区别的资料请关注脚本之家其它相关文章!

相关文章

  • JS图片懒加载技术实现过程解析

    JS图片懒加载技术实现过程解析

    这篇文章主要介绍了JS图片懒加载技术实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Django1.7+JQuery+Ajax验证用户注册集成小例子

    Django1.7+JQuery+Ajax验证用户注册集成小例子

    下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用。注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在,需要的朋友可以参考下
    2017-04-04
  • 超出JavaScript安全整数限制的数字计算BigInt详解

    超出JavaScript安全整数限制的数字计算BigInt详解

    这篇文章给大家分享了超出JavaScript安全整数限制的数字计算BigInt的相关知识点,有兴趣的朋友参考学习下。
    2018-06-06
  • js 模仿锚点定位的实现方法

    js 模仿锚点定位的实现方法

    下面小编就为大家带来一篇js 模仿锚点定位的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS前端接口防止重复请求的三种实现方案

    JS前端接口防止重复请求的三种实现方案

    前段时间心血来潮,想把项目的前端都做一下接口防止重复请求的处理,虽然大部分的接口处理我们都是加了loading的,但又不能确保真的是每个接口都加了的,下面就来总结一下这次的防重复请求的实现方案,需要的朋友可以参考下
    2024-03-03
  • javascript中关于break,continue的特殊用法与介绍

    javascript中关于break,continue的特殊用法与介绍

    javascript大家所熟知中的for是一个循环体,循环体其中的break和continue也是大家都比较熟悉的功能,相信大家对它们的用法不会陌生,本文不是介绍其功能,本文假设你已经熟悉break和continue的语意和用法
    2012-05-05
  • 鼠标移入移出改变CSS样式的小例子

    鼠标移入移出改变CSS样式的小例子

    本篇文章介绍鼠标移入移出改变CSS样式的实例演示,需要的朋友可以参考一下
    2013-06-06
  • 详解JavaScript中的六种错误类型

    详解JavaScript中的六种错误类型

    本文给大家详细介绍了JavaScript中的六种错误类型,需要的朋友可以参考下
    2017-09-09
  • eval(function(p,a,c,k,e,d)系列解密javascript程序

    eval(function(p,a,c,k,e,d)系列解密javascript程序

    在网上下载源代码时,很可能发现代码里的JS脚本看不懂,这是由于JS加密造成的。如果你发现JS是以eval(function(p,a,c,k,e,r){e=function(c)开头的,看到这个页面你就可以解决他
    2007-04-04
  • 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    下面小编就为大家带来一篇基于Bootstrap模态对话框只加载一次 remote 数据的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论