JavaScript的面向对象

  【前言】面向对象是我们非常熟悉的内容，封装、继承、多态再加上抽象就是面线糊该对象的最核心的内容。今天我们要说的就是在JavaScript中是怎么实现面向对象的呢。

 一、创建对象

  1、简单的创建对象

var box = newObject(); //创建一个Object对象
box.name = 'Lee'; //创建一个name属性并赋值
box.age = 100; //创建一个age属性并赋值
box.run= function () { //创建一个run()方法并返回值
returnthis.name+ this.age + '运行中...';
};
alert(box.run()); //输出属性和方法的值

   缺点：如果我们想要创建类似的对象就会产生大量的代码。

  2、工厂模式

function createObject(name, age) { //集中实例化的函数
var obj= new Object();
obj.name= name;
obj.age= age;
obj.run= function () {
returnthis.name + this.age + '运行中...';
};
returnobj;
}
var box1 = createObject('Lee', 100); //第一个实例
var box2 = createObject('Jack', 200); //第二个实例
alert(box1.run());
lert(box2.run()); //保持独立

   解决了重复实例化的问题，但是无法搞清楚到底是那个对象的实例。

  3、使用构造函数

function Box(name, age) { //构造函数模式
this.name= name;
this.age= age;
this.run= function () {
returnthis.name + this.age + '运行中...';
};
}
var box1 = new Box('Lee', 100); //new Box()即可
var box2= new Box('Jack', 200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的识别他从属于 Box

  使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下

   1.构造函数方法没有显示的创建对象(newObject())；

   2.直接将属性和方法赋值给this对象；

   3.没有renturn语句。

 二、原型

   原型的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

function Box() {} //声明一个构造函数
Box.prototype.name = 'Lee'; //在原型里添加属性
Box.prototype.age= 100;
Box.prototype.run = function () { //在原型里添加方法
returnthis.name + this.age + '运行中...';
};

 

   原型模式创建对象也有自己的缺点，它省略了构造函数传参初始化这一过程， 带来的缺点就是初始化的值都是一致的。而原型最大的缺点就是它最大的优点，那就是共享。

  组合构造函数+原型模式：

functionBox(name, age) { //不共享的使用构造函数
this.name= name;
this.age= age;
this.family = ['父亲', '母亲', '妹妹'];
};
Box.prototype = { //共享的使用原型模式
constructor:Box,
run:function() {
returnthis.name+ this.age + this.family;
}
};

 三、继承

  而ECMAScript只支持继承，不支持接口实现，而实现继承的方式依靠原型链完成。

  1、原型链继承

functionBox(){ //Box构造
this.name='Lee';
}
functionDesk(){ //Desk构造
this.age=100;
}
Desk.prototype=newBox(); //Desc继承了Box，通过原型， 形成链条
vardesk=newDesk();
alert(desk.age);
alert(desk.name); //得到被继承的属性
functionTable(){ //Table构造
this.level='AAAAA';
}
Table.prototype=newDesk(); //继续原型链继承
vartable=newTable();
alert(table.name); //继承了Box和Desk

  2、组合继承

functionBox(age) {
this.name= ['Lee', 'Jack', 'Hello']
this.age= age;
}
Box.prototype.run= function () {
returnthis.name + this.age;
};
functionDesk(age) {
Box.call(this, age); //对象冒充
}
Desk.prototype = new Box(); //原型链继承
var desk= new Desk(100);
alert(desk.run());

  3、原型式继承

function obj(o) { //传递一个字面量函数
function F() {} //创建一个构造函数
F.prototype = o; //把字面量函数赋值给构造函数的原型
return new F(); //最终返回出实例化的构造函数
}
var box = { //字面量对象
name : 'Lee',
arr : ['哥哥','妹妹','姐姐']
};
var box1 = obj(box); //传递
alert(box1.name);
box1.name = 'Jack';
alert(box1.name);
alert(box1.arr);
box1.arr.push('父母');
alert(box1.arr);
var box2 = obj(box); //传递
alert(box2.name);
alert(box2.arr); //引用类型共享了

  4、寄生式继承

functioncreate(o) { //封装创建过程
var f= obj(o);
f.run= function () {
returnthis.arr; //同样，会共享引用
};
returnf;
}

  5、寄生组合继承

functionobj(o) {
functionF() {}
F.prototype= o;
returnnewF();
}
functioncreate(box,desk){
varf=obj(box.prototype);
f.constructor=desk;
desk.prototype=f;
}
functionBox(name){
this.name=name;
this.arr=['哥哥','妹妹','父母']
}
Box.prototype.run=function(){
returnthis.name;
};
functionDesk(name,age){
Box.call(this,name);
this.age=age;
}
inPrototype(Box,Desk); //通过这里实现继承
vardesk=newDesk('Lee',100);
desk.arr.push('姐姐');
alert(desk.arr);
alert(desk.run()); //只共享了方法
vardesk2=newDesk('Jack',200);
alert(desk2.arr); //引用问题解决

  【总结】通过这篇总结对JavaScript中的面向对象有了一定的了解，面向对象是一种思想与语言无关，但是面向对象在不同的语言中的实现是不一样的。