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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue-cli 为项目设置别名的方法
Oct 15 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
JavaScript修改css样式style
2008/04/15 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
详解python之配置日志的几种方式
2017/05/22 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python在地图上画比例的实例详解
2020/11/13 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
财务会计自荐信范文
2014/02/21 职场文书
追悼会主持词
2014/03/20 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
服务承诺书
2015/01/19 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
公司开除员工通知
2015/04/22 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python自动化测试PO模型封装过程详解
2021/06/22 Python