js声明变量的三种方式

JS 声明变量的三种方式

（1）使用变量步骤：a.声明-->b.赋值-->3.调用

正确用法：

<script type="text/javascript">// 方式一：声明和赋值不分离var correctUsage = "正确使用变量的方式一";alert(correctUsage); //能够弹出来该变量所对应的值// 方式二：声明和赋值分离var correctUsage2;correctUsage2 = "正确使用变量的方式二";alert(correctUsage2);
</script>

错误用法：

<script type="text/javascript">var correctUsage;// 错误一： 没有赋值就使用alert(correctUsage); //underfined// 错误二：没有赋值就拼接字符串correctUsage += "没有赋值就改值";alert(correctUsage); //undefined没有赋值就改值
</script>

（2）变量的产生与死亡

已使用var关键词声明表里为例

2.1 声明在函数外部的变量

产生：js加载到该变量所在行时产生

死亡：js代码加载完毕，变量死亡

2.2声明在函数内部的变量

前提：该变量所在的函数被调用

产生：js执行到该变量所在行时产生

死亡：该变量所在的函数执行行结束

举例：

情景一：函数只声明，不调用

<script type="text/javascript">function test(){var aa = "test";aa +="只声明，但不调用该函数时，该函数会不会执行？"; //添加内容alert(aa);aa = "该函数的变量不会执行！";alert(aa);
}
</script>

说明：上面2个alert不会执行

情景二：声明并调用该函数

  function test(){var aa = "test";aa +="只声明，但不调用该函数时，该函数会不会执行？"; //添加内容alert(aa);aa = "该函数的变量不会执行！";alert(aa);}test();

说明：上面2个alert均会执行

（3）全局变量与局部变量

3.1全局变量

声明在函数体外，任何地方都可访问到该变量

3.2局部变量

声明在函数体内，只有在函数体内可访问到该变量

（4）声明变量的3种方式及作用域

4.1使用var (最常见）

var声明的变量可以是全局的（函数外面），也可以是函数级的（函数内部）

function test() {globalVar = "这是一个全局变量";var partialVar = "这是一个局部变量";
}
test();
alert(globalVar); //这是一个全局变量
alert(partialVar);  //直接报错

说明：函数内部声明变量的时候，一定要使用var命令，如果不用的话，你实际上声明了一个全局变量

情景一：

var varLocation = "函数外部声明并赋值";
function test(){varLocation = "函数内部改值";alert(varLocation); // 函数内部改值
}
test();
alert(varLocation);  // 函数内部改值

明：函数外面声明的变量，在函数内部改变该值后，函数外面的该变量的值也随之改变

情景二：

var varLocation = "函数外部声明并赋值";
function test(){var  varLocation = "函数内部改值";alert(varLocation); // 函数内部改值
}
test();
alert(varLocation);  // 函数内部改值

说明：在函数外面使用var声明一个变量后，再在函数内部使用var再次声明一次并改变其值，函数外面的该变量的值不会发生改变。

4.2 使用const

　　const用于修饰常量，定义的变量不可修改，而且必须初始化，声明位置不限（通常声明在js开头），与java类的final关键字性质一样

举例：

function test(){const testConstant = "测试常量";alert(testConstant);testConstant = "改变常量值";
}
test();

4.3 使用let

let声明的变量在{}中使用，变量的作用域限制在块级域中

举例：使用js动态给ul添加li对象并点击第几项，显示当前点击是第几个

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 创建一个li对象var li = document.createElement("li");// li标签内内容设置为：Itemili.appendChild(document.createTextNode("Item" + i));// 声明一个块级变量j，并将i赋给jlet j = i;// 绑定点击事件li.onclick = function(){alert("Item" + i + "is clicked.");};ul.appendClild(li);}
}

错误方式：

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 创建一个li对象var li = document.createElement("li");// li标签内内容设置为：Itemili.appendChild(document.createTextNode("Item" + i));// 绑定点击事件li.onclick = function(){alert("Item" + i + "is clicked.");};ul.appendClild(li);}
}

