6 面向对象的程序设计

本章内容

  • 理解对象属性
  • 理解并创建对象
  • 理解继承

面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScript 中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。
我们可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。
每个对象都是基于一个引用类型创建的,这个引用类型可以是原生类型,也可以是开发人员定义的类型。

6.1 理解对象

创建自定义对象的最简单方式就是创建一个Object的实例,然后再为它添加属性和方法。

var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engine";

person.sayName = function () {
  alert(this.name);
}

早期开发人员经常使用这个模式创建新对象。几年后,对象字面量成为创建这种对象的首选模式。

var person = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",

  sayName: function () {
    alert(this.name);
  }
}

6.1.1 属性类型

ECMAScript 5 再定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征。定义这些特性是为了实现 JavaScript 引擎用的,因此在 JavaScript 中不能直接访问它们。为了表示特性是内部值,该规范把它们放在了两对方括号中,例如[[Enumerable]]
ECMAScript 中有两种属性:数据属性和访问器属性。

  1. 数据属性
    数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。
  • [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。直接在对象上定义的属性,默认值为true
  • [[Enumerable]]: 表示能否通过 for-in循环返回属性。同上默认为true
  • [[Writable]]:表示能否修改属性的值。同上默认为true
  • [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值得时候,把新值保存在这个位置。这个特性的默认值为undefined

要修改属性默认的特性,必须使用Object.defineProperty()方法。这个属性接收三个参数:属性所在的对象,属性的名字和一个描述符对象。其中描述符对象的属性必须是:configurableenumerablewritablevalue。设置其中的一或多个值,可以修改对应的特性值。

var person = {};
Object.defineProperty(person, "name", {
  writable: false,
  value: "Nicholas"
});
alert(person.name);  //"NIcholas"
person.name = "Greg";
alert(person.name);  //"Nicholas"

可以多次调用Object.defineProperty()方法修改同一个属性,但在把configurable特性设置为false之后就会有限制了。多数情况没有必要使用。

  1. 访问器属性
    访问器属性不包含数据值:它们包含一对gettersetter函数(不过,这两个函数都不是必需的)。在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter函数并传入新值,这个函数负责决定如何处理数据。访问器属性有如下 4 个特性。
  • [[Configurable]]: 表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。
  • [[Enumerable]]:表示能否通过for-in循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为true
  • [[Get]]:在读取属性时调用的函数。默认值为undefined
  • [[Set]]:在写入属性时调用的函数。默认值为undefined

访问其属性不能直接定义,必须使用Object.defineProperty()来定义。

var book = {
  _year: 2004;
  edition: 1
};
Object.defineProperty(book, "year", {
  get: function () {
    return this._year;
  },
  set: function(newValue) {
    if(newValue > 2004) {
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.edition);  //2

_year前面的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性。

6.1.2 定义多个属性

ECMAScript 5 又定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数:第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

6.1.2 读取属性的特性

使用Object.getOwnPropertyDescriptor()方法,可以取得给定属性的描述符。这个方法接收两个参数:属性所在的对象和要读取其描述符的属性名称。返回值是一个对象,有对应的访问器属性的特性和数据属性的特性。

6.2 创建对象

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

6.2.1 工厂模式

考虑到ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节。

function createPerson(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function () {
    alert(this.name);
  }
  return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。随着发展,又一个新模式出现了。

6.2.2 构造函数模式

ECMAScript 中的构造函数可用来创建特定类型的对象。像ObjectArray这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

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, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

与工厂模式的不同之处:

  • 没有显式地创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。

按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。
要创建Person的新实例,必须使用new操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤:

  1. 创建一个新对象;
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
  3. 执行构造函数中的代码(为这个新对象添加属性);
  4. 返回新对象。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。

以这种方式定义的构造函数是定义在Global对象(在浏览器中是window对象)中的。

  1. 将构造函数当作函数
    任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数,如果不通过new操作符来调用,那它跟普通函数也不会有什么两样。
//  当作构造函数使用
var person = new person("Nicholas", 29, "Software Engineer");
//  作为普通函数调用
Person("Greg", 27, "Doctor");  //添加到 window
window.sayName();  //"Greg"
//  在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName();  //"Kristen"
  1. 构造函数的问题
    构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。可以通过把函数定义转移到构造函数外部来解决这个问题。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.syaName = sayName;
}
function sayName () {
alert(this.name);  
}
var person1 = new Person("Nicholas", 29, "Software English");
var person2 = new Person("Greg", 27, "Doctor");

新的问题:如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在,这些问题可以通过使用原型模式来解决。

6.2.3 原型模式

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

function Person () {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};
var person1 = new Person();
person.sayName();  //"Nicholas"
var person2 = new Person();
person2.sayName();  //"Nicholas"
alert(person1.sayName == person2.sayName);  //true
  1. 理解原型对象
    只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。举例讲,Person.prototype. constructor指向Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。
    创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。

    上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。
    可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]指向isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true
alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

可以使用Object.getPrototypeOf()方便取得一个对象的原型。
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。
使用hasOwnProperty方法可以检测一个属性是存在于实例中,还是存在于原型中。

  1. 原型与 in 操作符
    有两种方式使用in操作符:单独使用和在for-in循环中使用。单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
alert("name" in person1);  //true
alert("name" in person2);  //true

同时使用hasOwnProperty()方法和in操作符,就可以确定该属性到底是存在于对象中,还是存在于原型中。

function hasPrototypeProperty(object, name) {
  return !object.hasOwnProperty(name) && (name in object);
}

只要in操作符返回truehasOwnProperty()返回false就可以确定属性是原型中的属性。

function Person () {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};
var person = new Person();
alert(hasPrototypeProperty(person, "name"));  //true
person.name = "Greg";
alert(hasPrototypeProperty(person, "name"));  //false

要取得对象上所有可枚举的实例属性,可以使用 ECMAScript 5 的Object.keys()方法。这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys);  //"name,age,job,sayName"
var p1 =new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys);  //"name,age"

如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyNames()方法。

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);  //"constructor,name,age,job,sayName"

注意结果中包含了不可枚举的constructor属性。Object.keys()Object.getOwnPropertyNames()方法都可以用来替代for-in循环。

  1. 更简单的原型语法
    更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
function Person() {
}
Person.prototype = {
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName: function () {
  alert(this.name);
}
};

这样写的话,constructor属性不再指向Person了,本质上完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。可以特意将它设置回适当的值。

function Person() {
}
Person.prototype = {
constructor: Person,
name : 29,
job: "Software Engineer",
sayName : function () {
  alert(this.name);
}
};

注意,以这种方式重设`constructor`属性会导致它的[[Enumerable]]特性被设置为true。默认情况下,原生的constructor属性是不可枚举的,可以试试Object.defineProperty()

function Person() {
}
Person.prototype = {
};
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});
  1. 原型的动态性
    由于在原型中查找值得过程是一次搜索,因此对原型对象所做的任何修改都能够立即从实例上反映出来--即使是先创建了实例后修改原型也照样如此。
