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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Bootstrap响应式表格详解
May 23 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 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中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery 解析xml文件
2009/08/09 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js判断是否是手机页面
2017/03/17 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JS实现简单日历特效
2020/01/03 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python基础知识小结之集合
2015/11/25 Python
Python实现基本线性数据结构
2016/08/22 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python如何操作mysql
2020/08/17 Python
python性能测试工具locust的使用
2020/12/28 Python
大学生实习证明范本
2014/01/15 职场文书
店长职务说明书
2014/02/04 职场文书
《母鸡》教学反思
2014/02/25 职场文书
pandas数值排序的实现实例
2021/07/25 Python
Redis入门教程详解
2021/08/30 Redis
Golang日志包的使用
2022/04/20 Golang
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技