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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php 分页类 扩展代码
2009/06/11 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
许愿墙中用到的函数
2006/10/07 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python之消除前缀重命名的方法
2018/10/21 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python import 上级目录的导入
2020/11/03 Python
儿科护士实习自我鉴定
2013/10/17 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
通用自荐信范文
2014/03/14 职场文书
网站客服岗位职责
2014/04/05 职场文书
三年级学生评语
2014/04/23 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
市政管理求职信范文
2014/05/07 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS