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 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
JS搜狐面试题分析
Dec 16 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
程序员跳槽必看面试题总结
2013/06/28 面试题
销售人员求职的自我评价分享
2014/03/15 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
银行给客户的感谢信
2015/01/23 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS