《§2js面向对象编程》由会员分享，可在线阅读，更多相关《§2js面向对象编程（21页珍藏版）》请在金锄头文库上搜索。
1、,JavaScript面向对象编程,回顾,JavaScript的概念和作用 如何在XHTML中使用JavaScript JavaScript体系架构 JavaScript的变量 JavaScript的数据类型 JavaScript的函数,目标,JavaScript面向对象功能的基本原理 JavaScript对象编程基础 JavaScript自定义对象 JavaScript对象继承的实现,JavaScript的对象编程基础,Javascript是基于原型的面向对象语言，即每一个对象都有一个原形，对象从原形中继承属性和方法 JavaScript中只有对象，没有类的概念。 JavaScript通过函
2、数(function)来创建对象。 JavaScript的函数也是一种对象。 JavaScript的对象可以在运行时动态添加属性，属性可以是原始类型，引用类型，函数。,对象的创建 普通方式,使用new关键字和构造函数创建对象 /创建一些原生对象 var a = new String(); var b = new Date(); var c = new Array();,对象的创建 普通方式,/一个函数。 function Dog(name,age) this.name = name; this.age = age; this.show = function() alert(“I am “+th
3、is.name); /创建对象 var d1 = new Dog(“旺财“,2); var d2 = new Dog(“阿土“,3); /访问对象属性。 alert(d1.name + d1.age); alert(d2.name + d2.age); d1.show();,动态添加属性和方法,var d1 = new Dog(“旺财“,2); /动态添加属性。 d1.color = “white“; /动态添加方法 d1.sleep = function() alert(this.name + “Zzz.“); /访问新属性和方法 alert(d1.color); d1.sleep();,对
4、象的销毁和垃圾回收,和JAVA一样，javascript也提供对内存资源的释放和垃圾回收机制。 回收的对象同样是没有被变量指向的对象 Var x = new Object(); X=null;,对象运算符与语句,new 创建对象 delete 删除对象属性。 delete object.name with 指定属性的默认使用对象。 with(object) for.in 遍历对象的所有属性。 for(var x in dog1) alert(x+“ “+dog1x); ,自定义类和对象,工厂方式 构造函数方式 原型方式 构造函数原型 混合工厂 使用JSON,工厂方式,function Crea
5、tePerson(name) var p = new Object(); p.name = name; p.say = function() alert(“I am “+p.name); return p; var p1 = CreatePerson(“wang“); var p2 = CreatePerson(“li“); p1.say(); p2.say(); alert(p1.say=p2.say); /false 问题：每个对象都有自己的方法，浪费资源。,构造函数方式,function Person(name) this.name = name; this.say = function
6、() alert(“I am “+this.name); var p1 = new Person(“wang“); var p2 = new Person(“li“); p1.say(); p2.say(); alert(p1.say=p2.say); /false 问题： 创建对象时比工厂方法更易于理解。 和工厂方法一样，每个对象都有自己的方法，浪费资源。,原型方式,function Person() Person.prototype.name = “; Person.prototype.say = function() alert(“I am “+this.name); var p1 =
7、new Person(); var p2 = new Person(); alert(p1.say = p2.say);/true 问题：无法在构造方法中传递参数，所有对象共享属性。 优点：对象共方法，节约资源。,构造原型方式,function Person(name) this.name = name; Person.prototype.say = function() alert(“I am “+this.name); var p1 = new Person(“wang“); var p2 = new Person(“li“); p1.say(); p2.say(); alert(p1.s
8、ay=p2.say); /true 优点：解决了前面提到的问题。 问题：封装不够完美。,更好的构造原型方式,function Person(name) this.name = name; if(Person.prototype.say = undefined) Person.prototype.say = function() alert(“I am “+this.name); var p1 = new Person(“wang“); var p2 = new Person(“li“); p1.say(); p2.say(); alert(p1.say=p2.say); /true 结论：一种
9、完美的解决方案。,对象的创建 JSON,JSON JavaScript Object Notation，即JavaScript对象表示法。 提供了XML之外的另一种对象表示方法。比XML更简洁。正成为对象传输的新的方式。 以属性名/属性值的方式表示对象。,var person = ; var girl = name:miss wang, age:20, show = function() alert(“my name is “ + this.name); ,继承的实现方式,对象冒充 原型链 混合方式,对象冒充实现继承,function People(name) this.name = name
10、; this.say = function() alert(“I am “+this.name); ,function WhitePeople(name) this.inherit = People; this.inherit(name); delete this.inherit; this.color = function() alert(“I am white people.“); ,var p = new WhitePeople(“wang“); p.say(); p.color(); alert(p instanceof People); /false 结论：支持多重继承，但后面的类可
11、以覆盖前面类的属性和方法。继承后的对象类型和父类对象不匹配,利用call()和apply()冒充,function People(name) this.name = name; this.say = function() alert(“I am “+this.name); ,function WhitePeople(name) /this.inherit = People; /this.inherit(name); /delete this.inherit; People.call(this,name); People.apply(this,name); this.color = functi
12、on() alert(“I am white people.“); ,var p = new WhitePeople(“wang“); p.say(); p.color(); alert(p instanceof People); /false 结论：支持多重继承，但后面的类可以覆盖前面类的属性和方法。继承后的对象类型和父类对象不匹配,原型链继承,/父类 function People(name) this.name = name; People.prototype.say = function() alert(“I am “+this.name); ,/子类 function ChinaPe
13、ople(name,area) People.call(this,name); this.area = area; ChinaPeople.prototype = new People(); ChinaPeople.prototype.from = function() alert(“Iam from “+this.area); var p = new ChinaPeople(“wang“,“si chuan“); p.say(); p.from(); alert(p instanceof People); /true,结论：不支持多重继承，继承后的对象类型和父类对象匹配,总结,JavaScript面向对象功能的基本原理 JavaScript对象编程基础 JavaScript自定义对象 JavaScript对象继承的实现,
