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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
简短几句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使用正则验证中文
2016/04/06 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
brook javascript框架介绍
2011/10/10 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python中关于日期时间处理的问答集锦
2013/03/08 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
详解Python循环作用域与闭包
2019/03/21 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python之生产者消费者模型实现详解
2019/07/27 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
教师找工作推荐信
2013/11/23 职场文书
装修致歉信
2014/01/15 职场文书
酒店营销策划方案
2014/02/07 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书