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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
canvas实现探照灯效果
Feb 07 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
基于JavaScript实现省市联动效果
Jun 22 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
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python装饰器深入学习
2018/04/06 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
物业项目经理岗位职责
2015/04/01 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS