提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript变量函数浅析

JavaScript变量 函数 浅析
2023-06-13 09:14:30 时间
一、变量
在javascript变量中可以存放两种类型的值：原始值和引用值。
原始值存储在栈上的简单字段，也就是值直接存储在变量所标示的位置内。
引用值存储在堆内的对象，栈内变量保存的是指向堆内对象的指针值。
在javascript中有5种基本类型：Undefined,Null,Boolean,Number,String。
引用类型其实就是对象，类似其他语言中类实例的概念。
复制代码代码如下:

varb=true;//存储在栈上
varnum=20;//存储在栈上
varb=newBoolen(true);//存储在堆内
varnum=newNumber(20);//存储在堆内

通常生成对象的方式:
new+类型名称varobj=newobject()
如果没有参数也可以写成varobj=newobject;
还可以用对象字面量生成对象varobj={}
二、函数
在javascript中函数就是对象，应该像对待javascript中其他对象一样对待函数，每个函数都隐式附加两个额外参数this,arguments。
函数可以：赋值给变量，作为其他对象的属性，作为其他函数的参数，作为返回值，还可以用字面量来创建函数。
函数上下文：
在面向对象语言里用this关键字引用类对象的当前实例。javascript里的this关键字却不同于面向对象语言中的this。在javascript中，函数就是对象，this引用的是调用当前函数的函数上下文。
可以通过call()和apply()方法来显式的指定函数上下文。Call的第一个参数被用来作为调用函数的上下文，其他参数作为被调用函数的参数传入被调用函数。Apply()和Call()差不多，只不过第二个参数是数组。
复制代码代码如下:

varobj={
m:"hello"
}
varm="hi";
varsay=function()
{
alert(this.m);//this指向函数调用上下文
}
say();//hi，window为调用上下文
say.call(obj);//hello，此时obj为函数调用上下文
say.call(window);//hi，window为调用上下文

作用域：
定义在函数中的参数和变量在函数外部是不可见的，而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。
复制代码代码如下:
varobj=function(){
varnum=1;
return{getValue:function(){
alert(num);//undefined
varnum=2;
alert(num);//2
}
}
}();
obj.getValue();

闭包
所谓闭包就是函数能使用函数外定义的变量,函数可以访问创建时的上下文环境。
复制代码代码如下:
varhello="helloword!";
functionsayHello(){
alert(hello);
}
sayHello();
varobj=function(){
varvalue=0;
return{
setValue:function(val){
value+=typeofval==="number"?val:1;
},
getValue:function(){
returnvalue;
}
}
}();
obj.setValue("a");
alert(obj.getValue());//1

注意最后一行的(),()是调用运算符，它表示函数立即调用并返回调用结果。所以obj并不是引用函数，而是引用该函数返回的一个包含两个方法的对象，而且这两个方法享有访问value变量的特权。
再举个网上流传很广的内部函数访问外部函数局部变量例子来说明闭包。点击相应的列表项弹出对应的顺序编号。
复制代码代码如下:
<liid="a">test1</li>
<liid="b">test2</li>
<liid="c">test3</li>
vartest=function(){
varnum=document.getElementsByTagName("li");
vari;
for(i=0;i<num.length;i++){
num[i].onclick=function(){
alert(i);//内部函数可以访问外部函数变量,i的最终值是3，
//而不是构造函数时的i值，所以此处都弹出3
}
}
alert(i);//3
}
test();

下面这个写法可以获得正确的结果：
复制代码代码如下:
vartest=function(){
varnum=document.getElementsByTagName("li");
vari;
for(i=0;i<num.length;i++){
num[i].onclick=function(i){
returnfunction(){
alert(i+1);
}
}(i);//每次构造函数时立即把i值传进去执行，现在onclick绑定的函数是执
//行后返回的函数
}
alert(i);//3
}
test();

相关文章