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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jquery的map与get方法详解
Nov 04 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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输出时间差函数代码
2013/01/28 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
平面设计岗位职责
2013/12/14 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
读群众路线的心得体会
2014/09/03 职场文书
创先争优活动个人总结
2015/03/04 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
主持稿开场白
2015/06/01 职场文书
仓库管理制度范本
2015/08/04 职场文书