avascript简介

javascript是一种脚本语言只要有javascript引擎即可（Mozilla，Google，微软，其它宿主环境）

? javascript是基于对象的语言1）可以创建对象

2）可以使用内置对象3）没有类的概念，没有方法的重载

? 与java无任何关系，除了名字和部分语法

javascript浏览器中的局限性

? javascript不能打开、读、写、保存计算机上的文件

? javascript不能编写破坏计算机上任何资源的病毒

? javascript在不同浏览器的差异性

基本数据类型

? JS是弱类型的，内置类型简单且清晰

? number : 数字

? boolean : 布尔值

? string : 字符串

? undefined : 未定义

? null ：空值

? function : 函数

? object : 对象

undefined类型

? 代表一切未知的事物,js引擎不能理解的东西，如 ：

1) 对象没有的属性

2) 未传入的参数

3) 函数未返回值

例：var a=b+1；

number类型

例：var a=1;.? Number.MAX_VALUE : 返回 JScript 能表达的最大的数

。约等于 1.79E+308。? Number.MIN_VALUE : 返回 JScript 最接近0的数。约等

于 5E-324。全局对象(Gobal)中还有两个属性与number类型的运

算有关：? NaN : 算术表达式的运算结果不是数字，则返回NaN

值。例： var v1=10 * 'a';

isNaN(v1);

? Infinity : 比MAX_VALUE更大的数。

boolean类型

? 例：var a=true,b=false；

? javascript中的if语句中的条件

1) boolean

2) string 空字符串返回的结果是false,其他是true

3)object类型，null是false，其他是true

4)function类型，都输true

5)number,0,0.00为false，其他为true

6)undefined, 都是false

string类型

? 例：var a="hello world！"；

? concat

? indexof

? charAt

? lastIndexOf

函数function

? 在javascript中，很多功能、灵活性以及表达能力都来自函数，包括实现面向对象语法。

? function定义有2种

函数function

? 第一种(声明式)

function myfunc()

{

alert("hello");

};

print(typeof(myfunc));

函数function

? 第二种（变量式）

var myfunc=function ()

{

alert("hello");

};

print(typeof(myfunc));

函数function第一种方法：

JavaScript 函数只是一个命了名的变量而已，其变量类型即为function，变量的值就是我

们编写的函数代码体。

问题：既然函数只是变量，那么变量就可以被随意赋值并用到任意地方？

var myfunc=function ()

{

alert("hello");

};

myfunc(); //第一次调用myfunc，输出hello

myfunc=function ()

{

alert("yeah");

};

myfunc(); //第二次调用myfunc，将输出yeah

答案是肯定的！在第一次调用函数之后，函数变量又被赋予了新的函数

代码体，使得第二次调用该函数时，出现了不同的输出。

函数function第二种方法

function myfunc ()

{

print("hello");

};

myfunc(); //这里调用myfunc，输出yeah 而不是hello

function myfunc ()

{

print("yeah");

};

myfunc(); //这里调用myfunc，当然输出yeahJavaScript 执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且，在

同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行。函数定义执行完之后，才会按顺序

执行其他语句代码。也就是说，在第一次调用myfunc 之前，第一个函数语句定义的代码逻辑，已被第二

个函数定义语句覆盖了。所以，两次都调用都是执行最后一个函数逻辑了。

函数function

? 函数也可以有自己的成员,函数。如：function myfun(){};

myfun.name='123';

myfun.yourfun=function(){}

? 任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号"()"操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同

? javascript中的方法没有重载，同名函数将被覆盖。

原型prototype

每个函数都有一个prototype属性，该属性储存的就是原型对象

function foo(a,b){ return a*b;}

typeof(foo.prototype) // object

foo.prototype={

x : 111,

y:222,

fn : function(){this.x+this.y}

}

Object对象

? JavaScript 中不管多么复杂的数据和代码，都可以组织成object 形式的

? 定义方式：

方式1：var obj=new Object();

方式2：var obj={};

从方式2可以看出，javascript的对象并不需要类就能产生，其实javascript没有类的概念

封装

? Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

? 那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

生成对象的原始模式

? 假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。

var Cat={

name : '',

color : ''

}

? 现在，我们需要根据这个原型对象的规格（schema），生成两个实例对象。

var cat1={}; // 创建一个空对象cat1.name="大毛"; // 按照原型对象的属性赋值cat1.color="黄色";

var cat2={};

cat2.name="二毛";cat2.color="黑色";

? 好了，这就是最简单的封装了，把两个属性封装在一个对象里面。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

