1.原始方式

var oCar = new  Object;

oCar.color = "blue";

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

缺点:需要创建多个oCar的实例;

2.工厂方式

解释:使用工厂函数(factory function)

function carFactory(){

  var oCar = new Object;

  oCar.color = "blue";

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

  return oCar;

}

var oCar1 = carFactory();

var oCar2 = carFactory();

此时,虽然解决了原始方式中,创建多个实例的缺点,但是两个对象oCar1与oCar2的属性一模一样;

优化1:

function carFactoty(col){

  var oCar = new Object;

  oCar.color  = col;

  oCar.showColor = function(){alert(this.color)}

}

var oCar1 = carFactoty("blue");

var oCar2 = carFactoty("red");

oCar1.showColor();

oCar2.showColor();

此时,通过向工厂函数传递参数的方法,改变了两个对象默认属性值一样的问题。

缺点:每次调用carFactory方法,都要创建一次showColor方法,意味着每个对象有自己的showColor版本,其实,两个对象只需共享同一个函数就可以了。

优化2:

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

function carFactory(col){

  var oCar = new Object;

  oCar.color = col;

  oCar.showColor = showColor;

}

var oCar1 = carFactory("blue");

var oCar2 = carFactory("red");

oCar1.showColor();

oCar2.showColor();

此时,虽然解决了优化1中的showColor()在不同对象中不同版本的问题,然而,新定义的showColor()方法,却不像是对象的方法。

3.构造函数方式

解释:在构造函数内没有创建对象,而是使用this关键字,在使用new运算符执行构造函数时,会在执行代码之前创建一个对象,使用this访问该对象,通过this给对象赋予属性和方法。默认返回this。

function consFactory(col){

  this.color = col;

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

}

var oCar1 = new consFactory("red");

var oCar2 = new consFactory("blue");

此时,就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本

4.原型方式

解释:通过给proFunction的prototype属性添加属性,从而给proFunction添加属性。oCar1存放的实际上是指向showColor的指针,这样所有的属性,看起来都属于同一对象了。

注意:在构造函数的原型中,是不能接受构造函数的参数的。也就是,不能通过参数来初始化属性的值。

function proFunction(){};

proFunction.prototype.color = “blue”;

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

var oCar1 = new proFunction();

var oCar2  = new proFunction();

此时,在创建对象后才能真正改变属性的默认值,最痛点是,当属性指向的是对象时,对象不能被多个实例共享。

如:

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"
解释:属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
5.构造函数/原型混合方式

ES5:深入解析如何js定义类或对象。的更多相关文章

  1. js定义类或对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS定义类及对象

    1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Obje ...

  3. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  4. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  5. JS创建类和对象(好多方法哟!)

    http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...

  6. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

  7. JavaScript定义类与对象的一些方法

    最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...

  8. JS创建类和对象,看完了,头就不大了

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  9. 优雅地创建未定义类PHP对象

    在PHP中,如果没有事先准备好类,需要创建一个未定义类的对象,我们可以采用下面三种方式: new stdClass() new class{} (object)[] 首先是stdClass,这个类是一 ...

随机推荐

  1. 宏、预编译(day12)

    指针数组里的每个存储区是一个指针类型 的存储区 字符指针数组里包含多个字符类型指针,其中 每个指针可以表示一个字符串 字符指针数组可以用来表示多个相关字符串 主函数的第二个参数是一个字符指针数组, 其 ...

  2. Spring MVC灵活控制返回json的值(自定义过滤字段)

    在使用spring MVC开发过程中,为了提高项目执行效率,所以在一些外键字段的实体中会注解”@ManyToOne(fetch = FetchType.LAZY)”以实现延迟加载的效果. 但是,在使用 ...

  3. FreeMarker基本使用

    FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 l         FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序 ...

  4. (13)处理静态资源(默认资源映射)【从零开始学Spring Boot】

    Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通 ...

  5. elasticsearch 权威指南入门阅读笔记(一)

    相关文档 esapi:https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html     https://esdoc.bbossgroups.co ...

  6. FZU - 1601 - Alibaba's treasures

    先上题目: Problem 1601 Alibaba's treasures Accept: 332    Submit: 636Time Limit: 1000 mSec    Memory Lim ...

  7. 0227浅谈MySQL之 Handler_read_*参数

    转自博客http://www.path8.net/tn/archives/5613 1.监控语法: 在MySQL里,使用SHOW STATUS查询服务器状态,语法一般来说如下: SHOW [GLOBA ...

  8. hdu4861 Couple doubi---2014 Multi-University Training Contest 1

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4861 Couple doubi Time Limit: 2000/1000 MS (Java/Othe ...

  9. hdu1209(Clock)

    pid=1209">点击打开hdu1209 Problem Description There is an analog clock with two hands: an hour h ...

  10. 创建MAVEN项目报错

    创建MAVEN项目pom.xml报错 Failure to transfer org.apache.maven:maven-archiver:jar:2.4.2 from http://repo.ma ...