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 相关文章推荐
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
vue router 动态路由清除方式
May 25 Vue.js
简短几句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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
python远程登录代码
2008/04/29 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
北京银河万佳Java面试题
2012/03/21 面试题
大客户销售经理职责
2013/12/04 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python