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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
使用JavaScript获取Django模板指定键值数据
May 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
MySQL相关说明
2007/01/15 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue.js中created方法作用
2018/03/30 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
js实现蒙版效果
2020/01/11 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
解析python实现Lasso回归
2019/09/11 Python
python安装scipy的步骤解析
2019/09/28 Python
python全栈开发语法总结
2020/11/22 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
仓管岗位职责范本
2014/02/08 职场文书
教师自我反思材料
2014/02/14 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
学徒工职责
2014/03/06 职场文书
马智宇结婚主持词
2014/04/01 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
商场收银员岗位职责
2015/04/07 职场文书
储备店长岗位职责
2015/04/14 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server