码迷,mamicode.com
首页 > 编程语言 > 详细

结合《JavaScript高级程序设计》总结下JS面向对象之构造对象

时间:2015-05-12 18:59:26      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:面向对象   javascript   原型   prototype   构造对象   

引言:

在ECMAScript中,不存在独立的函数,所有函数都必须是某个对象的方法。而函数也是一个对象。所有对象的属性可在对象创建后动态定义早绑定(early binding)是指在实例化对象之前定义它的特性和方法,这样编译器或解释程序就能提前转换机器代码。ECMAScript不是强类型语言,所以不支持早绑定。
晚绑定(late binding)指的是编译器或解释程序在运行前,不知道对象的类型。
使用晚绑定,无需检查对象的类型,只需要检查对象是否支持特性和方法即可。ECMAScript中的所有变量都采用晚绑定方法,这样就允许执行大量的对象操作,而无任何惩罚。

构造对象的方式:

1、最普通构造对象方式:

var car=new Object;
car.color=”green”;
car.show=function (){alert(this.color)};
car.run();

2、工厂方式(工厂函数由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。)

function generateObj()
{
var obj=new Object;
obj.color=”green”;
obj.show=function (){alert(this.color)};
return obj; 
}
var obj1=generateObj();
obj1.show();
var obj2=generateObj();
var obj2.show();

所有代码都包含在generateObj ()函数中,并返回obj对象作为(obj)函数值。
调用此函数时,将创建新对象,并赋予它所有必要的属性,复制出一个前面说明的obj对象。
使用该方法,可以容易地创建obj对象的两个版本(obj1和obj2),它们的属性完全一样。但是每次调用,每次调用函数generateObj (),都要创建新函数show(),意味着每个对象都有自己的show()方法,事实上,每个对象都共享了同一个函数。

优化后的工厂模式:

function generateObj(color,fn)
{
var obj=new Object
obj.color=color;
obj.show=fn;
return obj; 
}
var show=function show(){alert(this.color)};

var obj1=generateObj("red",show);
obj1.show();

3、构造函数方式

var show= function(){alert(this.color);};
function GenerateObj(col){
this.color = col;
this.show =show;
}
var obj= new GenerateObj("red");
obj.show();

与工厂方式的区别在于在构造函数内部需创建对象,而是使用this关键字。

3、原型方式

function GenerateObj(){}
GenerateObj.prototype.color = "red";
GenerateObj.prototype.show = function(){alert(this.color);};
var obj = new GenerateObj();
obj.show();

该方式利用了对象的prototype属性,可把它看成创建新对象所依赖的原型。用空构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性但是这种原型方式有一种致命的缺点,当属性指向的是对象时,对象也会被共享

function GenerateObj(){}
GenerateObj.prototype.colors = new Array("red","black");
var obj1 = new GenerateObj();
var obj2 = new GenerateObj();
obj1.colors.push("yellow");
alert(obj1.colors) //显示"red,black,yellow"
alert(obj2.colors) //显示"red,black,yellow"

4、混合型(构造函数和原型方式结合)

function GenerateObj(col){
this.color = col;
}
GenerateObj.prototype.show = function(){alert(this.color);};
var obj = new GenerateObj("red");
obj.show();

即用构造函数定义对象的所有非函数属性,用原型方式定义,对象的函数属性(方法)。

5、动态原型(结合prototype推荐)

function Car(col){
this.color = col;
if (typeof Car._initialized == "undefined"){
Car.prototype.show = function(){alert(this.color);};
Car._initialized = true;
}
}
var car = new Car("red");

其实动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置,对属性和方法进行了视觉上的封装。该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。

也许是最优方案:

functon CreatePerson(name,sex,birthday) 
{ 
  this.name =name; 
  this.sex = sex; 
  this.birthday = birthday; 
} 
CreatePerson.prototype.sayHi = function () 
{ 
  alert("Hi ! I am "+this.name); 
} 

var person1 = new CreatePerson(‘zs‘,‘boy‘,‘2001-02-03‘); 
var person2 = new CreatePerson(‘ls‘,‘boy‘,‘2001-02-04‘); 
person1.sayHi(); //outputs "Hi ! I am zs" 
person2.sayHi(); //outputs "Hi ! I am ls"

一般情况下,一个对象或者类不只一个方法,需要多个方法配合使用,那么

CreatePerson.prototype={ 
  sayHi:function() 
  { 
    alert("Hi ! I am "+this.name); 
  }, 
  walk:function() 
  { 
    alert("walk,walk"); 
  }, 
  …… 
}

结合《JavaScript高级程序设计》总结下JS面向对象之构造对象

标签:面向对象   javascript   原型   prototype   构造对象   

原文地址:http://blog.csdn.net/crazymo_/article/details/45671383

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!