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简易图片放大特效示例代码
Jun 09 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue 注册组件的使用详解
May 05 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 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
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python 里最强的地图绘制神器
2021/03/01 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
日语系毕业求职信
2014/07/27 职场文书
平安工地汇报材料
2014/08/19 职场文书
社会发展项目建议书
2014/08/25 职场文书
建筑横幅标语
2014/10/09 职场文书
人事局接收函
2015/01/30 职场文书
美容院员工规章制度
2015/08/05 职场文书