面向对象的程序设计之创建对象(工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式)

  面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建多个具有相同属性和方法的对象,ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。

  ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或函数“。严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,我可以把ECMAScript的对象想象成散列表:无非就是一组键值对,这其中值可以是数据或函数。

  每个对象都是基于一个引用类型创建的,这个引用类型可用是原生类型,也可以是开发人员定义的类型。

  下面说下创建对象。虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。

  一、工厂模式

  工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程,考虑到再ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子所示。

  function createPerson (name, age, job) {

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.sayName = funciton () {

      alert(this.name);

    };

    return o;

  }

  var person1 = createPerson('Nicholas', 29, 'Engineer');

  var person2 = createPerson('Greg', 27, 'Doctor');

  函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。可以无数次地调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。随着JavaScript的发展,又一个新模式出现了。

  二、构造函数模式

  ECMAScript中的构造函数可用来创建特定类型的对象,像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例如,可以使用构造函数模式将前面的例子重写如下。

  function Person (name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.sayName = function () {

      alert(this.name);

    };

  }

  var person1 = new Person('Nicholas', 29, 'Engineer');

  var person2 = new Person('Greg', 29, 'Doctor');

  在这个例子中,Person()函数取代了createPerson()函数。我们注意到,Person()中的代码除了与createPerson()中相同的部分外,还存在以下不同之处:

  1、没有显式地创建对象;

  2、直接将属性和方法赋给了this对象;

  3、没有return语句。

  此外,还应该注意到函数名Person使用的是大写字母P。按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。这个做法借鉴自其它OO语言,主要是为了区别与ECMAScript中的其它函数;因为构造函数本身也是函数,只不过可以用来创建对象而已。

  要创建Person的新实例,必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤:

  1、创建一个新对象;

  2、将构造函数的作用域付给新对象(因此this就指向了这个新对象);

  3、执行构造函数中的代码(为这个新对象添加属性);

  4、返回新对象。

  在前面例子的最后,person1和person2分别保存着Person的一个不同的实例。这两个对象都有一个constructor(构造函数)属性,该属性指向Person,如下所示。

  alert(person1.constructor == Person);    // true

  alert(person2.constructor == Person);    // true

  对象的constructor属性最初是用来标识对象类型的但是,提到检测对象类型,还是instanceof操作符要更可靠一些。我们在这个例子中创建的所有对象既是Object的实例,同时也是Person的实例,这一点通过instanceof操作符可以得到验证。

  alert(person1 instanceof Object);    //true

  alert(person1 instanceof Person);    //true

  alert(person2 instanceof Object);    //true

  alert(person2 instanceof Person);    //true

  创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。在这个例子中,person1和person2之所以同时是Object的实例,是因为所有对象均继承自Object(详细内容稍后讨论)。

  1、将构造函数当作函数

  构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数,如果不通过new操作符来调用,那它跟普通函数也不会有什么两样。例如,前面例子中定义的Person()函数可以通过下列任何一种方式来调用。

  // 当做构造函数调用

  var person = new Person('Nicholas', 29, 'Engineer');

  person.sayName();    // 'Nicholas'

  // 作为普通函数调用

  Person('Greg', 27, 'Doctor');    // 添加到window

  window.sayName();    // 'Greg'

  // 在另一个对象的作用域中调用

  var o = new Object();

  Person.call(o, 'Kristen', 25, 'Teacher');

  o.sayName();    // 'Kristen'

  在这个例子中的前两行代码展示了构造函数的经典用法,即使用new操作符来创建一个新对象。接下来的两行代码展示了不使用new操作符调用Person()会出现什么结果:属性和方法都被添加给window对象了。当在全局作用域中调用一个函数时,this对象总是指向Global对象(在浏览器中就是window对象)。因此,在调用完函数之后,可以通过window对象来调用sayName()方法,并且还返回了‘Greg’。最后,也可以使用call()(或者apply())在某个特殊对象的作用域中调用Person()函数。这里是在对象o的作用域中调用的,因此调用后o就拥有了Person所有属性和sayName()方法。

  2、构造函数的问题

  构造函数模式虽然好用,但也并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。在前面的例子中,person1和person2都用一个名为sayName()的方法,但那两个方法不是同一个Function的实例。不要忘了----ECMAScript中的函数是对象,因此每定义一个函数,也就是实例化了一个对象。从逻辑角度讲,此时的构造函数也可以这样定义。

  function Person (name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.agyName = new Function("alert(this.name)");    // 与声明函数在逻辑上是等价的

  }

  从这个角度上来看构造函数,更容易明白每个Person实例都包含一个不同的Function实例(以显示name属性)的本质。说明白些,以这种方式创建函数,会导致不同的作用域链和标识符解析,但创建Function新实例的机制仍然是相同的。因此,不同实例上的同名函数是不相等的,一下代码可以证明这一点。

  alert(person1.sayName == person2.sayName);    // false

  显然,创建两个完成同样任务的Function实例的确没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此,大可像下面这样,通过把函数定义转移到构造函数外部来解决这个问题。

  function Person (name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.sayName = sayName;

  }

  function sayName () {

    alert(this.name);

  }

  var person1 = new Person('Nicholas', 29, 'Engineer');

  var person2 = new Person('Greg', 27, 'Doctor');

  在这个例子中,把sayName()函数的定义转移到了构造函数外部。而在构造函数内部,我们将sayName属性设置成等于全局的sayName函数。这样一来,由于sayName包含的是一个指向函数的指针,因此person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这样做确实解决了两个函数做同一件事的问题,可是新的问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。而更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在,这些问题可以通过使用原型模式来解决。

  三、原型模式

  我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示。

  function Person () {}

  Person.prototype.name = 'Nicholas';

  Person.prototype.age= '29';

  Person.prototype.job = 'Engineer';

  Person.prototype.sayName = function () {

    alert(this.name);

  };

  var person1 = new Person();

  person1.sayName();    // 'Nicholas'

  var person2 = new Person();

  person2.sayName();    // 'Nicholas'

  alert(person1.sayName == person2.sayName);    // true

  在此,我们将sayName()方法和所有属性直接添加到了Person的prototype属性中,构造函数变成了空函数。即使如此,也仍然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。换句话说,person1和person2访问的都是同一组属性和同一个sayName()函数。要理解原型模式的工作原理,必须先理解ECMAScript中原型对象的性质。

  1、理解原型对象

  无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。就拿前面的例子来说,Person.prototype.constructor指向Person。而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。

  每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。

  虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性。来看下面的例子。

  function Person () {}

  Person.prototype.name = 'Nicholas';

  Person.prototype.age= '29';

  Person.prototype.job = 'Engineer';

  Person.prototype.sayName = function () {

    alert(this.name);

  };

  var person1 = new Person();

  var person2 = new Person();

  person1.name = 'Greg';

  alert(person1.name);    // 'Greg'------来自实例

  alert(person2.name);    // 'Nicholas'------来自原型

  在这个例子中,person1的name被一个新值给屏蔽了。但无论访问person1.name还是访问person2.name都能够正常地返回值,即分别是‘Greg’(来自对象实例)和'Nicholas'(来自原型)。当在alert()中访问person1.name时,需要读取它的值,因此就会在这个实例上搜索一个名为name的属性。这个属性确实存在,于是就返回它的值而不必再搜索原型了。当以同样的方式访问person2.name时,并没有在实例上发现该属性,因此就会继续搜索原型,结果在那里找到了name属性。

  当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;换句话说,添加这个属性只会组织我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用delete操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性,如下所示。

  function Person () {}

  Person.prototype.name = 'Nicholas';

  Person.prototype.age= '29';

  Person.prototype.job = 'Engineer';

  Person.prototype.sayName = function () {

    alert(this.name);

  };

  var person1 = new Person();

  var person2 = new Person();

  person1.name = 'Greg';

  alert(person1.name);    // 'Greg'-----来自实例

  alert(person2.name);    // 'Nicholas'-----来自原型

  delete person1.name;

  alert(person1.name);    // 'Nicholas'-----来自原型

  在这个修改后的例子中,我们使用delete操作符删除了person1.name,之前它保存的"Greg"值屏蔽了同名的原型属性。把它删除后,就恢复了对原型中name属性的连接。因此,接下来再调用person1.name时,返回的就是原型中name属性的值了。

  使用hasOwnProperty()方法可以检测一个属性是存在于实例中还是原型中。这个方法只在给定属性存在于对象实例中是,才会返回true。来看下面这个例子。

  function Person () {}

  Person.prototype.name = 'Nicholas';

  Person.prototype.age= '29';

  Person.prototype.job = 'Engineer';

  Person.prototype.sayName = function () {

    alert(this.name);

  };

  var person1 = new Person();

  var person2 = new Person();

  alert(person1.hasOwnProperty('name'));    // false

  person1.name = 'Greg';

  alert(person1.name);    // 'Greg'-----来自实例

  alert(person1.hasOwnProperty('name'));    // true

  delete person1.name;

  alert(person1.name);    // 'Nicholas'-----来自原型

  alert(person1.hasOwnProperty('name'));    // false

  通过使用hasOwnProperty()方法,什么时候访问的是实例属性,什么时候访问的是原型属性就一清二楚了。调用person1.hasOwnProperty('name')时,只有当person1重写name属性后才会返回true,因为只有这个时候name才是一个实例属性,而非原型属性。

  2、原型与in操作符

  有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。看一看下面的例子。

  function Person () {}

  Person.prototype.name = 'Nicholas';

  Person.prototype.age= '29';

  Person.prototype.job = 'Engineer';

  Person.prototype.sayName = function () {

    alert(this.name);

  };

  var person1 = new Person();

  var person2 = new Person();

  alert(person1.hasOwnProperty('name'));    // false

  alert('name' in person1);    // true

  person1.name = 'Greg';

  alert(person1.name);    // 'Greg'-----来自实例

  alert(person1.hasOwnProperty('name'));    // true

  alert('name' in person1);    // true

  在以上代码执行的整个过程中,name属性要么是直接在对象上访问到的,要么是通过原型访问到的。因此,调用"name" in person1始终都返回true,无论该属性存在于实例中还是原型中。同时使用hasOwnProperty()方法和in操作符,就可以确定该属性到底存在于对象中还是原型中。

  3、更简单的原型语法

  前面的例子中没添加一个属性和方法就要写一遍Person.prototype。为减少不必要的输入,也为了从视觉上更好地封装原型的功能,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象,如下所示。

  function Person () {}

  Person.prototype = {

    name: 'Nicholas',

    age: 29,

    job: 'Engineer',

    sayName: function () {

      alert(this.name);

    }

  };

  在上面的代码中,我们将Person.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor属性不再指向Person了。前面提到过,每创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性。而我们在这里使用的语法,本质上完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。此时,尽管instanceof操作符还能返回正确的结果,但通过constructor已经无法确定对象的类型了,如下所示。

  var friend = new Person();

  alert(friend instanceof Object);    // true

  alert(friend instanceof Person);    // true

  alert(friend.constructor == Person);    // false

  alert(friend.constructor == Object);    // true

   在此,用instanceof操作符测试Object和Person仍然返回true,但constructor属性则等于Object而不等于Person了。如果constructor的值真的很重要,可以像下面这样特意将它设置回适当的值。

  function Person () {}

  Person.prototype = {

    constructor: Person,

    name: 'Nicholas',

    age: 29,

    job: 'Engineer',

    sayName: function () {

      alert(this.name);

    }

  };

  以上代码特意包含了一个constructor属性,并将它的值设置为Person,从而确保了通过该属性能够访问到适当的值。

  4、原型的动态链

  由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反应出来----即使是先创建时候后修改原型也照样如此。请看下面的例子。

  var friend = new Person();

  Person.prototype.sayHi = function () {

    alert("hi");

  };

  friend.sayHi();    // "hi"(没有问题!)

  以上代码先创建了Person的一个实例,并将其保存在friend中。然后,下一条语句在Person.prototype中添加一个方法sayHi()。即使friend实例是在添加新方法之前创建的,但它仍然可以访问这个新方法。其原因可以归结为实例与原型之间的松散连接关系。当我们调用friend.sayHi()时,首先会在实例中所有名为sayHi的属性,在没有找到的情况下,会继续搜索原型。因为实例与原型之间的连接只不过是一个指针,而非一个副本,因此就可以在原型中找到新的sayHi属性并返回保存在那里的函数。

  尽管可以随时为原型添加属性和方法,并且修改能够立即在所有对象实例中反映出来,但如果是重写整个原型对象,那么情况就不一样了。 我们知道,调用构造函数时会给实例添加一个指向最初原型的[[Prototype]]指针,而把原型修改为另一个对象就等于切断了构造函数与最初原型之间的联系。请记住:实例中的指针仅指向原型,而不指向构造函数,看下面的例子。

  function Person(){}

  var friend = new Person();

  Person.prototype  = {

    constructor: Person,

    name: 'Nicholas',

    job: 'Engineer',

    sayName: function () {

      alert(this.name);

    }

  };

  friend.sayName();    // error

  在这个例子中,我们先创建了Person的一个实例,然后又重写了其原型对象。然后调用friend.sayName()时发生了错误,因为friend指向的原型中不包含以该名字命名的属性。下图展示了这个过程的内幕。

  

  5、原生对象的问题

  原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。

  原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那么包含基本值的属性倒也说得过去,毕竟(如前面的例子所示),通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值得属性来说,问题就比较突出了。来看下面的例子。

  function Person () {}

  Person.prototype  = {

    constructor: Person,

    name: 'Nicholas',

    job: 'Engineer',

    friends: ['Shelby', 'Court'],

    sayName: function () {

      alert(this.name);

    }

  };

  var person1 = new Person();

  var person2 = new Person();

  person1.friends.push('Van');

  alert(person1.friends);    // "Shelby,Court,Van"

  alert(person2.friends);    // "Shelby,Court,Van"

  alert(person1.friends == person2.friends);    // true

  在此,Person.prototype对象有一个名为friends的属性,该属性包含一个字符串数组。然后,创建了Person的两个实例。接着,修改了person1.friends引用的数组,向数组中添加了一个字符串。由于friends数组存在于Person.prototype而非person1中,所有刚刚提到的修改也会通过person2.friends(与person1.friends指向同一个数组)反映出来。假如我们的初衷就是像这样在所有实例中共享一个数组,那么对于这个结果我无话可说。可是,实例一般都是要有属于自己的全部属性的。而这个问题正是我们很少看到有人单独使用原型模式的原因所在。

  四、组合使用构造函数模式和原型模式

  创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度的节省了内存。另外,这个混成模式还支持向构造函数传递参数;可谓是集两种模式之长。下面的代码重写了前面的例子。

  function Person (name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.friends = ['Shelby', 'Court'];

  }

  Person.prototype = {

    constructor: Person,

    sayName: function () {

      alert(this.name)

    }

  }

  var person1 = new Person('Nicholas', 29, 'Engineer');

  var person2 = new Person('Greg', 27, 'Doctor');

  person1.friends.push('Van');

  alert(person1.friends);    // "Shelby,Court,Van"

  alert(person2.friends);    // "Shelby,Court"

  alert(person1.friends == person2.friends);    // false

  alert(person1.sayName== person2.sayName);    // true

  在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。而修改了person1.friends(向其中添加一个新字符串),并不会影响到person2.friends,因为它们分别引用了不同的数组。

  ·

  ·

  ·

  除了以上四种模式之外,还有动态原型模式、寄生构造函数模式以及稳妥构造函数模式,因为使用的不多,这里就不做过多阐述,想要了解的可以自行百度。大家可以根据实际需求来确定使用哪种模式。

  ·

  · 

  ·

  ·

  ·

  到此结束。

猜你喜欢

转载自www.cnblogs.com/zlfProgrammer/p/9456502.html