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标签内内容设置为: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声明变量的三种方式的更多相关文章
- js声明变量的三种方式及作用域
js声明变量的三种方式及作用域 CreateTime--2017年9月11日17:19:11 Author:Marydon 一.参考链接 本篇文章的创作灵感来源于博主-奔跑的铃铛关于js中cons ...
- JavaScript声明全局变量的三种方式
JavaScript声明全局变量的三种方式 JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- CentOS添加环境变量的三种方式
CentOS添加环境变量的三种方式,以添加php环境变量为例,假定php的安装目录为 /usr/local/php5 一.仅对当前会话临时生效 [root@bogon ~]# export PATH= ...
- js获取时间戳的三种方式
js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...
- JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...
- js中定义变量的三种方式const,val,let 的区别
js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...
- JN_0003:JS定义变量的3种方式
js中三种定义变量的方式const, var, let的区别. 1,const定义的变量不可以修改,而且必须初始化. 2,var定义的变量可以修改,如果不初始化会输出undefined,不会报错. 3 ...
- 基于JavaScript 声明全局变量的三种方式详解
原文地址:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符) ...
随机推荐
- 【ARC072E】Alice in linear land
题目 瑟瑟发抖,这竟然只是个蓝题 题意大概就是初始在\(0\),要到坐标为\(D\)的地方去,有\(n\)条指令,第\(i\)条为\(d_i\).当收到一条指令\(x\)后,如果向\(D\)方向走\( ...
- 2018湘潭大学程序设计竞赛【H】
题目链接:https://www.nowcoder.com/acm/contest/105/H 题意:两个操作,一个在[l,r]区间放颜色为c的球,一个统计在[l,r]里有多少不同颜色的球. 题解:哎 ...
- leetcode 题型 数据结构 解法 分类总结
第2章 线性表 2.1 数组 2.1.1 Remove Duplicates from Sorted Array 2.1.2 Remove Duplicates from Sorted Array I ...
- 查看ubuntu系统的版本信息
显示如下 Linux version 4.10.0-28-generic (buildd@lgw01-12) linux内核版本号 gcc version 5.4.0 20160609 gcc编译器版 ...
- win10安装mysql__艰难的心路历程
俺是新系统,嘿嘿嘿 首先,把下载好的压缩包解压到安装目录中,哪个盘可以. 第二,先创建my.ini文件,不然待会忘了.在文件中添加以下内容: [mysqld] port = basedir=C:\Wi ...
- (上线时清缓存)laravel 5.1 的程序性能优化(配置文件) - 简书
代码上到正式环境后执行这六步 php artisan config:clear php artisan config:cache php artisan route:clear php artisan ...
- VMware的使用-永久激活码
1.在软件管理中下载安装VMware 版本为14.0 试用期为30天 2.在网上找的永久破解码 VMware 2018 v14.x 永久许可证激活密钥FF31K-AHZD1-H8ETZ-8WWE ...
- 【JZOJ6274】梦境
description analysis 其实可以贪心 先把区间按左端点排序,转折点也排序 扫一次转折点,把所有左端点在当前点左边的区间丢进优先队列里 按照贪心策略,对于某个转折点,一定选择右端点离它 ...
- JavaScript 点击事件的三种写法
嵌入式 <button οnclick='alert("hello")'>点击按钮</button> 脚本模型 btn.onclick=function() ...
- go包flag系统包简单使用
一.代码 package main import ( "flag" "fmt" ) //定义命令行参数,这个mode是内存地址,参数1是命令行名称,参数2是命令 ...