原始模式的改进? 我们可以写一个函数，解决代码重复的问题。

function Cat(name,color){

return {

name:name,

color:color

}

}

? 然后生成实例对象，就等于是在调用函数：

? var cat1=Cat("大毛","黄色");

? var cat2=Cat("二毛","黑色");

? 这种方法的问题依然是，cat1和cat2之间没有内

在的联系，不能反映出它们是同一个原型对象的实例。

? 为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

? 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

? 比如，猫的原型对象现在可以这样写，function Cat(name,color){

this.name=name;

this.color=color;

}

? 我们现在就可以生成实例对象了。var cat1=new Cat("大毛","黄色");var cat2=new Cat("二毛","黑色");alert(cat1.name); // 大毛alert(cat1.color); // 黄色

? 这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。

? alert(cat1.constructor==Cat); //true

? alert(cat2.constructor==Cat); //true

? Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。

? alert(cat1 instanceof Cat); //true

? alert(cat2 instanceof Cat); //true

Object类型 -- 访问成员

? 对象的成员名称可以为任意字符串

? 访问方式

1）obj.成员名

2）obj['成员名']

? 遍历一个对象所有成员的方式 for(var item in obj){obj[item]}

构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

? 请看，我们现在为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：

function Cat(name,color){

this.name=name;

this.color=color;

this.type="猫科动物";

this.eat=function(){alert("吃老鼠");};

}

? 还是采用同样的方法，生成实例：

? var cat1=new Cat("大毛","黄色");

? var cat2=new Cat ("二毛","黑色");

? alert(cat1.type); // 猫科动物

? cat1.eat(); // 吃老鼠

? 表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

? alert(cat1.eat==cat2.eat); //false

? 能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

Prototype模式

? Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

? 这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

function Cat(name,color){

this.name=name;

this.color=color;

}

Cat.prototype.type="猫科动物";

Cat.prototype.eat=function(){alert("吃老鼠")};

? 然后，生成实例。

? var cat1=new Cat("大毛","黄色");

? var cat2=new Cat("二毛","黑色");

? alert(cat1.type); // 猫科动物

? cat1.eat(); // 吃老鼠

? 这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

? alert(cat1.eat==cat2.eat); //true

function 中的this关键字

? 搞了this是谁，记住一句话就行：方法是谁的this就是谁,方法谁也不是,this就是window，请看例子：

function WhoAmI() //定义一个函数WhoAmI{

alert("I'm " + this.name + " of " + typeof(this));

};

function 中的this关键字

var BillGates={name: "Bill Gates"};

BillGates.WhoAmI=WhoAmI;

BillGates.WhoAmI();//I'm Bill Gates of object

var SteveJobs={name: "Steve Jobs"};

SteveJobs.WhoAmI=WhoAmI;

SteveJobs.WhoAmI();//I'm Steve Jobs of object

闭包（Closure）一、变量的作用域

? 要理解闭包，首先必须理解Javascript特殊的变量作用域

? 变量的作用域无非就是两种：全局变量和局部变量。

? Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

? 例：

var n=999;

function f1(){

alert(n);

}

f1(); // 999

? 另一方面，在函数外部自然无法读取函数内的局部变量。

? 例：function f1(){

var n=999;

}

alert(n); // error

? 这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

例：function f1(){

n=999;

}

f1();

alert(n); // 999

闭包

二、如何从外部读取局部变量？

? 出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

? 例：function f1(){

var n=999;

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); // 999

在函数的内部，再定义一个函数。f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了

三、闭包的概念

? 上一节代码中的f2函数，就是闭包。

? 各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

? 由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

? 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

? 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

