第二、JavaScript面向对象编程

 

第二章 JavaScript面向对象编程

 

一、语句：

（一）new

（二）delete 从对象中删除属性、行为或从数组中删除元素。删除行为时是删除函数指针，   如：delete car.drive,而不是delete car.drive();

（三）with 如：将对象的属性和方法包含起来，代码块中就不需要引用这个对象

  with(document.myForm){

if(name.value == "") alert("");

if(pwd.value == "") alert("");

  }

（四）for/in 遍历对象的所有属性，也可以遍历数组的元素。

for(i in document){}

var arr=["a","b","c"];for(i in arr){alert(arr[i])};

 

二、自定义对象:

1.工厂模式

function createCar(color,brand){
var car = new Object();
car.color=color;
car.brand=brand;
car.run = function(){alert("is run");};

return car;
}

 

 

缺陷：1、不正规的构造一个对象（new）

2、每次创建一个对象，其行为也会被创建，占用资源；

 

2.构造函数方式

function Car(color,brand){
this.color=color;
this.brand=brand;
this.run=function(){alert("is run");};
}

 

 

缺陷：和工厂模式相同，每次创建一个对象，其行为也会被创建，占用资源；

 

3.原型方式

function Car(){
}
Car.prototype.color="red";
Car.prototype.run=function(){
alert("is run");
}
var car = new Car();
//car.color="black";//子类重写这个属性;
alert(car.color);
Car.prototype.color="blue";//相当于父类修改了属性，在子类没有覆盖这个属性的前提下，所有子类对象属性都被修改
alert(car.color);
car.run();

 

 

缺陷：属性值不能在初始化时定义；

 

4.混合构造函数和原型方式

function Car(color){
this.color=color;
}
Car.prototype.run=function(){
alert("is run");
}
var c = new Car("red");
alert(c.color);
c.run();

 

 

 

5.动态原型

function Car(color){
this.color=color;
if(!Car.prototype._inited){
Car.prototype.run = function(){alert("is run")};
alert("inited");
Car.prototype._inited = true;
}
}
var c = new Car("blue");
alert(c.color);
c.run();
var d = new Car("white");
alert(d.color);
d.run();

 

 

 

6.混合工厂模式

function Car(color){
var car = new Object();
car.color=color;
car.run=function(){alert("is run")};
return car;
}
var e = new Car();
e.run();

 

 

 

7.JSON格式创建对象

var f = {color:"red",brand:"奥迪",run:function(){alert("is run")}};
alert(f.brand);
f.run();

 

 

 

三、对象继承实现

1.对象冒充

function Car(color,brand){
this.color=color;
this.brand=brand;
this.run=function(){alert("is run")};
}
function FlyCar(color,brand){
this._inherit=Car;
this._inherit(color,brand);
delete this._inherit;
this.fly=function(){alert("is fly")};
}
var a = new FlyCar("red","奥迪");
a.run();
a.fly();

 

 

 

2.CALL与apply类似

function FlyCar(color,brand){
Car.call(this,color,brand);
this.fly=function(){alert("is fly")};
}
var a = new FlyCar("red","奥迪");
alert(a.color);
a.run();
a.fly();

 

 

 

3.原型链 只能单一继承 缺陷是 构造函数不能初始化属性

function FlyCar(color,brand){
this.color = color;
this.brand = brand;
this.fly=function(){alert("is fly")};
}
FlyCar.prototype = new Car();
var b = new FlyCar();
b.run();
b.fly();

 

 

 

四、实例：

根据上图（UML）实现对象继承。

//继承 冒充
function Polygon(sides){
this.sides = sides;
this.getArea = function(){return 0};
}
//triangle
function Triangle(base,height){
this._inherit=Polygon;
this._inherit(3);
delete this._inherit;
this.base = base;
this.height = height;
if(!Triangle._inited){
this.getArea = function(){return this.base*this.height*0.5}; 
Triangle._inited = true;
}
}
var t = new Triangle(5,10);
alert(t.getArea());
alert(t.sides);
//rectangle
function Rectangle(length,width){
this._inherit=Polygon;
this._inherit(4);
delete this._inherit;
this.length = length;
this.width = width;
if(!Rectangle._inited){
this.getArea = function(){return this.length*this.width};
Rectangle._inited = true;
}
}
var r = new Rectangle(5,10);
alert(r.getArea());
alert(r.sides);

//继承 原型链
function Polygon(sides){
this.sides = sides;
this.getArea = function(){return 0};
}
//triangle
/*function Triangle(base,height){
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon(3);
Triangle.prototype.getArea = function(){return this.base*this.height*0.5};
var tt = new Triangle(5,10);
alert(tt.sides);
alert(tt.getArea());
//rectangle
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype = new Polygon(4);
Rectangle.prototype.getArea = function(){return this.length*this.width};
var rr = new Rectangle(5,10);
alert(rr.sides);
alert(rr.getArea());

//混合方式继承
function Polygon(sides){
this.sides = sides;
}
Polygon.prototype.getArea = function(){return 0;};
function Triangle(sides,base,height){
Polygon.call(this,sides);
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){return this.base*this.height*0.5;};
var tt = new Triangle(3,5,10);
alert(tt.sides);
alert(tt.getArea());
function Rectangle(sides,length,width){
Polygon.call(this,sides);
this.length = length;
this.width = width;
}
Rectangle.prototype = new Polygon();
Rectangle.prototype.getArea = function(){return this.length*this.width;};
var rr = new Rectangle(4,5,10);
alert(rr.sides);
alert(rr.getArea());