Javascript学习笔记二 之 变量


Posted in Javascript onDecember 15, 2010

一.关于Javascript变量声明
在Javascript中,声明一个变量
var a=1;
也可以直接
a=1;
这两种表达是有区别的,
一个是当前作用域的局部变量,另一个则是当前作用域的全局变量;
 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 

var n=999; 
function f1(){ 
alert(n); 
} 
f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。
function f1(){ 
var n=999; 
} 
alert(n); // error

二.Javascript变量作用域链
var x='000 '; 
document.writeln(x); //得出'000 ' 
a(); 
function a(){ 
var x='aaa '; 
function b(){ 
document.writeln(x); //undefined 
var x='bbb '; 
document.writeln(x); //bbb 
} 
b(); 
document.writeln(x); //aaa 
} 
//结果是:000 undefined bbb aaa

原理:
 当变量使用时,先从函数块(权威指南中用调用对象来解释)中找,
 如果找不到,从上一级函数块找,直到找到,
 如果直到顶层代码(指var x='000 ';的位置)还没找到定义,代码会报未定义错误。
1.按顺序执行的顺序,输出x '000 '(这个没问题);
2.然后执行a()
3.在a()中执行b()
4.b()中需要输出x,该函数体内(作用域)有x定义,但是还未赋值,因此输出undefined;(重点!)
5.然后再输出x,x已赋值,因此输出bbb;
6.最后输出aaa;
了解了以上原理,我们来看下面的例子
var x = "global"; 
function f() { 
var x='f1'; 
function f2(){ 
x='f2' ;//这里我有些混淆,GLOBAL的X应该重新被赋值为'f2' 
alert(x); //返回"f2" 
alert(window.x); //返回"global" 
} 
f2(); 
alert(x) //返回"f2" 
} 
f(); 
alert(x); //返回"global",没有被重新赋值为:f2 
//结果分别弹出:f2 global f2 global

解释:
 首先执行f()中的f2(),
f2()为内部函数产生一个作用域,因此x=‘f2'修改的是f()中的x值,而非全局x.
alert(x);为‘f2',alert(window.x)为‘global'.
然后执行alert(x);这个x的作用域为全局,为‘global'
三.给新手的建议
1.减少全局变量(解决方案:把变量封装到对象中)
引用:
“把你踩在全局的那些乱七八糟的脚印都归于一人名下,能显著降低与其他应用、小工具或JS库冲突的可能性。”
? Douglas Crockford
var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- or window.name

更好的写法
var DudeNameSpace = { 
name : 'Jeffrey', 
lastName : 'Way', 
doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

注意看,我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的;
2.一长列变量声明?别写那么多var,用逗号吧
var someItem = 'some string'; 
var anotherItem = 'another string'; 
var oneMoreItem = 'one more string';

更好的写法
var someItem = 'some string', 
anotherItem = 'another string', 
oneMoreItem = 'one more string';

不言自明。我不知道这样做能否提升代码执行速度,但是确实让你的代码干净许多。
Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JS数组方法concat()用法实例分析
Jan 18 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 #Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 #Javascript
jQuery Ajax使用 全解析
Dec 15 #Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 #Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 #Javascript
javascript中的关于类型转换的性能优化
Dec 14 #Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 #Javascript
You might like
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python yield的用法实例分析
2020/03/06 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
自荐信封面
2013/12/04 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
高中教师考核方案
2014/05/18 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
关于运动会广播稿50字
2014/10/18 职场文书