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 相关文章推荐
JS关键字变色实现思路及代码
Feb 21 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
Vuex的各个模块封装的实现
Jun 05 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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性能查询过程的使用方法
2013/05/02 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
YII框架常用技巧总结
2019/04/27 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
年会搞笑主持词
2014/03/27 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
地方课程教学计划
2015/01/19 职场文书
投标售后服务承诺书
2015/04/29 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
用Python提取PDF表格的方法
2021/04/11 Python