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标签内内容设置为:Itemi
li.appendChild(document.createTextNode("Item" + i));
// 声明一个块级变量j,并将i赋给j
let 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标签内内容设置为:Itemi
li.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标签内内容设置为:Itemi
li.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(); // 获取的是返回值name

alert(name); //对象属性

//  只获取该方法但不调用

var method = GlobalObj.method; // 获取的是对象GlobalObj2的method1()方法

alert(method);

// function (){

//  alert("测试是否能够调用该方法");

//   return JsonObj.name;

//}

// 调用接受到的方法,但不接受返回值

method();

闭包的优缺点说明:

优点:设计私有的方法和变量,保护函数内的变量安全;

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

js声明变量的三种方式的更多相关文章

  1. js声明变量的三种方式及作用域

      js声明变量的三种方式及作用域 CreateTime--2017年9月11日17:19:11 Author:Marydon 一.参考链接 本篇文章的创作灵感来源于博主-奔跑的铃铛关于js中cons ...

  2. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. CentOS添加环境变量的三种方式

    CentOS添加环境变量的三种方式,以添加php环境变量为例,假定php的安装目录为 /usr/local/php5 一.仅对当前会话临时生效 [root@bogon ~]# export PATH= ...

  5. js获取时间戳的三种方式

      js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...

  6. JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式

    创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...

  7. js中定义变量的三种方式const,val,let 的区别

    js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...

  8. JN_0003:JS定义变量的3种方式

    js中三种定义变量的方式const, var, let的区别. 1,const定义的变量不可以修改,而且必须初始化. 2,var定义的变量可以修改,如果不初始化会输出undefined,不会报错. 3 ...

  9. 基于JavaScript 声明全局变量的三种方式详解

    原文地址:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符) ...

随机推荐

  1. Lucene TFIDFSimilarity评分公式详解

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/zteny/article/details/ ...

  2. jdbc出现中文乱码的解决办法

  3. SSH的两种登录方式以及配置

    前言 SSH简介 Secure Shell(SSH) 是由 IETF(The Internet Engineering Task Force) 制定的建立在应用层基础上的安全网络协议.它是专为远程登录 ...

  4. dev设置子窗体的初始位置,grid控件表头的属性设置

    当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent ...

  5. mysql连接超时的问题处理

    1. 内网 ts 连接mysql 有时候会连接失败, 原因是 连接超时, 当时所有服务器一起启动,抢占资源,导致连接超过10s. 现在增加一次连接机会, 增加一些日志. 2. 并且对mysql 全局参 ...

  6. 2019牛客暑期多校训练营(第七场) E 线段树+离散化

    题目传送门 题意:按照一定的公式给出若干个$<l,r>$,每次往一个序列中加上l到r的数字,并输出中位数. 思路:需要将每个$区间$离散化,比如把$[1,2]$变成$[1,3)$,也就是$ ...

  7. Ubuntu升级软件和ubuntu升级系统的命令

    sudo apt-get update: 升级安装包相关的命令,刷新可安装的软件列表(但是不做任何实际的安装动作) sudo apt-get upgrade: 进行安装包的更新(软件版本的升级) su ...

  8. 关于TMDS

    https://en.wikipedia.org/wiki/Transition-minimized_differential_signaling TMDS,Transition Minimized ...

  9. DDOS 单例

    DDOS.H #pragma once //g++ ../../../Main.cpp ../../../DDOS.cpp -lpthread #include <stdio.h> #in ...

  10. Windows tasklist

    TASKLIST [/S system [/U username [/P [password]]]]         [/M [module] | /SVC | /V] [/FI filter] [/ ...