Javascript变量函数浅析


Posted in Javascript onSeptember 02, 2011

一、变量
在javascript变量中可以存放两种类型的值:原始值和引用值。
原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内。
引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值。
在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String。
引用类型其实就是对象,类似其他语言中类实例的概念。

var b = true; // 存储在栈上 
var num = 20; //存储在栈上 
var b = new Boolen(true); //存储在堆内 
var num = new Number(20); // 存储在堆内

通常生成对象的方式 :
new +类型名称 var obj = new object()
如果没有参数也可以写成 var obj = new object;
还可以用对象字面量生成对象 var obj = {}
二、函数
在javascript 中函数就是对象,应该像对待javascript中其他对象一样对待函数,每个函数都隐式附加两个额外参数this,arguments。
函数可以:赋值给变量,作为其他对象的属性,作为其他函数的参数,作为返回值,还可以用字面量来创建函数。
函数上下文:
在面向对象语言里用this关键字引用类对象的当前实例。javascript里的this关键字却不同于面向对象语言中的this。在javascript中,函数就是对象, this引用的是调用当前函数的函数上下文。
可以通过call()和apply()方法来显式的指定函数上下文。Call的第一个参数被用来作为调用函数的上下文,其他参数作为被调用函数的参数传入被调用函数。Apply()和Call()差不多,只不过第二个参数是数组。
var obj = { 
m:"hello" 
} 
var m="hi"; 
var say=function() 
{ 
alert(this.m); //this指向函数调用上下文 
} 
say();//hi,window为调用上下文 
say.call(obj);// hello,此时obj为函数调用上下文 
say.call(window);// hi,window为调用上下文

作用域:
定义在函数中的参数和变量在函数外部是不可见的,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。
var obj = function() { 
var num = 1; 
return { getValue: function() { 
alert(num); //undefined 
var num = 2; 
alert(num); //2 
} 
} 
} (); 
obj.getValue();

闭包
所谓闭包就是函数能使用函数外定义的变量,函数可以访问创建时的上下文环境。
var hello = "hello word!"; 
function sayHello() { 
alert(hello); 
} 
sayHello(); 
var obj = function() { 
var value = 0; 
return { 
setValue: function(val) { 
value += typeof val === 'number' ? val : 1; 
}, 
getValue: function() { 
return value; 
} 
} 
} (); 
obj.setValue('a'); 
alert(obj.getValue()); //1

注意最后一行的(),()是调用运算符,它表示函数立即调用并返回调用结果。所以obj并不是引用函数,而是引用该函数返回的一个包含两个方法的对象,而且这两个方法享有访问value变量的特权。
再举个网上流传很广的内部函数访问外部函数局部变量例子来说明闭包。点击相应的列表项弹出对应的顺序编号。
<li id="a">test1</li> 
<li id="b">test2</li> 
<li id="c">test3</li> 
var test = function() { 
var num = document.getElementsByTagName("li"); 
var i; 
for (i = 0; i < num.length; i++) { 
num[i].onclick = function() { 
alert(i); //内部函数可以访问外部函数变量,i的最终值是3, 
//而不是构造函数时的i值,所以此处都弹出3 
} 
} 
alert(i); //3 
} 
test();

下面这个写法可以获得正确的结果:
var test = function() { 
var num = document.getElementsByTagName("li"); 
var i; 
for (i = 0; i < num.length; i++) { 
num[i].onclick = function(i) { 
return function() { 
alert(i + 1); 
} 
} (i); //每次构造函数时立即把i值传进去执行,现在onclick绑定的函数是执 
//行后返回的函数 
} 
alert(i); //3 
} 
test();
Javascript 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 #Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 #Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 #Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 #Javascript
jQuery1.6 类型判断实现代码
Sep 01 #Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 #Javascript
用javascript作一个通用向导说明
Aug 30 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
python私有属性和方法实例分析
2015/01/15 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python线程信号量semaphore使用解析
2019/11/30 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python两个list[]相加的实现方法
2020/09/23 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
毕业生评语大全
2015/01/04 职场文书
2015年组织部工作总结
2015/04/03 职场文书
党员身份证明材料
2015/06/19 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书