当javaScript从入门到提高前需要注意的细节Word格式.docx
- 文档编号:16208387
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:30
- 大小:28.05KB
当javaScript从入门到提高前需要注意的细节Word格式.docx
《当javaScript从入门到提高前需要注意的细节Word格式.docx》由会员分享,可在线阅读,更多相关《当javaScript从入门到提高前需要注意的细节Word格式.docx(30页珍藏版)》请在冰豆网上搜索。
alert(typeofthis.y);
alert(typeofthis.m);
//undefined
alert(typeofthis.n);
fun1();
/script>
以上代码说明,当fun1被执行后,函数内没有用var声明的n变量,被注册为全局变量了。
下面的代码得到同样的执行效果
varx=10;
alert(typeofwindow.x);
alert(typeofwindow.y);
alert(typeofwindow.m);
alert(typeofwindow.n);
那么,我们可以明显的得到一个推理,在全局里面,window和this是同一个对象指向。
alert(this==window);
alert(this===window);
那么下面的函数在其函数状态和对象状态时this的指向是不同的,因为javaScript的动态的执行,当其执行到的时候,才去计算上下文情况。
functionFo1(){
returnthis;
alert(Fo1());
alert(newFo1());
同样作为变量,使用var声明的变量是不可以删除的,没有使用var声明的变量是可以删除的
deletem;
deleten;
alert(typeofm);
alert(typeofn);
}
deletex;
deletey;
alert(typeofx);
alert(typeofy);
在javaScript中声明变量非常的灵活,但这个灵活性,对控制全局和局部要有所注意。
varm=n=10;
//n是全局,m是局部
varx,y=1,k=10;
//xyk都是局部
而且,有意思的是,在通常的语言中,我们对变量总是先定义后使用,不过在javaScript中嘛……看以下代码
这样的结果,对你来说是完全可以接受和预期的,不过……
alert(x);
alert(y);
//提示y没有定义
上面的现象很奇怪,如果我们当真要用x和y的时候,编译器却给予不同的对待,认为x仅仅是没有定义(认可已经声明了),而y是真正的不存在。
这说明在处理一个范围的变量的时候,var无论你在哪里声明的,总是一开始就进行分配了。
对于非var定义的变量嘛,就没有这样的待遇了,必须等执行到才进行分配
prename="
code"
class="
html"
//提示x没有定义
x=10;
更需要注意的是,在函数内部声明的var变量,并不局限在声明的代码语句块中,看看以下代码
for(vari=0;
i<
10;
i++){
alert(i);
//10
所以呢,我们推荐在一个对象/函数的第一行就把所有的局部变量全部声明完毕
varvalue=1,
arr=[],
obj={},
date=newDate(),
has=false;
注意变量之间用逗号隔离,这样的好处是明显的,自己去考虑吧。
javaScript的语法很灵活,语句后面可以不加;
来表示结束,这个时候编译器会讲硬回车作为语句的结束符合
varx=10
vary=9
returnx+y
alert(fun1());
//19
以上的代码写法我不知道有什么特别的好处,如果是炫耀你知道可以不用;
来结束语句,那就到此为止吧。
因为下面的代码会得到一个错误
return
{
Title:
"
title"
Style:
style"
Value:
Value"
alert(typeoffun1());
因为javaScript会再return后面加一个;
正确的做法是
return{
};
我不好说,这个原因一定是;
不写引起的,但我想说明的是,你要小心javaScript对随意代码的随意处理:
你总是应该让javaScript编译器知道你明确的要干嘛,而不是由他去猜呀猜的。
函数部分
在javaScript中,函数是一个很基础的对象,同样也是非常随意,定义起来很随意,用起来那是更加随意。
以下说明在javaScript中声明一个函数那是多麽的随意
functionfun1(){//声明一个函数
function(){//声明一个匿名函数
varfun2=function(){//声明一个变量指向一个匿名的函数表达式
varfun3=functionfun4(){//声明一个变量指向一个非匿名的函数表达
functionfun5(){
returnfunction(){//返回一个匿名函数
那function和var的区别有哪些?
我们不讨论深奥的,我们看下哪些运行结果
alert(typeoffun1);
//function
alert(typeoffun2);
alert(typeoffun3);
alert(typeoffun4);
alert(typeoffun5);
//functionfunctionfun1(){//声明一个函数
varfun3=functionfun4(){//声明一个变量指向一个非匿名的函数表达式
returnfunction(){//返回一个匿名函
我们可以看到function比var还要优先。
我们之前说变量的时候已经说过,一个变量可以被反复赋值,对于函数来说,这可以吗?
对于习惯在静态语言下写代码的人,看到如下代码估计要气愤了,这个是啥破代码?
alert("
Y"
);
N"
但事实上,这个代码是可以执行的,执行的结果暗示我们函数的名称会被自动的作为对象的一个属性,函数体就是属性的值了
//n
this["
fun1"
]();
this.fun1();
window["
window.fun1();
现在我们把两个因素合起来看看,function在所有执行代码前先编译,且后面的function会覆盖前面的function定义,那么,如下的代码执行的是?
varinput=5;
switch(input){
case10:
alert(10);
break;
case5:
alert(5);
default:
default"
令人恼怒的是,在chrome和IE下执行的是我们前面的推断,function在所有执行代码前先编译,且后面的function会覆盖前面的function定义结果是
//default
而FireFox把if中的语句作为执行快,运行时才编译,所以他的结果是
//5
为了解决这个问题,你需要吧动态分配的函数以函数的表达式来执行,避免编译器对函数还没有执行到就已经分配了,比如
fun1=function(){
说到函数的表达式,那什么是函数的表达式呢?
简单的说,在右边的都是函数的表达式
varfun1=function(){//函数表达式
varfun1=functionfun2(){//函数表达式
varobj={
Do:
function(){//函数表达式
newfunction(){//函数表达式
functionfun3(){
returnfunction(){//函数表达式
还有两种就是在()内和【】内,原谅我为了看的清楚了些,用了中文的【】,具体看下代码就ok了
(function(){});
[function(){}];
函数表达式和一般的表达式的值一样,都是执行到的时候才编译,不过有一个例外,就是非匿名的函数表达式
上面的代码如果你没有特定的含义,求你最好不要这么写,因为会出现你想不到的情况
alert(fun3===fun4);
上面的结果是无论如何都超过了初学者的想法:
在IE中式false,在Chrome或FireFox中是错误
对于Chrome或FireFox原因比较明显,也就是说,fun4被赋值后就立即抛弃了
在IE中
这一点是IE的错误,但是从结果可以得知:
命名函数表达式的名字在外部作用域是无效的。
哪怕如下,你执行下fun3还是不行的
fun3();
虽然IE是有错误,但是IE透露了一个信息,非匿名的函数表达式由于函数有名称,被优先的分配了。
看看我们最上面的函数定义声明的案例中的fun4
这么一来,如果你一不小心的话
A"
varcount=2;
varinput=10;
if(count%2==0){
odd"
else{
even"
这些代码的执行会不会出乎你的意料呢?
注意上面的代码在不同的浏览器中得到的是不同的。
再看看下面的代码
varfun1=function(x){
if(x<
10){
returnfunctionfun2(){
min"
max"
fun1(4)();
fun1(10)();
你是不是认为执行的结果又min也有max在不同的浏览器中,错了,这次他们都很正常的预期。
说明return将后面的非匿名函数表达式有效的让编译器作为表达式而不是声明来看待了。
那么非匿名的函数表达式有什么问题嘛?
我们来看一个demo
varfun1=functionfun2(){
OK"
//OK
fun2();
//在IE中弹出OK,在Chrome和FireFox中错误
既然只有IE支持,那我们在IE上继续点实现,学习一个种语言,千万不要被书上的条条框框限制,最好是多多多多的天马行空的乱想点不正经的代码出来,有静态语言经验的人都会被下面的代码的执行结果吓死
//fun1
//OK
fun1和fun2竟然不是指向同一个对象,或者说内存地址。
所以,如果说这个是IE的bug,那么我们幸好Chrome和FireFox不支持非匿名的函数表达式具有实在的意义,上帝保佑,这样我们尽可能的不要写出非匿名的函数表达式就可以避免很多问题了。
不过也有说法是说,非匿名的函数表达式在递归的时候有用,以下代码告诉我们匿名函数表达式也一样可以递归的哦,亲。
一个匿名函数使用递归的阶乘demo
alert((function(x){
if(x>
1){
returnx*arguments.callee(--x);
return1;
}(10)));
//3628800
以上说了一大堆,就是为了要告诉你一个关键事实:
函数表达式只能在代码执行阶段创建而且不存在于变量对象中,换个更通俗的说法是:
函数表达式只有当执行到的时候,其才存在,否则是当他不存在的。
我们用匿名函数除了是return和内部赋值外,还常常用来做一次性执行的自执行函数。
以下就匿名函数自执行的demo
(function(){
})();
}());
上面的两种写法在所有浏览器中都可以执行,随你喜欢什么方式,只要固定就好,有些书推荐使用方式2,我不清楚为什么,反正对我来说很随意的使用了。
匿名函数也可以传参
(function(x){
x--;
}(10));
匿名函数往往非常好用,我们可以把匿名函数作为一个参数来传递,有时候,我们传递的的确是函数的本身,有时候我们传递的是函数的结果,如果是函数的结果,那么函数的自调用就非常cool了
先看看传递函数,以下的代码会生成一组li元素,并且背景色是依据前一个li的背景色加一点点,这样看上去就是一个渐变区域。
当然,真的画渐变区域不必这样处理。
$(
function(){
$("
:
button"
).click(
varol=$("
li>
"
).css({width:
30,height:
30}).
addClass("
left"
).
appendTo("
ol"
ol.css("
backgroundColor"
function(index,value){
index=$("
ol>
li"
).index(this);
varr,g,b=0,colorValue="
;
if(index==0){
r=parseInt(Math.random()*256);
g=parseInt(Math.random()*256);
b=parseInt(Math.random()*256);
colorValue=$("
).eq(index-1).css("
toString().replace("
rgb("
"
).replace("
)"
)
r=parseInt(colorValue.split("
"
)[0]);
g=parseInt(colorValue.split("
)[1]);
b=parseInt(colorValue.split("
)[2])+5;
return"
+r+"
+g+"
+b+"
我们再看一个例子,匿名函数的自调用在传参的使用的用处。
我们点击一个div的时候,我创建了一个新的div,这个div的样式完全的复制了被点击的div的样式,注意我的css函数中传递了一个匿名的自调用函数,这个函数返回了一个对象
div"
div>
).appendTo("
body"
).css(
(function(e){
varstyleObj={};
for(varitemine.style){
if(e.style[item]!
="
){
styleObj[item]=e.style[item];
returnstyleObj;
}(this))
闭包部分
对于希望在javascript技术中提高的人群来说,闭包肯定时常是一个令人感觉神秘的技术。
早先有人说javaScript中的闭包可能会引发javaScript内存管理的复杂度,也许会出现内存泄露,所以不建议用闭包。
不过jQuery很好的证明了闭包
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javaScript 入门 提高 需要 注意 细节