js面向对象

目录[-]

1.js相关概念

2.创建实例的方式

1.最简单方式

2.工厂方式

3.构造函数方式

4.原型方式

5.混合的构造函数/原型方式

6.动态原型方法

总结：采用哪种方式

1.js相关概念

类：开发者在开发时，自己定义的概念，在js代码中无实际对应. 
构造函数：用于构造实例，js中定义的概念，在js中有实际对应代码。人为地可以将函数分为两类：一类用于构造实例，被称为构造函数；一类用于执行某一特定功能，被成为功能函数。 
原型：每一个Function的实例定义都会有一个prototype属性；每一个Object的实例都会有一个_proto_属性。 
实例：又被成为对象，是由构造函数构造出来。

2.创建实例的方式

1.最简单方式

01	var car = {

02	color : "blue",

03	doors : 4,

04	showDoors : function() {

05	alert(this.doors);

06

}

07

};

08

09	car.mpg = 25;

10	car.showColor = function() {

11	alert(this.color);

12

};

优点：简单直观，跟json数据结构很像。 
缺点：当需要创建大量实例时，这种方式非常低效。

2.工厂方式

01	function createCar() {

02	var car = {

03	color : "blue",

04	doors : 4,

05	showDoors : function() {

06	alert(this.doors);

07

}

08

};

09

10	car.mpg = 25;

11	car.showColor = function() {

12	alert(this.color);

13

};

14

15	return car;

16

}

17

18	var car1 = createCar();

19	var car2 = createCar();

优点：基本解决了大量创建相同实例的问题。 
缺点：不够正规；没有实现函数共享；

3.构造函数方式

所有上述问题都引发了构造函数的出现。构造函数看起来很像工厂函数，根据惯例，构造函数名字的首字母大写，以使它与首字母通常是小写的函数名分开。

01	function Car() {

02	this.color = "blue";

03	this.doors = 4;

04	this.mpg = 25;

05

06	this.showColor = function() {

07	alert(this.doors);

08

};

09	this.showDoors = function() {

10	alert(this.color);

11

}

12

}

13

14	var car1 = new Car();

15	var car2 = new Car();

PS：与工厂函数的区别：1. 函数名大写；2. 函数内部使用this关键字；3. 不必明确使用 return 运算符；4. 创建实例时使用new关键字。

优点：基本解决了大量创建相同实例的问题；够正规； 
缺点：没有实现函数共享；

4.原型方式

01	function Car() {

02

}

03

04	Car.prototype = {

05	color : "blue",

06	doors : 4,

07

mpg : 25,

08

09	showDoors : function() {

10	alert(this.doors);

11

},

12	showColor : function() {

13	alert(this.color);

14

}

15

};

16

17	var car1 = new Car();

18	var car2 = new Car();

优点：原型的所有属性都被立即赋予要创建的实例，实现了函数共享；够正规； 
缺点：原型的属性被多个实例共享，不应该。

5.混合的构造函数/原型方式

联合使用构造函数和原型方式，就可像用其他程序设计语言一样创建对象。

构造函数定义实例的所有非函数属性，用原型方式定义实例的函数（方法）。结果是，所有函数都只创建一次，而每个对象都具有自己的对象属性实例。

01	function Car() {

02	this.color = "blue";

03	this.doors = 4;

04	this.mpg = 25;

05

}

06

07	Car.prototype = {

08	showDoors : function() {

09	alert(this.doors);

10

},

11	showColor : function() {

12	alert(this.color);

13

}

14

};

15

16	var car1 = new Car();

17	var car2 = new Car();

优点：实现了函数共享,属性不共享；够正规；js面向对象采用的主要方式，它具有其他方式的特性，却没有他们的副作用. 
缺点：视觉上，与其他面向对象语言定义类与对象的方法不同。

6.动态原型方法

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

01	function Car() {

02	this.color = "blue";

03	this.doors = 4;

04	this.mpg = 25;

05

06	if ( typeof Car._initialized == "undefined") {

07	Car.prototype = {

08	showDoors : function() {

09	alert(this.doors);

10

},

11	showColor : function() {

12	alert(this.color);

13

}

14

};

15

16	Car._initialized = true;

17

}

18

}

19

20	var car1 = new Car();

21	var car2 = new Car();

优点：实现了函数共享,属性不共享；够正规；视觉上，基本上与其他面向对象语言定义类与对象的方法相同。 
缺点：无

总结：采用哪种方式

如前所述，目前使用最广泛的是混合的构造函数/原型方式。此外，动态原始方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。