var friend = new Person();
Person.prototype.sayHi = function () {
  alert("hi");
};
friend.sayHi();  //"hi"

如果重写整个原型对象,会把原型修改为另一个对象,等于切断了构造函数与最初原型之间的联系。

function Person() {
}
var friend = new Person();
Person.prototype = {
sayName : function () {
  alert(this.name);
}
};
friend.sayName();  //error
  1. 原生对象的原型
    原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Object, Array, String, 等等)都在其构造函数的原型上定义了方法。例如,在Array.prototype中可以找到sort()方法,而在String.prototype中可以找到substring()方法。
    通过原声对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型,因此可以随时添加方法。
String.prototype.startsWith = function (text) {
  return this.indexOf(text) == 0;
};
var msg = "Hello world!";
alert(msg.startsWith("Hello"));  //true

不推荐在产品化的程序中修改原生对象的原型。如果因某个实现中缺少某个方法,就在原生对象的原型中添加这个方法,那么当在另一个支持该方法的实现中运行代码时,就可能会导致命名冲突。而且,这样做也可能会意外地重写原生方法。

  1. 原型对象的问题
    原型模式也存在缺点。他省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。
    原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说的过去,毕竟,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。
function Person() {
}
Person.prototype = {
  constructor: Person,
  friends : ["shelby", "court"]
};
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

