千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 不使用var定义的变量

不使用var定义的变量

来源:千锋教育
发布人:qyf
时间: 2022-10-10 14:52:27 1665384747

  js变量

  JavaScript声明变量可以用var声明,也可以不用var声明,两种声明变量的方式有什么区别呢?

  注:此处暂不讨论 ES6 中的 let 和 const

  JavaScript变量分为 局部变量 和 全局变量

  简单理解:

  在函数中用var声明的变量即为 局部变量

  在函数外用var声明的变量即为 全局变量

  但是,这里说的函数中和函数外也不是绝对的,看以下代码及分析:

  // demo1

  var a = 123; // 全局变量

  var b = 456; // 全局变量

  console.log(a); // 123

  console.log(b); // 456

  console.log(window.a); // 123

  console.log(window.b); // 456

  console.log(window); // 打印结果如下图

2d1e8385-11bb-4886-b692-f9547272de9e_output

  demo1 可以看到,不管是直接访问变量 a b 或是访问window对象的属性 a b 都能输出相同结果

  // demo2

  var a = 123; // 使用var声明

  b = 456; // 不使用var声明

  console.log(a); // 123

  console.log(b); // 456

  console.log(window.a); // 123

  console.log(window.b); // 456

  console.log(window); // 打印结果如下图

591437051665384504109

  demo2 打印结果和上面 demo1 "相同"

  另外,使用var声明变量也叫显示声明,不用var声明变量也叫隐式声明

  通过上面demo1和demo2我们可以得到以下结论:

  在函数外,不管是使用var声明变量,还是不用var声明变量,它们都是全局变量。

  全局变量其实是在window对象中添加属性并赋值。

  继续看demo...

  // demo3

  function fn() {

  var a = 123;

  var b = 456;

  console.log(a); // 123

  console.log(b); // 456

  console.log(window.a); // undefined

  console.log(window.b); // undefined

  }

  fn();

  demo3 直接访问变量 a b 可以正常输出结果,访问window对象的属性 a b结果为 undefined

  // demo4

  function fn() {

  var a = 123; // 使用var声明

  b = 456; // 不使用var声明

  console.log(a); // 123

  console.log(b); // 456

  console.log(window.a); // undefined

  console.log(window.b); // 456

  }

  fn();

  console.log(b); // 456

  console.log(window); // 结果如下图

050534191665384475177

  demo4 打印结果可以看到:

  1.直接访问变量 a b 可以正常输出结果

  2.访问window对象的属性 a 结果为 undefined,属性 b 可以正常输出结果

  3.在window对象中有属性 b,没有属性 a

  是否发现了什么...?

  通过上面 demo3 和 demo4 我们可以得到以下结论:

  在函数中,使用var声明的变量为局部变量,不用var声明的变量为全局变量

  用var声明变量和不用var声明变量的区别之一:

  在函数外,用var声明的变量为全局变量,不用var声明的变量为全局变量

  在函数中,用var声明的变量为局部变量,不用var声明的变量为全局变量

  除了作用域的区别以外

  // demo5

  var a = 123; // 使用var声明

  b = 456; // 不使用var声明

  console.log(window.a); // 123

  console.log(window.b); // 456

  console.log(delete a); // false

  console.log(delete b); // true

  console.log(window.a); // 123

  console.log(window.b); // undefined

  注:delete 用来删除对象的属性,如果是不可配置的属性返回false,其他情况返回true

  demo5 可以看到,变量 a b 都是全局变量,同为window对象的其中一个属性,a 不可以删除,b 可以删除

  用var声明变量和不用var声明变量的区别之二:

  同为全局变量,同为window对象的其中一个属性,用var声明的变量不可以删除,不用var声明的变量可以删除!

  对象属性是否可删除, 其实是可以配置的

  Object.getOwnPropertyDescriptor(); 方法返回某个对象属性的描述对象

  Object.defineProperty(); 方法会直接在某个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

  // demo6

  var a = 123; // 使用var声明

  b = 456; // 不使用var声明

  console.log(Object.getOwnPropertyDescriptor(window, 'a'));

  // {value: 123, writable: true, enumerable: true, configurable: false}

  console.log(Object.getOwnPropertyDescriptor(window, 'b'));

  // {value: 456, writable: true, enumerable: true, configurable: true}

  demo6 我们可以看到window对象的属性 a 和 b 的描述对象包含以下信息:

  value 属性的值

  writable 属性是否可读写

  enumerable 属性是否可枚举

  configurable 属性是否可配置(删除)

  属性 a 和 b 的描述对象区别在于 是否可配置 这个特性

  属性 a 为 configurable: false 不可配置

  属性 b 为 configurable: true 可配置

  // demo7

  var a = 123; // 使用var声明

  b = 456; // 不使用var声明

  Object.defineProperty(window, 'b', {configurable: false});

  console.log(delete a); // false

  console.log(delete b); // false

  console.log(window.a); // 123

  console.log(window.b); // 456

  console.log(Object.getOwnPropertyDescriptor(window, 'b'));

  // {value: 456, writable: true, enumerable: true, configurable: false}

  通过 demo6 和 demo7 我们得到上面那个问题的答案:

  对象的属性是否可删除,取决于描述对象的配置属性configurable

  用var声明的变量默认不可删除,不用var声明的变量默认带可删除。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT