Ch6 Object-Oriented Programming(JavaScript中的面向对象编程)

    本文为书籍《Professional JavaScript for Web Developers, 3rd Edition》英文版第 6 章：“Object-Oriented Programming” 个人学习总结，主要介绍 JavaScript 中自定义类型的产生和类型继承实现的各种模式及其优缺点。

 

一. 类和对象的产生
本节介绍在 10 种在 JavaScript 中产生对象的模式及其优缺点。
1.Object构造函数模式
var person = new Object (); person . name = "Nicholas" ; person . age = 29 ;
或
var person = {}; person . name = "Nicholas" ; person . age = 29 ;
2.对象字面表达(object literal) 模式
// 这是定义对象较好的一种方式，书写方便，简洁易读 var person = { // 属性和属性的值用冒号分开 name : "Nicholas" , // 用逗号分开属性定义 age : 29 // 最后定义的属性不需要逗号 }; // 结尾最好带分号 可以使用字符串和数字作为属性名称，如：
var person = { "name" : "Nicholas" , "age" : 29 , 5 : true // 为数字的属性名称将自动转为字符串 };
3.工厂模式
前两种创建对象的方式简单，但如果要创建具有相同类型的多个对象， 只能重复相同的代码。也就是说，无法创建一种类型的多个对象实例 。所以这两种方法只能产生一个对象，它们的类型始终是Object，没有 具体的类型。 即：var person1 = new person () 或var person1 = new person是无 效的。 工厂模式可以解决使用一种方式创建多个相同类型对象的问题，如：
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" );
工厂模式解决了对象的产生问题，但是工厂模式产生的对象仍不能 判断具体的类型。比如上例中，person1不能被判断是否为Person类型。
4.构造函数模式
function Person ( name , age , job ) { this . name = name ; //this关键字使得类型 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" );
由于JavaScript中函数的性质，在产生类实例时可以不用传递全部 参数，甚至不传递参数，如：
var person1 = new Person () var person2 = new Person ( "Jim" ); var person3 = new Person ( "Tom" , 29 ); person1 . sayName (); //undefined person1 . name = "Tim" ; person1 . sayName (); //"Tim" person2 . sayName (); //"Jim" person3 . sayName (); //"Tom" 构造函数模式能够很好地产生一种类型，并创建这种类型的多个 对象实例。比如，我们根据面向对象的概念，可以认为 Person 是 一个类，而 person1 和 person2 是 Person 的两个实例对象。 可以判断构造函数产生的对象实例的类型，有两种方法：
// constructor 属性是每个引用类型对象都具有的属性 // 指向定义对象的构造函数 alert ( person1 . constructor == Person ); //true alert ( person2 . constructor == Person ); //true 或
alert ( person1 instanceof Object ); //true alert ( person1 instanceof Person ); //true alert ( person2 instanceof Object ); //true alert ( person2 instanceof Person ); //true ( 1 ) 是类，也是函数
构造函数模式建立的类是使用函数方式定义的，因此这种类型 既是类也是函数。下面的例子说明了这一点
： //use as a constructor var person = new Person ( "Nicholas" , 29 , "Software Engineer" ); person . sayName (); //"Nicholas" //call as a function Person ( "Greg" , 27 , "Doctor" ); //adds to window window . sayName (); //"Greg" //call in the scope of another object var o = new Object (); Person . call ( o , "Kristen" , 25 , "Nurse" ); o . sayName (); //"Kristen" ( 2 ) 构造函数模式的问题
在JavaScript中，函数即对象，所以在类内部定义的方法，当实 例化类创建多个对象时，每个对象内的方法虽然具有相同的名称， 但却是不同的实例。所以构造函数模式产生的对象实例不能重用方法 功能，只能各自产生新的方法实例，造成代码冗余。可以将方法的定 义放到类的外部来解决这个问题。如：
function Person ( name , age , job ) { this . name = name ; this . age = age ; this . job = job ; this . sayName = sayName ; } function sayName () { alert ( this . name ); }
这样，sayName () 的功能便可以重用。但这样不利于代码组织，容 易产生混乱的代码。sayName () 函数本来只应属于类Person，却在全局 作用域中定义，可以在其它类、对象和函数等作用域内调用。这些问 题可以使用原型 ( Prototype ) 模式解决。
5.原型(Prototype) 模式
所有的函数都具有一个 prototype 属性，该属性对于引用类型的 实例都可用，是一个包含属性与方法的对象。每当通过构造函数产生 对象时，将以 prototype 作为原型产生对象。 prototype 的所有属性 和方法将在所有实例对象间共享。属性默认值在各实例对应属性中是 相等的，每个对象可以重新定义属性的值，但重新定义的属性 ( 与 prototype 中属性名称相同 ) 仅位于每个对象 ( 实例 ) 上， prototype 中 的对应属性被屏蔽，但仍可以通过 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 (); //person1.sayName(); //"Nicholas" var person2 = new Person (); //person2.sayName(); //"Nicholas" //alert(person1.sayName == person2.sayName); //true //alert(person1 instanceof Object); //true //alert(person1 instanceof Person); //true //alert(person2 instanceof Object); //true //alert(person2 instanceof Person); //true //name属性被重新定义在person1上， //prototype中的name属性被屏蔽 person1 . name = "Jim" ; person2 . name = "Tom" ; //person1.sayName(); //"Jim" -- 来自实例 //person2.sayName(); //"Tom" alert ( person1 . name ); //"Jim" -- 来自实例 //"Nicholas" -- 来自 prototype alert ( person1 . constructor . prototype . name ); var person3 = new Person (); person3 . sayName () //"Nicholas" -- 来自 prototype 也可以这样使用原型模式：
function Person () { } //使用对象方式定义原型，默认的prototype对象属性被覆写 Person . prototype = { name : "Nicholas" , age : 29 , job : "Software Engineer" , sayName : function () { alert ( this . name ); } };
这种原型模式与上一个例子中的大致相同，但是所产生实例的 constructor 属性不再指向初始的构造函数 ( 本例中为Person ) ，每个 实例的 constructor 和 prototype 都会重新产生，覆写默认的 constructor 和 prototype 。 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 原因是， prototype 对象也具有自己的 constructor 属性， 默认指向 prototype 所在的构造函数，但是采用上面的原型模式 所产生的对象会覆写 prototype 的 constructor 属性所指向的构 造函数。 这个问题可以通过以下方法解决：
function Person () { } Person . prototype = { constructor : Person , //设置 prototype 的构造函数 name : "Nicholas" , age : 29 , job : "Software Engineer" , sayName : function () { alert ( this . name ); } };
需要注意的是，使用对象覆写默认原型时，实例化应在定义原型 之后，否则可能得不到预期效果。如：
function Person () { } var friend = new Person (); Person . prototype = { constructor : Person , name : "Nicholas" , age : 29 , job : "Software Engineer" , sayName : function () { alert ( this . name ); } }; friend . sayName (); //error 这里，Person的实例 friend 产生在 prototype 对象被覆写之前， friend仍指向默认的 prototype ，但默认的 prototype 中没有 sayName () 方法，因此产生错误。如果 friend 产生在 prototype 对象 被覆写之后，则 friend 将指向新的 prototype ，不会出错。 可以通过 prototype 扩展或覆写像 window , string , math等预定义 对象的属性和方法。
( 1 ) 原型模式的问题
原型模式创建对象无法通过构造函数传递初始化参数，并且，若在 原型上定义的属性是引用类型，则每个实例相同名称的引用类型的属性 总是具有相同的值，这可以实现静态成员，但若每个实例想拥有各自的 引用类型的属性值，这就成了问题。因此，纯粹的原型模式也很少用。
6.构造函数/ 原型模式
这种模式属于构造函数模式和原型模式的混合。实例属性在构造函数 中定义，方法和共享属性在原型中定义。这种模式很好地综合了构造 函数模式和原型模式的优点，同时解决了各自的问题。如：
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 , "Software 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 7.动态原型模式
这种模式将原型定义放在构造函数内部，必要时可以检查方法是否 可用以决定是否需要初始化原型。如：
function Person ( name , age , job ) { //properties this . name = name ; this . age = age ; this . job = job ; //methods //if (typeof this.sayName != "function") //{ Person . prototype . sayName = function () { alert ( this . name ); }; //} } var friend = new Person ( "Nicholas" , 29 , "Software Engineer" ); friend . sayName ();
可以通过 if 语句检查任何属性或方法，但没有必要使用多个 if 语 句，检查任何一个属性或方法即可。这种模式具有以上各种模式的优点 ，同时便于代码组织。
8.寄生(Parasitic) 构造函数模式
这种模式类似于工厂模式的定义，但创建对象时，使用 new 关键字。 例如：
function Person ( 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 friend = new Person ( "Nicholas" , 29 , "Software Engineer" ); friend . sayName (); //"Nicholas" alert ( friend instanceof Person ); //false 这种模式产生的对象与构造函数无关，也不能依赖 instanceof 运算符 判断对象的类型，因此，仅在特殊情况下使用该模式。
9.持久(Durable) 构造函数模式
这种模式创建的对象没有公共属性，方法也不引用 this 对象。此模式 常应用于安全环境和混搭模式，不允许使用 this 和 new。如：
function Person ( name , age , job ) { //create the object to return var o = new Object (); //optional: define private variables/functions here //attach methods o . sayName = function () { alert ( name ); }; //return the object return o ; } var friend = Person ( "Nicholas" , 29 , "Software Engineer" ); friend . sayName (); //"Nicholas" 类似于寄生函数模式，不能依赖 instansof 运算符判断对象类型。
10.ECMAScript 6 模式
在 ECMAScript 6 中引入了许多面向对象语言的特性，在实现了 ECMAScript 6 的 JavaScript中，可以像许多 C 语言风格的面向对象 编程语言一样定义类。例如，一个常规的 JavaScript 自定义类型如下：
function Person ( name , age ) { this . name = name ; this . age = age ; } Person . prototype . sayName = function () { alert ( this . name ); }; Person . prototype . getOlder = function ( years ) { this . age += years ; };
如果使用实现了 ECMAScript 6 的 JavaScript来定义与上例相同的 类型，可以这样：
class Person { constructor ( name , age ) { public name = name ; public age = age ; } sayName () { alert ( this . name ); } getOlder ( years ) { this . age += years ; } }
但是由于目前浏览器的兼容性原因，ECMAScript 6 定义类型的模式 也不常用。所以这里不做详细介绍。 为了使 JavaScript 更好地以 ECMAScript 6 方式工作，同时解决浏 览器兼容性问题，微软推出了开源的 TypeScript，其官方网址是： http : //www.typescriptlang.org/ 二. 继承
JavaScript中，主要是通过原型链 ( Prototype Chaining ) 来实现继承， 并且只有实现继承，没有接口继承。
1.原型链继承
JavaScript中对象的 prototype 属性一个很重要的方面就是用于实现 类型的继承。所有引用类型的对象默认都继承了 Object 对象的 prototype ，因而都有 toString () 和 valueOf () 等方法。 原型链继承的模式如下：
// 父类 function SuperType () { this . property = true ; } SuperType . prototype . getSuperValue = function () { return this . property ; }; // 子类 function SubType () { this . subproperty = false ; } // 使 SubType 从 SuperType 继承 // 这是原型链继承的关键 SubType . prototype = new SuperType (); // 在子类的原型上定义新的子类的方法 SubType . prototype . getSubValue = function () { return this . subproperty ; }; var instance = new SubType (); alert ( instance . getSuperValue ()); //true 有两种方法用于判定实例与类型的关系，例如，对于上面的代码：
//使用 instanceof 运算符 alert ( instance instanceof Object ); //true alert ( instance instanceof SuperType ); //true alert ( instance instanceof SubType ); //true //使用类型prototype属性的isPrototypeOf方法 alert ( Object . prototype . isPrototypeOf ( instance )); //true alert ( SuperType . prototype . isPrototypeOf ( instance )); //true alert ( SubType . prototype . isPrototypeOf ( instance )); //true 如果子类要重写父类的方法，可以在将父类的实例赋值给子类的 原型后，在子类的原型上定义相同名称的方法，如：
// ... // 实现继承 SubType . prototype = new SuperType (); //重写继承的方法 SubType . prototype . getSuperValue = function () { return false ; }; var instance = new SubType (); alert ( instance . getSuperValue ()); //false 需要注意的是，在原型链继承模式中，不可以在原型 ( prototype ) 上 用对象字面表示 ( object literal ) 方式定义方法，这样会覆写已继承的 原型链。如：
function SuperType () { this . property = true ; } SuperType . prototype . getSuperValue = function () { return this . property ; }; function SubType () { this . subproperty = false ; } //实现继承 SubType . prototype = new SuperType (); //试图用对象字面表示方式在原型上定义方法， //这会覆写已经继承的原型链，即上一行的代码所继承的原型链 SubType . prototype = { getSubValue : function () { return this . subproperty ; }, someOtherMethod : function () { return false ; } }; var instance = new SubType (); alert ( instance . getSuperValue ()); // 错误！ 原型链继承模式的问题 因为原型链继承模式是通过将父类的实例赋予子类，因而具有与原型 模式所产生的对象的同样的问题。如果父类中的某个属性是引用类型，则 子类的所有实例的这个属性的值都相同，修改子类一个实例的该属性的值 将会同时改变其他实例该属性的值。如：
// 父类 function SuperType () { this . colors = [ "red" , "blue" , "green" ]; } // 子类 function SubType () { } //从父类继承 SubType . prototype = new SuperType (); 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,black" 上例中，子类 SubType 从父类 SuperType 继承了一个数组类型 ( 引用类型 ) 的属性 colors。在向 SubType 的实例 instance1 的 colors 属性中添加一个新项 black 后，SubType 的实例 instance2 中的 colors 属性也自动地拥有这个新项。这在很多情况下是不希望 看到的。 原型链继承模式的另一个问题是，当产生子类的新实例时，无法 向父类的构造函数传递参数。 由于以上两个原因，在实际中，很少单纯地使用原型链模式进行 继承。
2.构造函数窃取(Constructor Stealing) 模式继承
可以使用构造函数窃取继承模式解决原型 ( prototypes ) 上引用值 的继承问题，其基本思想是：在子类的构造函数内部调用父类的 apply () 或 call () 方法并传递 this 参数执行父类的构造函数，这 样，每个子类的实例从父类中继承的引用属性都是各自独立的，不受 其它实例的影响。如：
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" 传递参数 构造函数窃取继承模式可以在子类的构造函数内向父类的构造函 数传递参数，这正好克服了原型链继承模式的相应缺点。例如：
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 构造函数继承模式的问题 构造函数继承模式的问题具有与使用构造函数模式产生自定义类型 相似的问题：由于方法定义在构造函数内，不能进行功能重用。而且， 定义在父类原型上的方法不能被子类访问。因此，实际中，很少纯粹使 用构造函数窃取继承模式。
3.混合继承(Combination inheritance )
这种继承方式综合了原型链 ( Prototype Chaining ) 和构造函数窃取 ( Constructor Stealing ) 各自的优点，并克服了相应的缺点。其基本思 想是：使用原型链继承在原型上的成员，使用构造函数窃取继承实例 属性。这允许重用定义在原型上的功能并允许各个实例拥有自己的属 性。这是JavaScript中最常用的继承方式，并能通过 instanceof 和 isPrototypeOf () 区分对象的类型和组成。例如：
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 ); //第一次调用SuperType this . age = age ; } SubType . prototype = new SuperType (); //第二次调用SuperType SubType . prototype . constructor = SubType ; 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 alert ( instance1 instanceof SuperType ); //true alert ( instance1 instanceof SubType ); //true //alert(instance1.constructor); var instance2 = new SubType ( "Greg" , 27 ); alert ( instance2 . colors ); //"red,blue,green" instance2 . sayName (); //"Greg"; instance2 . sayAge (); //27 //alert(instance2 instanceof SuperType); //alert(instance2.constructor); 上例中，SuperType的原型成员可以在SuperType函数内部定义，但 SubType的原型和原型成员却不可以在SubType内定义。如果要在SubType 内定义原型和原型上的成员，在instance2之前必须要有一个实例 ( 例如 instance1 ) ，instance2的所有成员以及继承成员都可以访问，但instance1 原型成员以及继承的原型成员都不可以访问。 混合模式因为调用两次SuperType，所以效率不是很高。
4.寄生混合继承
寄生混合继承使用构造函数窃取继承属性，使用原型链混合形式继承 方法。实质上是，使用寄生继承模式继承父类的原型然后将结果分配给 子类的原型。例如：
function object ( o ) { function F () { } F . prototype = o ; return new F (); } function inheritPrototype ( subType , superType ) { var prototype = object ( superType . prototype ); //create object prototype . constructor = subType ; //augment object subType . prototype = prototype ; //assign object } 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 ; } inheritPrototype ( SubType , 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 alert ( instance1 instanceof SuperType ); var instance2 = new SubType ( "Greg" , 27 ); alert ( instance2 . colors ); //"red,blue,green" instance2 . sayName (); //"Greg"; instance2 . sayAge (); //27 寄生混合继承比混合继承效率高，原型链也保持了完整，而且， instanceof 和 isPrototypeOf () 也能很好地工作，因而是一种最佳 的引用类型继承模式。其缺点是，代码组织不方便。