js 面向对象 定义对象

js面向对象看了很多，却没有完全真正的理解，总是停留在一定的阶段，这次再认真看一下。

面向对象包含两种：定义类或对象；继承机制；都是通过工厂模式，构造函数，原型链，混合方法这四个阶段，原理也一样，只是实现细节有点不同

 

定义类或对象教程：http://www.w3school.com.cn/js/pro_js_object_defining.asp

思路：工厂模式--构造函数--原型链--混合方式，注意每个阶段的具体写法和不足

工厂模式（四个阶段）：原始--工厂--传参--共享方法；方法名小写；不用new执行；

原始：

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

缺点：如果创建多个对象，就要写很多遍相同的代码

工厂：把通用的代码放在一个函数中；函数内，创建一个对象，return一个对象

function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar();

缺点：生成的对象，属性方法完全一样

传参：给属性传递不同的参数；生成的对象，有相同的属性名，不同的属性值；

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

缺点：生成的对象，有各自的方法，浪费内容

共享方法：在工厂函数外定义自己的方法，再通过属性指向

function showColor() {
  alert(this.color);
}

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

缺点：语义上看不像对象的方法　　

 

构造函数：工厂模式的四个阶段，可以通过构造函数共同解决；方法名首字母大写；没有创建对象，使用this；new执行；没有return；

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.showColor = function() {
    alert(this.color);
  };
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

共享方法的问题，跟工厂模式的一样。

 

原型链：用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John,Bill"

缺点：

1、构造函数没有参数，这个问题，可能原型链就是这样定义的吧。

2、如果属性（driver）指向对象，多个实例对指向同一个对象，出现问题。

目的：属性不能共享（如果需要共享的话，写在prototype上），方法需要共享；　　

　　

混合方式：

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//输出 "Mike,John,Bill"
alert(oCar2.drivers);	//输出 "Mike,John"

现在：属性在构造函数创建，方法在原型链上创建。