javascript基础语法——全面理解变量和标识符


Posted in Javascript onJune 02, 2016

关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性。实际上,变量是标识符的一种。本文将详细介绍变量和标识符

定义  

标识符(Identifier)就是一个名字,用来对变量、函数、属性、参数进行命名,或者用做某些循环语句中的跳转位置的标记

//变量
var Identifier = 123;
//属性
(new Object).Identifier = 'test';
//函数及参数
function IdentifierName(Identifier1){};
//跳转标记
Identifier:
for(var i = 0; i < 5; i++){
  if(i == 3){
    break Identifier;
  }
}

在日常生活中,有些东西是固定不变的,有些东西则会发生变化。例如,人的姓名和生日是固定不变的,但心情和年龄却会随着时间变化而变化。人们把那些会发生变化的东西称为变量

当程序需要将值保存起来以备将来使用时,便将其赋值给一个变量。变量(variable)是一个用于保存值的占位符,可以通过变量名称来获得对值的引用

 javascript基础语法——全面理解变量和标识符

命名规则  

在词法结构一文中,我们介绍到javascript是一门区分字母大小写的语言,且和其他任何编程语言一样,javascript保留了一些标识符为自己所用,保留字不能用做普通的标识符

[注意]保留字包括关键字、未来保留字、空字面量和布尔值字面量

保留字 ReservedWord ::
  Keyword
  FutureReservedWord
  NullLiteral
  BooleanLiteral

javascript标识符名允许包含字母、数字、美元符号和下划线(但第一个字符不允许是数字)

//错误示范
 6num //开头不能用数字
 %sum //开头不能用除(_ $)外特殊符号,如(% + /等)
 sum+num //开头中间不能使用除(_ $)外特殊符号,如(% + /等)

javascript允许标识符中出现 Unicode字符全集中的字母和数字(包括中文)。因此,程序员也可以使用非英语语言或数学符号来书写标识符

var 测试文字 = 'test';

[注意]出于可移植性和易于书写的考虑,通常我们不使用扩展的ASCII或Unicode字符

通常驼峰格式是标识符命名的首选格式,第一个字母小写,剩下的每个单词的首字母大写

var myMoodToday = 'happy';

对于不同的数据类型,javascript有约定俗成的标识符名命名规则

类型          前缀      示例    
数组(Array)       a     
  aItems
布尔值(Boolean)  
  b     
  bIsComplete
浮点数(Float)  
   f 
 
  fPrice
函数(Function)
     fn    
  fnHandler
整数(Integer) 
     i 
 
  iItemCount
对象(Object) 

   o 
 
  oDIv1
正则表达式(RegExp)    re    
  reEmailCheck
字符串(String) 
    s 
 
  sUserName
变量()Variant
      v 
 
  vAnything

变量声明

声明

在javascript中,使用一个变量之前应当先声明(declare),变量是使用关键字var(variable的缩写)来声明的

var i;
var sum;

也可以通过一个var关键字来声明多个变量

var i ,sum;

赋值

把值存入变量的操作称为赋值(assignment)。一个变量被赋值以后,我们就说该变量包含这个值

给变量第一次赋值的过程,叫初始化

我们可以将变量的初始赋值和变量声明合写在一起

var message = 'hello';
var i=0,j=0,k=0;

如果未在var声明语句中给变量指定初始值,那么虽然声明了这个变量,但在给它存入一个值之前,它的初始值就是undefined

javascript基础语法——全面理解变量和标识符

在for循环和for-in循环中同样可以使用var语句,这样可以更简洁地声明在循环语法内中使用的循环变量

for(var i=0; i<10; i++)console.log(i);

变量可以在声明时赋值,但不能有其他操作,如+=、-=等

var a = 2;//是正确的
var a += 2;//是错误的
var a = 2++;//是错误的,++只能用于变量,不能用于常量

重复声明

使用var语句重复声明变量是合法且无害的,如果重复声明且带有赋值操作,相当于重新赋值

javascript基础语法——全面理解变量和标识符

遗漏声明

如果试图读取一个没有声明的变量的值,javascript会报错

javascript基础语法——全面理解变量和标识符

javascript允许遗漏声明,即直接对变量赋值而无需事先声明,赋值操作将自动声明该变量

javascript基础语法——全面理解变量和标识符

但是,在ECMAScript5严格模式中,给一个没有声明的变量赋值会报错

<script>
'use strict';
a = 5;
console.log(a);
</script>
javascript基础语法——全面理解变量和标识符

变量特性  

javascript变量是弱类型(也叫松散类型)的,所谓松散类型就是可以用来保存任何类型的数据

编程语言分类动态类型语言和静态类型语言两种。 动态类型语言是指在运行期间才去做数据类型检查的语言,也就是说,在用动态类型的语言编程时,不用给任何变量指定数据类型,该语言会在第一次赋值给变量时,在内部将数据类型记录下来。javascript就是动态类型语言的代表。