例：function f1(){

var n=999;

nAdd=function(){n+=1}

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000

五、使用闭包的注意点

? 1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

? 2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

继承? 构造函数的继承

一、 构造函数绑定

二、 prototype模式

三、 直接继承prototype

四、 利用空对象作为中介

五、 拷贝继承

? 非构造函数的继承

一、object()方法

二、浅拷贝

三、深拷贝

构造函数的继承? 比如，现在有一个"动物"对象的构造函数。

function Animal(){

this.species="动物";}

? 还有一个"猫"对象的构造函数。function Cat(name,color){

this.name=name;

this.color=color;

}

怎样才能使"猫"继承"动物"呢？

构造函数绑定? 第一种方法也是最简单的方法，使用call或apply方法，将

父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

function Cat(name,color){

Animal.apply(this, arguments);

this.name=name;

this.color=color;

}

var cat1=new Cat("大毛","黄色");alert(cat1.species); // 动物

prototype模式? 第二种方法更常见，使用prototype属性。

? 如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

Cat.prototype=new Animal();

Cat.prototype.constructor=Cat; // 重置构造函数

var cat1=new Cat("大毛","黄色");

alert(cat1.species); // 动物

直接继承prototype? 第三种方法是对第二种方法的改进。由于Animal对象中，不变的属性

都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过Animal()，直接继承Animal.prototype。

? Animal对象改写function Animal(){ }

Animal.prototype.species="动物";

? 然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承。

Cat.prototype=Animal.prototype;

Cat.prototype.constructor=Cat; // 重置构造函数var cat1=new Cat("大毛","黄色");alert(cat1.species); // 动物

? 与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

? 所以，上面这一段代码其实是有问题的。请看第二行

? Cat.prototype.constructor=Cat;

? 这一句实际上把Animal.prototype对象的constructor属性也改掉了！

? alert(Animal.prototype.constructor); // Cat

利用空对象作为中介? 由于"直接继承prototype"存在上述的缺点，所以就有第四种方法，利用一个空对象作为中介。

var F=function(){};

F.prototype=Animal.prototype;

Cat.prototype=new F();

Cat.prototype.constructor=Cat;

? 我们将上面的方法，封装成一个函数，便于使用。

function extend(Child, Parent) {

var F=function(){};

F.prototype=Parent.prototype;

Child.prototype=new F();

Child.prototype.constructor=Child;

Child.uber=Parent.prototype; // 子对象访问父对象通道}

extend(Cat,Animal);

var cat1=new Cat("大毛","黄色");alert(cat1.species); // 动物

这个extend函数，就是YUI库如何实现继承的方法。

拷贝继承

? 上面是采用prototype对象，实现继承。我们也可以换一种思路，纯粹采用"拷贝"方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？这样我们就有了第五种方法。

? 首先，还是把Animal的所有不变属性，都放到它的prototype对象上。function Animal(){}

Animal.prototype.species="动物";

? 然后，再写一个函数，实现属性拷贝的目的。

function extend2(Child, Parent) {

var p=Parent.prototype;

var c=Child.prototype;

for (var i in p) {

c[i]=p[i];

}

c.uber=p;

}

? 这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。

? 使用的时候，这样写：

extend2(Cat, Animal);

var cat1=new Cat("大毛","黄色");

alert(cat1.species); // 动物

非构造函数的继承? 比如，现在有一个对象，叫做"中国人"。

var Chinese={

nation:'中国'};

? 还有一个对象，叫做"医生"。var Doctor={

career:'医生'}

请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？

这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

object()方法? json格式的发明人Douglas Crockford，提出了一个

object()函数，可以做到这一点。

function object(o) {

function F() {}

F.prototype=o;

return new F();

}

? 这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。

? 使用的时候，第一步先在父对象的基础上，生成子对象：

? var Doctor=object(Chinese);

? 然后，再加上子对象本身的属性：

? Doctor.career='医生';

? 这时，子对象已经继承了父对象的属性了。

? alert(Doctor.nation); //中国

浅拷贝? 除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，

也能实现继承。? 下面这个函数，就是在做拷贝

function extendCopy(p) {

var c={};

for (var i in p) {

c[i]=p[i];

}

c.uber=p;

return c;

}

? 使用的时候，这样写：

var Doctor=extendCopy(Chinese);

Doctor.career='医生';

alert(Doctor.nation); // 中国

? 但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

? 请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。? Chinese.birthPlaces=['北京','上海','香港'];? 通过extendCopy()函数，Doctor继承了Chinese。

? var Doctor=extendCopy(Chinese);

? 然后，我们为Doctor的"出生地"添加一个城市：

? Doctor.birthPlaces.push('厦门');

? 发生了什么事？Chinese的"出生地"也被改掉了！

? alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

? alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

? 所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

深拷贝? 所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要

递归调用"浅拷贝"就行了。

function deepCopy(p, c) {

var c=c || {};

for (var i in p) {

if (typeof p[i]==='object') {

c[i]=(p[i].constructor===Array) ? [] : {};

deepCopy(p[i], c[i]);

} else {

c[i]=p[i];

}

}

return c;

}

? 使用的时候这样写：

? var Doctor=deepCopy(Chinese);

? 现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性：

? Chinese.birthPlaces=['北京','上海','香港'];

? Doctor.birthPlaces.push('厦门');

? 这时，父对象就不会受到影响了。

? alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

? alert(Chinese.birthPlaces); //北京, 上海, 香港

? 目前，jQuery库使用的就是这种继承方法。