JavaScript变量优化点

最新推荐文章于 2023-06-01 10:13:16 发布

王三六

最新推荐文章于 2023-06-01 10:13:16 发布

阅读量338

点赞数

分类专栏： js 文章标签： javascript js

wthreesix

本文链接：https://blog.csdn.net/qq_42072086/article/details/106350250

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript通过函数管理作用域。在函数内部声明的变量只在这个函数内部，函数外面不可用。另一方面，全局变量就是在任何函数外面声明的或是未声明直接简单使用的。

每个JavaScript环境有一个全局对象，当你在任意的函数外面使用this的时候可以访问到。你创建的每一个全部变量都成了这个全局对象的属性。在浏览器中，方便起见，该全局对象有个附加属性叫做window，此window(通常)指向该全局对象本身。

一、创建和访问全局变量

创建：
myName = "wthreesix"; // 不推荐写法
访问：
console.log(myName); // "hello"
console.log(window.myName); // "hello"
console.log(window["myName"]); // "hello"
console.log(this.myName); // "hello"

二、变量定义的方式

1.var：定义的变量可以修改，如果不初始化会输出undefined，不会报错。

2.let：是块级作用域，函数内部使用let定义后，对函数外部无影响。

3.const：定义的变量不可以修改，而且必须初始化。

三、全局变量的问题

全局变量的问题在于，你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量，他们住在同一个全局命名空间，所以当程序的两个不同部分定义同名但不同作用的全局变量的时候，命名冲突在所难免。

在开发中，尽可能少的使用全局变量是很重要的，减少全局变量可以通过命名空间模式或是函数立即自动执行，但是要想让全局变量少最重要的还是始终使用var来声明变量。

JavaScript的两个特征：

1.你可以甚至不需要声明就可以使用变量

2.JavaScript有隐含的全局概念

function sum(x, y) {
   // 隐式全局变量 
   result = x + y;
   return result;
}

另一个创建隐式全局变量的反例就是使用任务链进行部分var声明。下面的片段中，a是本地变量但是b确实全局变量

// 反例，勿使用 
function foo() {
   var a = b = 0;
}

如果你已经准备好声明变量，使用链分配是比较好的做法，不会产生任何意料之外的全局变量，如：

function foo() {
   var a, b;
   a = b = 0; // 两个均局部变量
}

四、var的副作用

隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。

通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
无var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。

这表明，在技术上，隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的：

定义三个全局变量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());

试图删除
delete global_var; // false 不可删除
delete global_novar; // true 可删除
delete global_fromfunc; // true 可删除

在ES5严格模式下，未声明的变量会抛出一个错误。

五、访问全局对象

在浏览器中，全局对象可以通过window属性在代码的任何位置访问，如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：

var global = (function () {
   return this;
}());
这种方法可以随时获得全局对象，因为其在函数中被当做函数调用了（不是通过new构造），this总 是指向全局对象。

六、单var形式

在函数顶部使用单var语句是比较有用的一种形式，其好处在于：

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
帮助你记住声明的全局变量，因此减少了全局变量

var定义变量
function func() {
   var a = 1, b = 2, sum = a + b, myobject = {}, i
}

可以使用一个var语句声明多个变量，并以逗号分隔。所有未初始化但声明的变量的初始值是undefined

六、变量提升

js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。

myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();

上面的代码等同于下面的：

myname = "global";
function func() {
   var myname; // 等同于 -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local"; // 代码执行到原位置即执行原赋值逻辑
   alert(myname); // "local"
}
func();
将变量myname的声明提升至最顶端，赋值逻辑不提升。这时全局变量会被局部作用域中的同名变量覆盖

因此，为了避免这种混乱，最好是预先声明你想使用的全部变量。

ES6新增了let和const关键字，使得js也有了“块”级作用域，尽量使用let和const 声明的变量和函数。