修改了person1.friends引用的数组,向数组中添加了一个字符串。由于friends数组存在于Person.prototype而非person1中,所以刚刚提到的修改也会通过person2.friends反映出来。这个问题正是我们很少看到有人单独使用原型模式的原因所在。

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

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。

function Person(name, age, job) {
  this.name = name;
  this.name = age;
  this.job = job;
  this.friends = ["shelby", "court"];
}
Person.prototype = {
  constructor : Person,
  sayName : function() {
    alert(this.name);
  }
}
var person1 =new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("van");
alert(person1.friends);  //"shelby, court, van"
alert(person2.friends);  //"shelby,count"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

这种构造函数与原型混成的模式,是目前使用最广泛,认同度最高的一种创建自定义类型的方法。可以说,这是用来定义应用类型的一种默认模式。

6.2.5 动态原型模式

有其他 OO 语言经验的开发人员看到独立的构造函数和原型时,很可能会感到非常困惑。动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

function Person(name, age, job) {
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if (typeof this.sayName != "function") {
    Person.prototype.sayName = function() {
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

sayName()方法不存在的情况下,才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后,原型已经完成初始化。这里对原型所做的修改,能够立即在所有实例中得到反映。

使用动态原型模式时,不能使用对象字面量重写原型。

6.2.6 寄生构造函数模式

通常,在前述模式不适用的情况下,可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。

function Person (name, age, job) {
var o = new Object();
o.name = name;
o.job = job;
o.sayName = function () {
  alert(this.name);
};
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //"Nicholas"

除了使用new操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。
通过在构造函数的末尾添加一个return语句,可以重写调用函数时返回的值。
这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数,因此可以使用这个模式。

function SpecialArray () {
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values, arguments);
  //添加方法
  values.toPipedString = function () {
    return this.join("|");
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString());  //"red|blue|green"

关于寄生构造函数模式。返回的对象与构造函数或者与构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与构造函数外部创建的对象没有什么不同。为此,不能依赖instanceof操作符来确定对象类型。由于存在上述问题,建议使用其他模式。

6.2.7 稳妥构造函数模式

道格拉斯发明了稳妥对象这个概念。其指的是没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中,或者在防止数据被其他应用程序(如 Mashup 程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的Person构造函数重写如下。

function Person (name, age, job) {
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function () {
    alert(name);
  };
  //返回对象
  return o;
}

在这种模式创建的对象中,除了使用sayName()方法之外,没有其他方法访问name的值。可以像下面使用稳妥的Person构造函数。

var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName();  //"Nicholas"

与寄生构造函数模式类似,使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系,因此instanceof操作符对这种对象也没有意义。

6.3 继承

ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

6.3.1 原型链

基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含这一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。
实现原型链有一种基本模式,其代码大致如下。

function SuperType () {
  this.property = true;
}
SuperType.prototype.getSuperValue = function () {
  return this.property;
};
function SubType () {
  this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());  //true

1.别忘记默认的原型
事实上,前面例子中展示的原型链还少一环。我们知道,所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家要记住,所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这正是所有自定义类型都会继承toString()valueOf()等默认方法的根本原因。
一句话,SubType 继承了 SuperType, 而 SuperType 继承了 Object。当调用instance.toString()时,实际上调用的是保存在Object.prototype中的那个方法。
2.确定原型和实例的关系
可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用instanceof操作符,只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回true

alert(instance instanceof Object);  //true
alert(instance instanceof SuperType);  //true
alert(instance instanceof SubType);  //true

第二种方式是使用isPrototypeOf()方法。同样,只要是原型链中出现的原型,都可以说是该原型链所派生的实例的原型。

alert(Object.prototype.isPrototypeOf(instance));  //true
alert(SuperType.prototype.isPrototypeOf(instance));  //true
alert(SubType.prototype.isPrototypeOf(instance));  //true

3.谨慎地定义方法
子类型有时候需要重写超类型中的某个方法,或者需要添加超类型中不存在的某个方法。给原型添加方法的代码一定要放在替换原型的语句之后。
还有一点,即在通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链。

SubType.prototype = new SuperType();
SubType.prototype = {
  getSubValue : function () {
    return this.subproperty;
  },
  someOtherMethod: function () {
    return false;
  }
};

以上代码展示了又将原型替换成一个对象字面量而导致的问题。由于现在的原型包含的是一个Object的实例,而非SuperType的实例,因此我们设想的原型链已经被切断。
4.原型链的问题
最主要的问题来自包含引用类型值的原型。前面介绍过包含引用类型值的原型属性会被所有实例共享;而这也是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。

function SuperType () {
  this.colors = {"red", "blue", "green"};
}
function SubType () {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance.colors);  //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors);  //"red,blue,green,black"

原型链的第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。实践中很少会单独使用原型链。

6.3.2 借用构造函数

在解决原型中包含引用类型所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术(伪造对象或经典继承)。这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数。通过使用apply()call()方法也可以在新创建的对象上执行构造函数。

function SuperType () {
  this.colors = {"red", "blue", "green"};
}
function SubType () {
  //继承了 SuperType
  SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //"red, blue, green, black"
var instance2 = new SubType();
alert(instance2.colors);  //"red, blue, green"

1.传递参数
借用构造函数可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType (name) {
  this.name = name;
}
function SubType () {
  //继承了 SuperType,同时还传递了参数
  SuperType.call(this, "Nicholas");
  //实例属性
  this.age = 29;
}
var instance = new SubType();
alert(instance.name);  //"Nicholas"
alert(instance.age);  //29

2.借用构造函数的问题
无法避免构造函数模式存在的问题--方法都在构造函数中定义,因此函数复用就无从谈起了。借用构造函数的技术也是很少单独使用的。

6.3.3 组合继承

有时候也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

function SuperType (name) {
  this.name = name;  
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
  alert(this.name);
};
function SubType(name, age) {
  //继承属性
  SuperType.call(this, name);
  this.age = age;
}
//继承方法
SubType.prototype = new SuperType ();
SubType.prototype.sayAge = function () {
  alert(this.age);
} ;
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);  //"red, blue, green, black"
instance1.sayName();  //"Nicholas"
instance1.sayAge();  //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red, blue, green"
instance2.sayName();   //"Greg"
instance2.sayAge();  //27

组合继承避免了原型链和借用构造函数的缺陷,成为 JavaScript 中最常用的继承模式。而且,instanceofisPrototypeOf()也能够用于识别基于组合继承创建的对象。

6.3.4 原型式继承

function object(o) {
  function F () {}
  F.prototype = o;
  return new F();
}

object()函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。从本质上讲,object()对传入其中的对象执行了一次浅复制。
这种原型继承,要求你必须有一个对象可以作为另一个对象的基础。
ECMAScript 5 通过新增Object.create()方法规范化了原型式继承。接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create()object()方法的行为相同。

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person, {
  name: {
    value: "Greg"
  }
});
alert(anotherPerson.name);  //"Greg"

6.3.5 寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。

使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数模式类似。

6.3.6 寄生组合式继承

组合继承最大的问题是会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数。

6.4 小结

ECMAScript 支持面向对象编程,但不使用类或者接口。对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体。在没有类的情况下,可以采用下列模式创建对象。

  • 工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来被构造函数模式所取代。
  • 构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new操作符。不过,构造函数模式也有缺点,即它的每个成员都无法得到复用,包括函数。由于函数可以不局限于任何对象(即与对象具有松散耦合的特点),因此没有理由不在多个对象间共享函数。
  • 原型模式,使用构造函数的prototype属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。
    JavaScript 主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。这样,子类型就能够访问超类型的所有属性和方法,这一点与基于类的继承很相似。使用最多的继承模式是组合继承,这种模式使用原型链继承共享的属性和方法,而通过借用构造函数继承实例属性。
    此外,还存在下列可供选择的继承模式。
  • 原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步改造。
  • 寄生式继承,与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。
  • 寄生组合式继承,集寄生式继承和组合继承的优点于一身,是实现基于类型继承的最有效方式。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容