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栏目列表隐藏/显示简单实现
Apr 03 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
vue 清空input标签 中file的值操作
Jul 21 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
德生H-501的评价与改造
2021/03/02 无线电
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP微信API接口类
2016/08/22 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python executemany的使用及注意事项
2017/03/13 Python
Python实现的选择排序算法示例
2017/11/29 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
pycharm配置git(图文教程)
2019/08/16 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
应届生简历中的自我评价
2014/01/13 职场文书
村安全生产责任书
2014/08/25 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
国家助学金感谢信
2015/01/21 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
运动会入场词
2015/07/18 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python