Javascript学习笔记自学实用.docx
- 文档编号:12926024
- 上传时间:2023-04-22
- 格式:DOCX
- 页数:62
- 大小:177.72KB
Javascript学习笔记自学实用.docx
《Javascript学习笔记自学实用.docx》由会员分享,可在线阅读,更多相关《Javascript学习笔记自学实用.docx(62页珍藏版)》请在冰豆网上搜索。
Javascript学习笔记自学实用
JavaScript学习笔记
一.基础篇
Javascript学习笔记1——数据类型
在Javascript中只有五种简单类型,分别为null,undefined,boolean,String和Number.一种复杂类型:
object。
代码类型只有一种形式就是function。
undefined:
未定义,我们也可称之为不存在,typeof(undefined)=undefined.
null:
为空。
undefined是不存在,而null是存在,但却无。
typeof(null)=object,但null又不是object,这就是null的神奇而独特之处。
boolean:
trueorfalse。
Number:
NaN和Infinity是两个特殊之数,NaN代表一个无法用数值来表示的数字,而Infinity代表一个无穷大的数字,相对的,-Infinify则代表负无穷大。
在此有两点特殊的地方:
NaN!
=NaN,Infinity/Infinity=NaN。
在Number类型中,有个非常有用的方法:
ToString(),他可以接受一个从2到36的数字,然后把我们的Number转换为相应的进制数。
String:
字符串,Javascript中没有字符的概念,字符串是表示文本的最小单位。
在字符串中,有这样的两个函数,分别是charAt(index)和charCodeAt(index)分别返回对应索引的字符和字符Unicode编码。
在我们平时,可能经常会使用下标的方式访问,如s[10],可是这并不是ECMAScript的标准,应该尽量避免。
Javascript的一切类型都是基于这五个简单类型向上搭建。
这五个类型之间又有着万千复杂的关系,undefined,null,0,“”转换为boolean时就是false,而除去这四个外,所有的都为true。
但是在这五个当中,除了undefined==null,其他又都不相等。
我们在此又有着这样和强类型语言不通之处,例如123==“123”。
那么我们如何能够区分类型呢?
这个时候:
全等于:
===就发挥了用场。
Javascript学习笔记2——函数
在Javascript中,function才是Javascript的第一型。
当我们写下一段函数时,其实不过是建立了一个function类型的实体。
就像我们可以写成这样的形式一样:
functionHello(){
alert("Hello");
}
Hello();
varHello=function(){
alert("Hello");
}
Hello();
其实都是一样的。
但是当我们对其中的函数进行修改时,会发现很奇怪的问题。
functionHello(){
alert("Hello");
}
Hello();
functionHello(){
alert("HelloWorld");
}
Hello();
我们会看到这样的结果:
连续输出了两次HelloWorld。
而非我们想象中的Hello和HelloWorld。
这是因为Javascript并非完全的按顺序解释执行,而是在解释之前会对Javascript进行一次“预编译”,在预编译的过程中,会把定义式的函数优先执行,也会把所有var变量创建,默认值为undefined,以提高程序的执行效率。
也就是说上面的一段代码其实被JS引擎预编译为这样的形式:
varHello=function(){
alert("Hello");
}
Hello=function(){
alert("HelloWorld");
}
Hello();
Hello();
我们可以通过上面的代码很清晰地看到,其实函数也是数据,也是变量,我们也可以对“函数“进行赋值(重赋值)。
当然,我们为了防止这样的情况,也可以这样:
functionHello(){
alert("Hello");
}
Hello();
functionHello(){
alert("HelloWorld");
}
Hello();
这样,程序被分成了两段,JS引擎也就不会把他们放到一起了。
Javascript学习笔记3——作用域
每个写过程序的人都不会对作用域这个概念陌生,那在这篇文章中就来谈下Javascript的作用域。
在Javascript,全局环境本身就一个对象。
在浏览器宿主中这个对象是window,而当Javascript用于其它非浏览器的宿主,如嵌入式的环境中,可能会是其它的对象。
在这里也纠正一个观念,有很多人都认为Javascript只在浏览器中使用,其实Javascript也能在很多非Web情况下使用,据介绍Javascript在一些基于嵌入式的应用领域表现得也很出色,当然这些我也只是听过传说而已。
言归正传,当我们写下:
vari=1时,其实就是声明了一个window作用域的一个变量。
而当我们写下i=1时,是声明了一个window的属性。
看这样一段代码:
vara="hello";
b="world";
Test();
functionTest(){
alert(a+""+b);
vara="welcome";
b="china";
alert(a+""+b);
}
alert(a+""+b);
这段代码分别输出的结果是:
undefinedworld,welcomechina,hellochina.
我们来分别解释:
在上文中,我们说过,在Javascript预编译时,会把所有var变量创建,默认值为undefined,我们在这里可以举一个例子:
我们可以写这样一段代码:
alert(a);
alert(b);
vara="111";
b="111";
当我们执行运行这段脚本时,可以发现,首先弹出undefined,然后回提示脚本错误,提示b不存在。
由此就可以表明,a在预编译的过程中就已经被创建并且初始化为undefined,而b却只能在实际运行时按顺序去解释。
其实在预编译后的Javascript代码可以近乎理解如下:
vara=undefined;
alert(a);
alert(b);
a="111";
b="111";
接下来我们可以谈一下函数的作用域问题,每当代码运行进入一个函数时,Javascript引擎就会自动创建一个新的作用域,然后把这个新作用域作为当前作用域的子作用域,然后把当前的代码作用域切换到这个新作用域。
当代码退出函数时,这个作用域销毁,把代码作用域交还给他的父作用域。
好,准备工作差不多了,接下来我们就来解释第一个问题:
问什么会输出undefinedworld。
首先代码进行在预编译,当进入Test方法时,开启一个新作用域,然后把全局作用域作为他的父作用域。
然后对Test内的方法进行预编译,和上面的代码一样,Test方法被预编译后方法体大致如下:
functionTest(){
vara=undefined;
alert(a+""+b);
vara="welcome";
b="china";
alert(a+""+b);
}
当然,在当前作用域下无法找到b,于是他就会到他的父作用域下,也就是全局作用域找到了b=“world”。
于是也就产生了这样的结果。
第二次弹出welcomechina,没什么好说的。
第三次,弹出hellochina。
我们可以这样理解,vara只是方法Test的一个局部变量,而b由于事先未声明,因此他会去父作用域中去找到对应的定义。
好,接下来,我们再看一下这个方法的若干个变体。
vara="hello";
b="world";
Test();
functionTest(){
alert(a+""+b);
a="welcome";
b="china";
alert(a+""+b);
}
alert(a+""+b);
首先,我们将方法体内的vara改成a,我们先不看答案,直接来分析,首先,在预编译阶段,方法体内几乎没有任何改变,因此此时a和b一样,都要去他们的父作用域中去寻找,因此第一次出的结果应该是helloworld,第二次没什么说的:
welcomechina,第三次由于a和b在本作用域内都没有事先定义,因此都是再改变父作用域内的值,因此应该输出welcomechina.
我们继续:
vara="hello";
b="world";
Test();
functionTest(){
alert(a+""+b);
vara="welcome";
varb="china";
alert(a+""+b);
}
alert(a+""+b);
和上面的分析一样,应该输出undefinedundefined,welcomechina,helloworld.
继续:
a="hello";
b="world";
Test();
functionTest(){
alert(a+""+b);
vara="welcome";
b="china";
alert(a+""+b);
}
alert(a+""+b);
应该是undefinedworld,welcomechina,hellochina.
经试验,都没问题,不知道你明白了么?
因此我们可以得出,每个变量在找不到自己的定义时,都会沿着作用链向上寻找,这样就很可能会出现未预知的错误,给排错添加了很多困难。
更麻烦的是,还可能会对父作用域上的变量值进行修改,因此我们在声明变量时应该尽量加上var,尽管Javascript并不强迫我们这样做。
Javascript学习笔记4——Eval函数
在初学JS的时候就知道这个函数,却一直没有了解过他的用途,也一直都是睁一只眼闭一只眼,这次来深入地了解一下这个函数的作用。
eval的作用其实很简单,就是把一段字符串传递给JS解释器,由Javascript解释器将这段字符串解释成Javascript代码,并且执行他。
举个最简单的例子:
eval("alert(1+1)");
很简单,把字符串解释成JS代码并执行,弹出2。
当然,上面的例子只是个玩具,在实际中没有人会傻到这么用。
我想大家最基本的使用eval函数都是应该在DOM中,例如我们有div1,div2,div3,那么在document.getElementByID时我们的ID没有办法去得到,那么最简单的办法就是在for循环中,使用eval来拼接这么一段程序。
例如这样:
for(varloop=1;loop<10;loop++){
eval('document.getElementById("div"+loop).innerHTML="123"');
}
最基本的用法说完,相信大家还是对这个函数意犹未尽,如果这个函数只有这么点用法,那就太无聊了。
那我们就一点点来剖下一下eval()函数。
我们就先从eval的作用域说起,先看这样一段函数:
eval("vari=3");
alert(i);
代码很简单,结果可以弹出3。
接下来再对比这段代码:
vartest=function(){
eval("vari=3");
alert(i);
}
test();
alert(i);
结果是首先弹出3,然后是undefined。
那么说明:
eval()函数动态执行的代码并不会创建新的作用域,其代码就是在当前的作用域执行的。
因此也就是说,eval()函数也完全可以使用当前作用域的this,argument等对象。
在IE中,支持这样一种和eval()非常类似的函数叫做:
execScript()。
我们可以来写段简单的代码。
vartest=function(){
execScript("vari=3");
alert(i);
}
test();
alert(i);
结果弹出了2个3,这也就看出了execScript函数的特点,首先他和eval相类似,都能将字符串解释成JS代码并且执行,但是他的作用域不是当前作用域,而是全局作用域。
当我们把上面的代码放到Firefox和谷歌浏览器上去试试:
发现在Firefox上execScript上代码是无效的,那么也说明一个问题,execScript代码的浏览器兼容性是有问题的。
那么就引申出这样一个问题,我们如何能把这两个函数的“优点”给汇总到一起呢,也就是说,全局+浏览器兼容性。
上网搜了下,自己给汇总了一下,大概是这样:
varStrongEval=function(code){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
execScript(code);
}
if(window.navigator.userAgent.indexOf("Firefox")>=1){
window.eval(code);
}
else{
execScript(code);
}
};
varTest=function(){
StrongEval("vari=3");
}
Test();
alert(i);
这样就可以完美地兼容FF和IE了,其本质代码就在于在FF中eval和window.eval并不等效,这是个很奇妙的事。
另外,我们还可以用eval+with实现一些奇淫技巧。
我们在一般意义上可以写出这样的代码:
varobj=function(){
this.a=1;
this.b=2;
this.c=5;
this.fun=function(){
this.c=this.a+this.b;
}
};
varo=newobj();
o.fun();
alert(o.c);
或者是这样:
varobj={
a:
1,
b:
2,
c:
5,
fun:
function(){
this.c=this.a+this.b;
}
}
再或者是这样:
varobj=function(){
this.a=1;
this.b=2;
this.c=5;
};
obj.prototype.fun=function(){
this.c=this.a+this.b;
}
varo=newobj();
o.fun();
alert(o.c);
无论怎么样,你是不是对这样的this感觉厌烦了呢?
那就让我们采取个很另类的办法吧,让至少在感官上可能会舒服一点。
varfuntemp=function(){
c=a+b;
}
varobj={
a:
1,
b:
2,
c:
5
};
varfun;
with(obj){
eval("fun="+funtemp);
}
fun();
alert(obj.c);
这个很勉强,那么好,我们不讨论什么看着舒服不舒服。
我们来讨论这样一种情况。
varDBCommon=function(){
alert("1.");CreateConnection();
alert("2.");OpenConnection();
alert("3.");CreateCommand();
alert("4.");ExcuteCommand();
alert("5.");CloseConnection();
}
varSQLServerCommon={
CreateConnection:
function(){alert("建立SQLServer连接");},
OpenConnection:
function(){alert("打开SQLServer连接");},
CreateCommand:
function(){alert("创建¨SQLServer命令");},
ExcuteCommand:
function(){alert("执行DSQLServer命令");},
CloseConnection:
function(){alert("关闭SQLServer连接");}
};
varOracleCommon={
CreateConnection:
function(){alert("建立¢Oracle连接");},
OpenConnection:
function(){alert("打开aOracle连接");},
CreateCommand:
function(){alert("创建¨Oracle命令");},
ExcuteCommand:
function(){alert("执行DOracle命令");},
CloseConnection:
function(){alert("关闭?
Oracle连接");}
};
with(SQLServerCommon){
eval("forSQLServer="+DBCommon);
}
with(OracleCommon){
eval("forOracle="+DBCommon);
}
forSQLServer();
forOracle();
我们又是否可以把这个看成是一个简陋的模板方法模式呢?
呵呵。
我们也可以把这个称为利用eval和with配合改变函数的上下文。
不过话又说回来,Eval在一般的情况中是很少被用到的,我们是完全可以避免来使用它的。
Javascript学习笔记5——类和对象
首先,不得不说,我无法达到抛开类和对象的概念来看Javascript的境界,对于Javascript是否是面向对象的说法有很多,不过我最认同的还是Javascript是一种“基于prototype的面向对象语言”。
面向对象语言三大特点:
继承,多态,封装,这三点虽然Javascript没有提供天然的语法实现,但是我们都可以通过prototype等技巧来实现,因此这种说法似乎不过分。
在Javascript中,构造对象有三种方式:
1.首先,我们要明确一个概念,Javascript是一种弱类型的语言,一方面体现在Javascript的变量,返回类型都是没有强类型约束的,另一方面,Javascript可以为对象任意添加属性和方法。
根据这个,我们可以写出这样的代码:
varperson={};
person.name="飞林沙";
person.age=21;
person.Introduce=function(){
alert("Mynameis"+this.name+".I'm"+this.age);
};
person.Introduce();
这里的person就是我们构造出的一个对象。
2.我们也可以利用JSON的形式来构造一个对象。
varperson={
name:
"飞林沙",
age:
21,
Introduce:
function(){alert("Mynameis"+this.name+".I'm"+this.age);}
};
person.Introduce();
这个是不是很像我们在C#3.0里提出的匿名对象呢?
protectedvoidPage_Load(objectsender,EventArgse)
{
varperson=new
{
name="飞林沙",
age=21
};
Response.Write("Mynameis"+person.name+".I'm"+person.age);
}
不同的是在Javascript中,函数是一种类型,所以可以赋给某个变量,但是C#不可以。
但是上面两种方法我们看到,我们都是单独定义了一个对象。
接下来让我们把他们抽象出来成为一个类。
varPerson=function(){
this.name="飞林沙";
this.age=21;
this.Introduce=function(){
alert("Mynameis"+this.name+".I'm"+this.age);
};
};
varperson=newPerso
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript 学习 笔记 自学 实用