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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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/03/04 PHP
php实现学生管理系统
2020/03/21 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
个人总结与自我评价
2014/09/18 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
班主任寄语2015
2015/02/26 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
校运会班级霸气口号
2015/12/24 职场文书
导游词之无锡梅园
2019/11/28 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js