加载中...

构造器模式

构造器模式

在面向对象编程中，构造器是一个当新建对象的内存被分配后，用来初始化该对象的一个特殊函数。在JavaScript中几乎所有的东西都是对象，我们经常会对对象的构造器十分感兴趣。

对象构造器是被用来创建特殊类型的对象的，首先它要准备使用的对象，其次在对象初次被创建时，通过接收参数，构造器要用来对成员的属性和方法进行赋值。

对象创建

下面是我们创建对象的三种基本方式:

下面的每一种都会创建一个新的对象:

  1. var newObject = {};
  3. // or
  4. var newObject = Object.create( null );
  6. // or
  7. var newObject = new Object();

最后一个例子中"Object"构造器创建了一个针对特殊值的对象包装，只不过这里没有传值给它，所以它将会返回一个空对象。

有四种方式可以将一个键值对赋给一个对象:

  1. // ECMAScript 3 兼容形式
  3. // 1\. “点号”法
  5. // 设置属性
  6. newObject.someKey = "Hello World";
  8. // 获取属性
  9. var key = newObject.someKey;
  11. // 2\. “方括号”法
  13. // 设置属性
  14. newObject["someKey"] = "Hello World";
  16. // 获取属性
  17. var key = newObject["someKey"];
  19. // ECMAScript 5 仅兼容性形式
  20. // For more information see: http://kangax.github.com/es5-compat-table/
  22. // 3\. Object.defineProperty方式
  24. // 设置属性
  25. Object.defineProperty( newObject, "someKey", {
  26.     value: "for more control of the property's behavior",
  27.     writable: true,
  28.     enumerable: true,
  29.     configurable: true
  30. });
  32. // 如果上面的方式你感到难以阅读，可以简短的写成下面这样：
  34. var defineProp = function ( obj, key, value ){
  35.   config.value = value;
  36.   Object.defineProperty( obj, key, config );
  37. };
  39. // 为了使用它，我们要创建一个“person”对象
  40. var person = Object.create( null );
  42. // 用属性构造对象
  43. defineProp( person, "car",  "Delorean" );
  44. defineProp( person, "dateOfBirth", "1981" );
  45. defineProp( person, "hasBeard", false );
  47. // 4\. Object.defineProperties方式
  49. // 设置属性
  50. Object.defineProperties( newObject, {
  52.   "someKey": { 
  53.     value: "Hello World", 
  54.     writable: true 
  55.   },
  57.   "anotherKey": { 
  58.     value: "Foo bar", 
  59.     writable: false 
  60.   } 
  62. });
  64. // 3和4中的读取属行可用1和2中的任意一种

在这本书的后面一点，这些方法会被用于继承，如下：

  1. // 使用:
  3. // 创建一个继承与Person的赛车司机
  4. var driver = Object.create( person );
  6. // 设置司机的属性
  7. defineProp(driver, "topSpeed", "100mph");
  9. // 获取继承的属性 (1981)
  10. console.log( driver.dateOfBirth );
  12. // 获取我们设置的属性 (100mph)
  13. console.log( driver.topSpeed );

基础构造器

正如我们先前所看到的，Javascript不支持类的概念，但它有一种与对象一起工作的构造器函数。使用new关键字来调用该函数，我们可以告诉Javascript把这个函数当做一个构造器来用,它可以用自己所定义的成员来初始化一个对象。

在这个构造器内部，关键字this引用到刚被创建的对象。回到对象创建，一个基本的构造函数看起来像这样:

  1. function Car( model, year, miles ) {
  3.   this.model = model;
  4.   this.year = year;
  5.   this.miles = miles;
  7.   this.toString = function () {
  8.     return this.model + " has done " + this.miles + " miles";
  9.   };
  10. }
  12. // 使用:
  14. // 我们可以示例化一个Car
  15. var civic = new Car( "Honda Civic", 2009, 20000 );
  16. var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
  18. // 打开浏览器控制台查看这些对象toString()方法的输出值
  19. // output of the toString() method being called on
  20. // these objects
  21. console.log( civic.toString() );
  22. console.log( mondeo.toString() );

上面这是个简单版本的构造器模式，但它还是有些问题。一个是难以继承，另一个是每个Car构造函数创建的对象中，toString()之类的函数都被重新定义。这不是非常好，理想的情况是所有Car类型的对象都应该引用同一个函数。 这要谢谢 ECMAScript3和ECMAScript5-兼容版，对于构造对象他们提供了另外一些选择，解决限制小菜一碟。

使用“原型”的构造器

在Javascript中函数有一个prototype的属性。当我们调用Javascript的构造器创建一个对象时，构造函数prototype上的属性对于所创建的对象来说都看见。照这样，就可以创建多个访问相同prototype的Car对象了。下面，我们来扩展一下原来的例子：

  1. function Car( model, year, miles ) {
  3.   this.model = model;
  4.   this.year = year;
  5.   this.miles = miles;
  7. }
  9. // 注意这里我们使用Note here that we are using Object.prototype.newMethod 而不是
  10. // Object.prototype ，以避免我们重新定义原型对象
  11. Car.prototype.toString = function () {
  12.   return this.model + " has done " + this.miles + " miles";
  13. };
  15. // 使用:
  17. var civic = new Car( "Honda Civic", 2009, 20000 );
  18. var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
  20. console.log( civic.toString() );
  21. console.log( mondeo.toString() );

通过上面代码，单个toString()实例被所有的Car对象所共享了。

还没有评论.