结果：点击每个li，提示的都是“Item 6 is clicked.”

扩展：使用var如何实现这种效果？闭包

window.onload = function(){var ul = document.getElementById("ulList");for(var i = 0 i <= 5; i++){// 创建一个li对象var li = document.createElement("li");// li标签内内容设置为：Itemili.appendChild(document.createTextNode("Item" + i));// 绑定点击事件li.onclick = (function(i){return function (){alert("Item" + i + "is clicked.");};})(i) // 闭包// 将LI对象item拼接到UL标签体内ul.appendClild(li);}
}

说明：采用的闭包的方式在绑定的时候已经把j的值已经传递给对应的click事件了，所以能够实现相同的结果，但是，从程序的可维护性来说不推荐使用。

4.4 声明变量的要项　　

4.4.1 js声明的变量取值的原则：就近原则；

4.4.2 js是弱类型语言，不同的数据类型可以用同一个变量名表示；

4.4.3 函数内部声明的变量，不会影响函数外部同名的变量的值。

举例：

var testVarValue = "测试就近原则";
<script type="text/javascript">function test() {const testRepeatStatement = "测试用一个变量赋予不同的类型及不同的值";alert(testRepeatStatement);  //测试用一个变量赋予不同的类型及不同的值}test();
</script>

（5）如何避免全局污染？　

方法：闭包

举例：

(function(){// 声明一个JSON对象var JsonObj = {};//定义该对象的属性及属性值JsonObj.name = "对象的属性";JsonObj.method = function() {alert("测试是否能够调用该方法");return JsonObj.name;}// 通过操作window对象，供外部访问该对象的属性和方法window.GlobalObj = JsonObj;})();// 调取该对象的方法并接受返回值var name = GlobalObj.method(); // 获取的是返回值namealert(name); //对象属性//  只获取该方法但不调用var method = GlobalObj.method; // 获取的是对象GlobalObj2的method1()方法alert(method);// function (){//  alert("测试是否能够调用该方法");//   return JsonObj.name;//}// 调用接受到的方法，但不接受返回值method();

闭包的优缺点说明：

优点：设计私有的方法和变量，保护函数内的变量安全；

弊端：闭包有一个非常严重的问题，那就是内存浪费问题，这个内存浪费不仅仅因为它常驻内存，更重要的是，对闭包的使用不当会造成无效内存的产生。

js声明变量的三种方式相关推荐

php变量和js变量的区别吗,JS声明变量的3种方式和区别
JavaScript 是弱类型语言,可以不需要声明变量而直接使用.这样虽然简单但不易发现变量名方面的错误,所以不建议这样做.通常的做法是在使用 JavaScript 变量前先声明变量.目前,JavaS ...
JS 声明全局变量的三种方式
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量 ...
php 声明字符串的三种方式
php 声明字符串的三种方式 1.单引号方式单引号是效率最高的例子 $a='aaa'; 单引号不解析所包含的变量,例如 $a='aaa'; $b='$abbb'; echo $b; 输出$abbb ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
定义结构体变量的三种方式
#include <stdio.h>//定义结构体的三种方式,推荐使用第三种//第一种 struct student1 {int age;char name[20];float score ...
极狐GitLab的CI/CD中声明和使用变量的三种方式
更加有关变量的解析可以阅读该文章极狐GitLab CI/CD关键词(五):变量 variables 使用预设变量获取当前任务的变量 test_variable:stage: testscript: ...
OC中声明变量的几种方式
第一种. .h文件里 @interface Test : NSObject{ NSString *s; } 第二种. .h文件里 @interface Test : NSObject{ NSStrin ...
js中弹框的三种方式
alert(),confirm(),prompt()三种弹框的区别 JS中有三种弹框,主要是window的方法来实现与用户交互. 下面我们看一下他们的具体样子和区别 1.alert()警告框主要是通 ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...

js声明变量的三种方式

js声明变量的三种方式相关推荐

最新文章

热门文章