在javascript中,可以在修改变量值的同时修改值的类型

var message = 'hi';
message = 100;//有效,但不推荐

变量松散类型的特性总结起来有两点:一是声明时不用给变量指定数据类型;二是赋值时可以修改数据类型

变量作用域

变量的作用域(scope),又叫执行环境(execution context),是程序源代码中定义这个变量的区域

作用域分为全局作用域和函数作用域(又叫局部作用域)两种

全局作用域是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象。所有全局变量和函数都是作为window对象的属性和方法创建的。全局变量拥有全局作用域,在javascript代码中的任何地方都是有定义的。全局作用域直到应用程序退出例如关闭网页或浏览器时才会被销毁

在函数内声明的变量只在函数体内有定义。它们是局部变量,作用域是局部性的。函数参数也是局部变量,它们只在函数体内有定义。函数作用域中的所有代码执行完毕后,该作用域被销毁,保存在其中的所有变量和函数定义也随之销毁

function test(){
  var message = 'hi';
}
test();
alert(message);//错误

如果省略var操作符,则会创建一个全局变量

function test(){
  message = 'hi';
}
test();
alert(message);//'hi'

虽然省略var操作符可以定义全局变量,但并不推荐。在局部作用域中定义的全局变量很难维护,而且如果有意地忽略了var操作符,也会由于相应变量不会马上就有定义而导致不必要的混乱,给未经声明的变量赋值在严格模式下会导致抛出ReferenceError错误

在函数体内,局部变量的优先级高于同名的全局变量,如果在函数内声明的一个局部变量或者函数参数中带有的变量和全局变量重名,那么全局变量就被局部变量遮盖

var scope = 'global';
function checkscope(){
  var scope = 'local';
  return scope;
};
checkscope();//'local'

声明提升(hoisting)

块级作用域

块级作用域是指花括号内的每一段代码都具有各自的作用域,而javascript没有块级作用域。javascript只有函数作用域:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的

这意味着,变量在声明之前甚至已经可用。javascript这个特性被非正式地称为声明提升(hoisting),javascript函数里声明的所有变量(不涉及赋值)都被提前到函数体的顶部

[注意]其实除了变量提升,函数也被提升,到函数部分会有详细介绍

var scope = 'global';
function f(){
  console.log(scope);//undefined
  var scope = 'local';
  console.log(scope);//'local'
}
//变量声明提升之后,相当于下面代码
var scope = 'global';
function f(){
  var scope;
  console.log(scope);//undefined
  scope = 'local';
  console.log(scope);//'local'
}

javascript中没有块级作用域,所以一些程序员特意将变量声明放在函数体顶部,这种源代码非常清晰地反映了真实的变量作用域

属性变量

当声明一个javascript全局变量时,实际上是定义了全局对象window的一个属性

当使用var声明一个变量时,创建的这个变量是不可配置的,也就是说这个变量无法通过delete运算符删除

var truevar = 1;
console.log(truevar,window.truevar);//1 1
delete truevar;//false
console.log(truevar,window.truevar);//1 1

如果没有使用严格模式并给一个未声明的变量赋值的话,javascript会自动创建一个全局变量,以这种方式创建的变量是全局对象的正常的可配置属性,并可以删除它们

window.fakevar1 = 10;
console.log(fakevar1,window.fakevar1);//10 10 
this.fakevar2 = 20;
console.log(fakevar2,window.fakevar2); //20 20
fakevar = 30;
console.log(fakevar,window.fakevar); //30 30

delete window.fakevar1;//true
delete this.fakevar2;//true
delete fakevar;//true

console.log(fakevar1,window.fakevar1);//报错
console.log(fakevar2,window.fakevar2); //报错
console.log(fakevar,window.fakevar); //报错

javascript全局变量是全局对象的属性,这是在ECMAScript中强制 规定的。局部变量当做跟函数调用相关的某个对象的属性。ECMAScript3称为调用对象(call object),ECMAScript5称为声明上下文对象(declarative environment record)。javascript允许使用this关键字来引用全局对象,却没有办法可以引用局部变量中存放的对象。这种存放局部变量对象的特有性质,是一种对我们不可见的内部实现

以上这篇javascript基础语法——全面理解变量和标识符就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 #Javascript
深入理解Ajax的get和post请求
Jun 02 #Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 #Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 #Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 #Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 #Javascript
You might like
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python科学计算之Pandas详解
2017/01/15 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python实现飞机大战小游戏
2019/11/08 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
护士专业推荐信
2013/11/02 职场文书
2014年转正工作总结
2014/11/08 职场文书
校车司机安全责任书
2015/05/11 职场文书
房屋所有权证明
2015/06/19 职场文书
天气温馨提示语
2015/07/14 职场文书
开业典礼致辞
2015/07/29 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书