JavaScript网摘Word格式.docx
《JavaScript网摘Word格式.docx》由会员分享，可在线阅读，更多相关《JavaScript网摘Word格式.docx（111页珍藏版）》请在冰豆网上搜索。
是什么让我们爱上Javascript75
Html的安全隐患79
JavaScript中的function使用方法
avaScript入门易，可深究起来，竟搞得我如此混乱，这恐怕就是弱类型语言的特点吧？
写惯了C++，还真是不适应。
近日在google上搜来搜去，学习了半天function、this和prototype，这就总结一下，但愿能把它们理清楚。
这是第一篇，关于JavaScript中的function。
参考了一些文章，我认为JavaScript中的function可以有以下两种用法：
一是做“普通逻辑代码容器”，也就是我们通常意义上的函数、方法，和我们C/C++里的函数没什么大分别，只是写法稍有不同、用法更加灵活；
二是做对象，有的地方叫它函数对象，其用法和作用有点类似C++里的class（类）。
下面来详细说说这两种用法。
一、function用作普通函数
function用作普通函数的定义方法如下：
functionfunctionName（[argument1][,argument2][...,argumentN]）{
[statements]
}
具体写法有以下两种：
1.定义式：
如：
functionmultiply（x,y）{
returnx*y;
}
它的使用方法如下：
varproduct=multiply（128,128）;
//product=16384
2.声明式：
varproduct=functionmultiply（x,y）{
需要说明的是:
1.用作普通函数时，function几乎可以在脚本的任何地方定义，但推荐在一个HTML文档的<
head>
<
/head>
区域里定义，这样可以保证如果另一个脚本需要立即使用这里声明的函数时，就可以立即使用它。
2.上述两种具体写法在重复定义的时候也有一些差别，如下
若做如下函数定义：
varexample=function（）{
return1;
example（）;
return2;
得到结果是
1
2
functionexample（）{
那么会得到另一种结果：
2
在采用定义式创建同名函数时，后创建的函数会覆盖先创建的函数。
这种差别是由于JavaScript解释引擎的工作机制所导致的。
由于注册函数时，后定义的函数重写了先定义的函数，因此无论调用语句位于何处，执行的都是后定义的函数。
相反，对于声明式创建的函数，JavaScript解释引擎会像对待任何声明的变量一样，等到执行调用该变量的代码时才会对变量求值。
因此当执行第一个example（）调用时，example函数的代码就是首先定义代码；
而当执行第二个example（）调用时，example函数的代码又变成了后来定义的代码。
当然，好的习惯是不要这样写，也不要试图利用“声明式”的这种机制来投机取巧。
不过，函数重载除外，但是，javascript里好像并没有函数重载这种写法吧？
二、函数对象
1．基本概念
在JavaScript中，function还可以被用做对象（或者窃以为该叫做类更合适）。
这也许听起来很怪异也很难理解，但考虑到JavaScript既然是一种面向对象的语言，那么它里面总得可以实现类和对象吧？
看看下面的用法就知道了——用function来实现类和对象倒也真无可厚非。
首先要说明一下的是与function有密切关系的this这个东西。
“JavaScript在解析代码时，会为声明或定义的函数指定调用对象。
所谓调用对象，就是函数的执行环境。
”也就是说，在函数体中，可以以this关键字来使用它的调用对象（关于this的具体用法，另作讨论，详见下篇）。
“如果函数体内有以关键字this声明的变量，则this引用的就是调用对象。
”
下面就来看看作为函数对象的function通常是怎么写的：
functionAnimal（sort,character）{
this.sort=sort;
this.character=character;
上面的代码就定义了一个函数对象，其意义与C++中的class相似，它的构造函数就是这个函数Animal。
其实看起来跟上面的普通函数没什么分别，换句话说，按照上面介绍的普通函数定义方法写，结果就会得到一个函数对象，窃以为JavaScript中其实只存在函数对象，不存在我们传统意义上的“函数”，只是它的使用方法灵活多样，可以按照我们传统的使用方法functionName（…）直接调用，也可以按下面的方法作为对象使用：
vardog=newAnimal（”mammal”,”fourlegs”）;
//创建一个函数对象实例
2.函数对象创建过程
函数怎么又成了对象了呢？
它是怎么构造的呢？
先来了解一下JavaScript里的函数对象都有什么吧~简单地说，JavaScript里的函数对象最初包含一个默认的构造函数，函数名是Object，同时，还有个成员（属性）——__proto__，与大名鼎鼎的prototype属性相关（用于实现JavaScript里的继承），关于prototype的用法，另作讨论，详见后文。
了解了这些，再看看上面这个dog对象的构造过程吧~
“创建dog的对象的过程如下：
首先，new运算符创建一个空对象（{}），然后以这个空对象为调用对象调用函数Animal”（也就是跟传统意义上的对象构造过程相同，调用它的构造函数进行初始化）“，为这个空对象添加两个属性sort和character，接着，再将这个空对象的默认constructor属性修改为构造函数的名称（即Animal；
空对象创建时默认的constructor属性值是Object），并且将空对象的__proto__属性设置为指向Animal.prototype——这就是所谓的对象初始化。
最后，返回初始化完毕的对象。
这里将返回的新对象赋值给了变量dog。
3.直接实例化的写法
函数对象的定义、实例化过程也可以简化如下：
vardog={};
dog.name=“heibao”;
dog.age=“3months”;
dog.shout=function（）{
return“Hello,Mynameis“+this.name+”andIam”+this.age+”old!
”;
dog.shout（）;
//“Hello,MynameisheibaoandIam3monthsold!
”
上面的代码中，dog是个对象，它有name、age两个属性，还有个成员函数（也是个对象，就是我们的函数对象）shout。
这里的shout的定义方法就是做了简化——直接被function赋值。
对象也可以借用其他对象的方法：
varcat={};
cat.name=“xiaohua”;
cat.age=“2years”;
cat.greet=dog.shout;
cat.greet（）;
//“Hello,MynameisxiaohuaandIam2yearsold!
这里需要强调的是，每个函数对象都有两个特殊的方法——call和apply，用它们可以动态指定函数或方法的调用对象：
dog.shout.call（cat）;
//或者
dog.shout.apply（cat）;
从这里想到，是不是我们可以用call或apple函数来替代上面的方法进行函数对象的实例化呢？
答案是否定的。
让我们来从这个角度进一步分析一下函数对象的构造过程，以便加深理解：
如果我们企图这么写来达到函数对象实例化的效果：
Animal.call（dog,“mammal”,”fourlegs”）;
那么，“表面上看，这两行代码与vardog=newAnimal（”mammal”,”fourlegs”）;
是等价的，其实却不是。
虽然通过指定函数的执行环境能够部分达到初始化对象的目的，例如空对象dog确实获得了sort和character这两个属性“：
dog.sort;
//mammal
dog.character;
//fourlegs
dog.constructor;
//Object——注意，没有修改dog对象默认的constructor属性
然而，“最关键的是新创建的dog对象失去了通过Animal.prototype属性继承其他对象的能力。
只要与前面采用new运算符调用构造函数创建对象的过程对比一下，就会发现，new运算符在初始化新对象期间，除了为新对象添加显式声明的属性外，还会对新对象进行了一番“暗箱操作”——即将新对象的constructor属性重写为Animal，将新对象的__proto__属性设置为指向Animal.prototype。
虽然手工“初始化对象”也可以将dog.constructor重写为Animal，但根据ECMA262规范，对象的__proto__属性对开发人员是只读的，对它的设置只能在通过new运算符创建对象时由JavaScript解释引擎替我们完成。
看看这样做的后果：
如果不能正确设置对象的__proto__属性，那么就意味着默认的继承机制会失效：
Animal.prototype.greet=“Hi,goodlucky!
dog.greet;
//undefined
事实上，虽然在Firefox中，__proto__属性也是可写的：
dog.__proto__=Animal.prototype;
//Hi,goodlucky!
但这样做只能在Firefox中行得通。
考虑到在兼容多浏览器，必须依赖于new运算符，才能实现基于原型的继承。
prototype属性使用方法
一、基本使用方法
prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。
简而言之，prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“继承”的效果。
具体来说，prototype是在IE4及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。
这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。
一个简单的示例如下：
Number.prototype.add=function（num）{return（this+num）;
这是对已有类添加方法。
这样写，可以增强已有类的功能，例如可以给Array类增加push方法如下：
Array.prototype.push=function（new_element）{
this[this.length]=new_element;
returnthis.length;
}
对于自定义的类（或者称函数对象），也可以这样写：
functionMyApplication（）{
this.counter=0;
this.map=newGMap2（document.getElementById（"
map_canvas"
））;
this.map.setCenter（newGLatLng（39.917,116.397）,14）;
GEvent.bind（this.map,"
click"
this,this.onMapClick）;
}
MyApplication.prototype.onMapClick=function（）{
this.counter++;
alert（"
这是您第"
+this.counter+"
次点击地图"
）;
这里定义了创建地图的类，并且为其定义了“单击”事件的响应函数。
二、prototype的动态特性及弊端
需要注意的是，prototype为我们提供了方便，使我们可以在类定义完成之后，仍可以随时为其添加方法、属性，随时添加随时使用——也就是prototype的定义具有动态性。
但是越灵活的语言出现错误的可能性越大。
这就需要我们在使用时，必须养成一些良好的习惯。
“首先，如果可以动态添加属性和方法，那么很容易让人想到，当我调用时，我想要调用的属性或者方法存在不？
这是一个很严肃的问题，如果当我们调用时根本没有该属性或者方法，将可能导致我们的脚本down掉。
”对于这个问题，在使用时我们以后可以按照下面的写法书写：
functionMyObject（name,size）
{
this.name=name;
this.size=size;
MyObject.prototype.height="
2.26meters"
;
MyObject.prototype.tellHeight=function（）
return"
heightof"
+this.name+"
is"
+this.height;
///////使用
varmyobj1=newMyObject（"
haha"
3）;
if（myobj1.tellHeight）
{
domDiv.innerHTML+=myobj1.tellHeight（）+"
属性和方法在不在的问题简单，可是属性和方法变不变化的问题可就严重了。
在不在我们可以检测，变不变呢？
比如，请看下面的代码：
functionMyObject（name,size）
MyObject.prototype.color="
red"
MyObject.prototype.tellColor=function（）
colorof"
+this.color;
tiddles"
"
7.5meters"
domDiv.innerHTML+=myobj1.tellColor（）+"
br/>
"
MyObject.prototype.color="
green"
domDiv.innerHTML+=myobj1.tellColor（）+"
修改的是类MyObject的color属性。
但是你惊奇的会看到你之前实例化的对象myobj1的属性值竟然也变化了：
coloroftiddlesisred
coloroftiddlesisgreen
上面是属性，还有方法，方法也是可以变的！
yourcolorof"
这段代码的结果是：
yourcoloroftiddlesisgreen
Java和C#这些比较严格的语言，虽然降低了灵活性，但也减少了犯错误的可能。
这样，即使一个新手，他写出的代码也不会与高手差太多。
但是，像Javascript这样的脚本语言，由于太灵活，所以，一定要有好的代码编写习惯，否则出现了上面的问题，调试时可就难咯！
三、prototype的实现机制
可以说，prototype实际上是“引用”，而非“赋值”。
也就是给一个类添加一个属性或者方法，是给它添加了个引用，而非赋值一份给它。
看看下面的这个例子：
html>
metahttp-equiv="
content-type"
content="
text/html;
charset=UTF-8"
/>
title>
Test"
prototype"
/title>
mce:
scripttype="
text/javascript"
>
!
--
functionClassA（）
{
alert（"
a"
this.a=function（）{alert（）;
};
}
functionClassB（）
b"
this.b=function（）{alert（）;
`
ClassB.prototype.a=newClassA（）;
//会导致弹出a对话框
ClassB.prototype.xx="
xx"
functioninitialize（）
varobjB1=newClassB（）;
//弹出b对话框
varobjB2=newClassB（）;
alert（objB1.a==objB2.a）;
//true
alert（objB1.b==objB2.b）;
//false
objB1.xx:
"
+objB1.xx+"
objB2.xx:
+objB2.xx）;
//objB1.xx:
xx,objB2.xx:
xx
ClassB.prototype.xx="
yy"
yy,objB2.xx:
yy
objB2.xx="
zz"
zz
//-->
/mce:
script>
body>
initialize（）;
/body>
/html>
其执行结果是依次弹出以下窗口：
a
b
true
false
zz
相关的解释已经注释在代码中。
从上面的代码可以发现，prototype只是给ClassB添加了ClassA实例的引用。
因此，两个ClassB的实例中的a实例相等。
同时，ClassA的构造函数只在添加引用时被执行一次，此后ClassB的对象实例化时，只执行ClassB的构造函数。
javascriptthis详解
在面向对象编程语言中，对于this关键字我们是非常熟悉的。
比如C++、C#和Java等都提供了这个关键字，虽然在开始学习的时候觉得比较难，但只要理解了，用起来是非常方便和意义确定的。
JavaScript也提供了这个this关键字，不过用起来就比经典OO语言中要"
混乱"
的多了。
下面就来看看，在JavaScript中各种this的使用方法有什么混乱之处？
1、在HTML元素事件属性中inline方式使用this关键字：
divonclick="
//可以在里面使用this
divisionelement<
/div>
<
//可以在里面使用this
我们一般比较常用的方法是在此使用：
java
升级会员 