×

JS面向对象

96
oWSQo
2017.08.07 15:29* 字数 9736

ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。

理解对象

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

var person=new Object();
person.name="zhangsan";
person.age="33";
person.sayName=function() {
    alert(this.name);
};

用对象字面量语法可简化:

var person={
    name:"zhangsan",
    age:"33",
    sayName:function() {
        alert(this.name);
    }
};

属性类型

ECMAScript中有两种属性:数据属性和访问器属性。

数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。

  • [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。
  • [[Enumerable]]:表示能否通过for-in循环返回属性。
  • [[Writable]]:表示能否修改属性的值。
  • [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候, 把新值保存在这个位置。这个特性的默认值是undefined

直接在对象上定义的属性,它们的[[Configurable]][[Enumerable]][[Writable]]都被设置为true,而[[Value]]特性被设置为指定的值。
  要修改属性默认的特性,必须使用Object.defineProperty()方法。这个方法接收三个参数:属性所在的对象、属性的名字和一个描述符对象。描述符对象的属性必须是:configurableenumerableWritablevalue。设置其中的一个或多个值,可以修改对应的特性值。

var person={};
Object.defineProperty(person,'name',{
    writable:false,
    value:'zhangsan'
});
alert(person.name);//"zhangsan"
person.name='lisi'; 
alert(person.name);//"zhangsan"

这个例子创建了一个名为name的属性,它的值"Nicholas"是只读的。这个属性的值是不可修改的,如果尝试为它指定新值,则在非严格模式下,赋值操作将被忽略;在严格模式下,赋值操作将会导致抛出错误。
  类似的规则也适用于不可配置的属性。例如:

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

configurable设置为false,表示不能从对象中删除属性。如果对这个属性调用delete,则 在非严格模式下什么也不会发生,而在严格模式下会导致错误。而且,一旦把属性定义为不可配置的,就不能再把它变回可配置了。此时,再调用Object.defineProperty()方法修改除writable之外的特性,都会导致错误:

var person = {}; 
Object.defineProperty(person, "name", { 
    configurable: false,
    value: "Nicholas"
});
//抛出错误
Object.defineProperty(person, "name", { 
    configurable: true,
    value: "Nicholas"
});

也就是说,可以多次调用Object.defineProperty()方法修改同一个属性,但在把configurable特性设置为false之后就会有限制了。
  在调用Object.defineProperty()方法时,如果不指定,configurableenumerable
writable特性的默认值都是false

访问器属性

访问器属性不包含数据值;它们包含一对儿 gettersetter函数。
  在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值;在写入访问器属性时,会调用 setter函数并传入新值,这个函数负责决定如何处理数据。访问器属性有4个特性。

  • [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特 性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true
  • [[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前面 的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性。
  不一定非要同时指定gettersetter。只指定getter意味着属性是不能写,尝试写入属性会被忽略。 在严格模式下,尝试写入只指定了getter函数的属性会抛出错误。类似地,只指定setter函数的属性也不能读,否则在非严格模式下会返回undefined,而在严格模式下会抛出错误。
支持ES5的这个方法的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 12+ 和 Chrome 。 在这个方法之前,要创建访问器属性,一般都使用两个非标准的方 法:__defineGetter__()__defineSetter__()。这两个方法最初是由Firefox 引入的,后来Safari 3、Chrome 1和Opera 9.5也给出了相同的实现。使用这两个遗留的方法,可以像下面这样重写前面的例子。

var book = { 
    _year: 2004, 
    edition: 1
};
//定义访问器的旧有方法 
book.__defineGetter__("year", function(){ 
    return this._year;
});
book.__defineSetter__("year", function(newValue){ 
    if (newValue > 2004) {
        this._year = newValue; 
        this.edition += newValue - 2004;
    }
});
book.year = 2005; 
alert(book.edition);  //2

在不支持Object.defineProperty()方法的浏览器中不能修改[[Configurable]][[Enumerable]]

定义多个属性

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

var book = {};
Object.defineProperties(book, { 
    _year: {
        value: 2004
    },
    edition: { 
        value: 1 
    },
    year: {
        get: function(){
            return this._year; 
        },
        set: function(newValue){
            if (newValue > 2004) { 
                this._year = newValue; 
                this.edition += newValue - 2004;
            }
        }
    }
});

读取属性的特性

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

var book = {};
Object.defineProperties(book, { 
    _year: {
        value: 2004
    },
    edition: { 
        value: 1 
    },
    year: {
        get: function(){ 
            return this._year; 
        },
        set: function(newValue){
            if (newValue > 2004) { 
                this._year = newValue; 
                this.edition += newValue - 2004;
            }
        }
    }
});
var descriptor = Object.getOwnPropertyDescriptor(book, "_year"); 
alert(descriptor.value);         //2004 
alert(descriptor.configurable); //false
alert(typeof descriptor.get);    //"undefined"
var descriptor = Object.getOwnPropertyDescriptor(book, "year"); 
alert(descriptor.value);        //undefined 
alert(descriptor.enumerable);   //false
alert(typeof descriptor.get);   //"function"

在JS中,可以针对任何对象(包括DOM和BOM对象),使用Object.getOwnPropertyDescriptor()方法。

创建对象

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

工厂模式

由于在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('zhangsan',33,'Teacher');

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

构造函数模式

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('zhangsan',33,'teacher');

Person()creatPerson()的不同:

  • 没有显示的创建对象
  • 直接将属性和方法赋给了this对象
  • 没有return语句

构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。
  在前面例子的最后,person1person2分别保存着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

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

将构造函数当做函数

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

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); //"Nicholas"
// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window 
window.sayName(); //"Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse"); 
o.sayName(); //"Kristen"
构造函数的问题

使用构造函数的主要问题,就是每个方法都要在每个 实例上重新创建一遍。在前面的例子中,person1person2都有一个名为sayName()的方法,但那 两个方法不是同一个Function的实例。每定义一个 函数,也就是实例化了一个对象。从逻辑角度讲,此时的构造函数也可以这样定义。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.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, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor");

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

原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

function Person() {

}
Person.prototype.name='zhangsan';
Person.prototype.age=33;
Person.prototype.job='teacher';
Person.prototype.sayName=function () {
    alert(this.name);
};
var person1=new Person();
person1.sayName(); //'zhangsan'
var person2=new Person();
person2.sayName(); //'zhangsan'
alert(person1.sayName==person2.sayName); //true
理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。就拿前面的例子来说,Person.prototype. constructor指向Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。
  创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262中管这个指针叫[[Prototype]]。虽然在脚本中 没有标准的方式访问[[Prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就 是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。
以前面使用Person构造函数和Person.prototype创建实例的代码为例:


  上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。
  在此,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外,还包括后来添加的其他属性。Person的每个实例——person1person2都包含一个内部属性,该属性仅仅指向了Person.prototype;换句话说,它们与构造函数没有直接的关系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用 person1.sayName()。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]调用 isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回 true,如下所示:

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

ES5增加了一个新方法,叫Object.getPrototypeOf(),在所有支持的实现中,这个 方法返回[[Prototype]]的值。

alert(Object.getPrototypeOf(person1) == Person.prototype); //true 
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到, 则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这 个属性,则返回该属性的值。这正是多个 对象实例共享原型所保存的属性和方法的基本原理。
  原型最初只包含constructor属性,而该属性也是共享的,因此可以通过对象实例访问。
  虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性。

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();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name);     //"Greg"——来自实例
alert(person2.name);     //"Nicholas"——来自原型

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

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(); 
var person2 = new Person();
person1.name = "Greg";
alert(person1.name);     //"Greg"——来自实例 
alert(person2.name);     //"Nicholas"——来自原型
delete person1.name;
alert(person1.name);     //"Nicholas"——来自原型

使用hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法(它是从 Object继承来的)只在给定属性存在于对象实例中时,才会返回true

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(); var person2 = new Person();
alert(person1.hasOwnProperty("name"));  //false
person1.name = "Greg";
alert(person1.name);     //"Greg"——来自实例 
alert(person1.hasOwnProperty("name"));  //true
alert(person2.name);     //"Nicholas"——来自原型 
alert(person2.hasOwnProperty("name"));  //false
delete person1.name;
alert(person1.name);     //"Nicholas"——来自原型 
alert(person1.hasOwnProperty("name"));  //false


  ES5的Object.getOwnPropertyDescriptor()方法只能用于实例属性,要取得原型属性的描述符,必须直接在原型对象上调用Object.getOwnPropertyDescriptor()方法。

原型与in操作符

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

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(); 
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
alert(person2.name);   //"Nicholas" ——来自原型 
alert(person2.hasOwnProperty("name"));  //false 
alert("name" in person2);  //true
delete person1.name;
alert(person1.name);   //"Nicholas" ——来自原型 
alert(person1.hasOwnProperty("name"));  //false 
alert("name" in person1);  //true

在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。屏蔽了原型中不可枚举属性(即将[[Enumerable]]标记为false的属性)的实例属性也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的,只有在IE8及更早版本中例外。
  IE早期版本的实现中存在一个bug,即屏蔽不可枚举属性的实例属性不会出现在for-in循环中。

var o = {
    toString : function(){ 
        return "My Object"; 
    }
};
for (var prop in o){
    if (prop == "toString"){
       alert("Found toString"); //在 IE 中不会显示 
    }
}

该bug会影响默认不可枚举的所有属性和方法,包括:hasOwnProperty()propertyIsEnumerable()toLocaleString()toString()valueOf()。ES5也将constructorprototype属性的[[Enumerable]]特性设置为false,但并不是所有浏览器都照此实现。
  要取得对象上所有可枚举的实例属性,可以使用ES5的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"

Object.keys()Object.getOwnPropertyNames()方法都可以用来替代for-in循环。

更简单的原型语法

对象字面量创建原型对象:

function Person(){
}
Person.prototype = {
    name : "Nicholas",
    age : 29,
    job: "Software 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

如果constructor的值真的很重要,可以像下面这样特意将它设置回适当的值。

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

注意,以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下,原生的constructor属性是不可枚举的,因此如果你使用兼容ES5的JS引擎,可以试一试 Object.defineProperty()

function Person(){
}
Person.prototype = {
    name : "Nicholas",
    age : 29,
    job : "Software Engineer", 
    sayName : function () { 
        alert(this.name);
    }
};
//重设构造函数,只适用于ECMAScript 5兼容的浏览器 
Object.defineProperty(Person.prototype, "constructor", { 
    enumerable: false,
    value: Person
});
原型的动态性

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

var friend = new Person();
Person.prototype.sayHi = function(){ 
    alert("hi");
};
friend.sayHi();   //"hi"(没有问题!)

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

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

  重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系;它们引用的仍然是最初的原型。

原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Object、Array、String,等等)都在其构造函数的原型上定义了方法。

alert(typeof Array.prototype.sort);          //"function" 
alert(typeof String.prototype.substring);    //"function"

通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型,因此可以随时添加方法。

String.prototype.startsWith = function (text) { 
    return this.indexOf(text) == 0;
};
var msg = "Hello world!"; 
alert(msg.startsWith("Hello"));   //true
原型对象的问题

原型模式的最大问题是由其共享的本性所导致的。
  原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒 也说得过去,毕竟通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。

function Person(){
}
Person.prototype = { 
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software 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

实例一般都是要有属于自己的全部属性的。而这个问题正是我们很少单独使用原型模式的原因所在。

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

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

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,Count,Van" 
alert(person2.friends);    //"Shelby,Count" 
alert(person1.friends === person2.friends);    //false 
alert(person1.sayName === person2.sayName);    //true

动态原型模式

动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数 中初始化原型,又保持了同时使用构造函数和原型的优点。换句话说,可以通过 检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

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()方法不存在的情况下,才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后,原型已经完成初始化,不需要再做什么修改了。
  这里对原型所做的修改,能够立即在所有实例中得到反映。其中,if语句检查的可以是初始化之后应该存在的任何属性或方法——不必用一大堆if语句检查每个属性和每个方法;只要检查其中一个即可。对于采用这种模式创建的对象,还可以使用instanceof操作符确定它的类型。
  使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新原型之间的联系。

寄生构造函数模式

寄生构造函数模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

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"

在这个例子中,除了使用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操作符来确定对象类型。

稳妥构造函数模式

稳妥对象指的是没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在 一些安全的环境中(这些环境中会禁止使用thisnew),或者在防止数据被其他应用程序改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用this;二是不使用new操作符调用构造函数。

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

变量friend中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可 以访问其数据成员。即使有其他代码会给这个对象添加方法或数据成员,但也不可能有别的办法访问传入到构造函数中的原始数据。
与寄生构造函数模式类似,使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系,因此instanceof操作符对这种对象也没有意义。

继承

面向对象语言有两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

原型链

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

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

实例以及构造函数和原型之间的关系

在上面的代码中,我们没有使用SubType默认提供的原型,而是给它换了一个新原型;这个新原型就是SuperType的实例。于是,新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法, 而且其内部还有一个指针,指向了SuperType的原型。最终结果就是这样的:instance指向SubType的原型 ,SubType的原型又指向SuperType的原型 。getSuperValue()方法仍然还在SuperType.prototype中,但property则位于SubType.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property当然就位于该实例中了。此外,要注意instance.constructor现在指向的是SuperType,这是因为原来SubType.prototype中的constructor被重写了的缘故。
在通过原型链实现继承的情况下,搜索过程就得以沿着原型链继续向上。就拿上面的例子来说,调用instance.getSuperValue()会经历三个搜索步骤:1)搜索实例;2)搜索SubType.prototype;3)搜索SuperType.prototype,最后一步才会找到该方法。在找不到属性或方法的情况下,搜索过 程总是要一环一环地前行到原型链末端才会停下来。

别忘记默认的原型

事实上,前面例子中展示的原型链还少一环。我们知道,所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向 Object.prototype。这也正是所有自定义类型都会继承toString()valueOf()等默认方法的根本原因。

完整的原型链

SubType继承了SuperType,而SuperType继承了Object。当调用instance.toString()时,实际上调用的是保存在Object.prototype中的那个方法。

确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用instanceof操作符,只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回true

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

第二种方式是使用isPrototypeOf()方法。只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型,因此isPrototypeOf()方法也会返回true

alert(Object.prototype.isPrototypeOf(instance));    //true 
alert(SuperType.prototype.isPrototypeOf(instance)); //true 
alert(SubType.prototype.isPrototypeOf(instance));   //true
谨慎地定义方法

给原型添加方法的代码一定要放在替换原型的语句之后。

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;
};
//重写SubType.prototype中的方法 
SubType.prototype.getSuperValue = function (){ 
    return false;
};
var instance = new SubType(); 
alert(instance.getSuperValue());   //false

在通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链。

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;
    },
    someOtherMethod : function (){ 
        return false;
    }
};
var instance = new SubType(); 
alert(instance.getSuperValue());   //error!
原型链的问题

原型链虽然很强大,可以用它来实现继承,但它也存在一些问题。最主要的问题来自包含引用类型值的原型。包含引用类型值的原型属性会被所有实例共享;而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。

function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
}
//继承了 SuperType
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"

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

借用构造函数

在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数 的技术(有时候也叫做伪造对象或经典继承)。这种技术的基本思想是在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,因此通过使用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"

SubType()中的代码“借调”了超类型的构造函数。通过使用call()方法(或apply()方法),我们实际上是在(未来将要)新创建的SubType实例的环境下调用了SuperType构造函数。这样一来,就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果,SubType的每个实例就都会具有自己的colors属性的副本了。

传递参数

相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。

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

SubType构造函数内部调用SuperType构造函数时,实际上是为SubType的实例设置了name属性。为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中
定义的属性。

借用构造函数的问题

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定 义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结 果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也是很少单独使用的。

组合继承

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

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.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

var instance2 = new SubType("Greg", 27); 
alert(instance2.colors);      //"red,blue,green" 
instance2.sayName();          //"Greg"; 
instance2.sayAge();           //27

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

原型式继承

原型式继承方法并没有使用严格意义上的构造函数。借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

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

从本质上讲,object()对传入其中的对象执行了一次浅复制。

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"] 
};
var anotherPerson = object(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

原型式继承,要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话,可以把它传递给object()函数,然后再根据具体需求对得到的对象加以修改即可。在这 个例子中,可以作为另一个对象基础的是person对象,于是我们把它传入到object()函数中,然后该函数就会返回一个新对象。这个新对象将person作为原型,所以它的原型中就包含一个基本类型值属性和一个引用类型值属性。这意味着person.friends不仅属于person所有,而且也会被anotherPerson以及yetAnotherPerson共享。实际上,这就相当于又创建了person对象的两个副本。
ES5 通过新增Object.create()方法规范化了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create()object()方法的行为相同。

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

var yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同:每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。

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

在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。不过别忘了,包含引用类型值的属性始终都会共享相应的值,就像使用原型模 式一样。

寄生式继承

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

function createAnother(original){
    var clone = object(original);  //通过调用函数创建一个新对象 
    clone.sayHi = function(){      //以某种方式来增强这个对象 
        alert("hi");
    };
    return clone;         //返回这个对象
}

在这个例子中,createAnother()函数接收了一个参数,也就是将要作为新对象基础的对象。然后,把这个对象(original)传递给object()函数,将返回的结果赋值给clone。再为clone对象 添加一个新方法sayHi(),最后返回clone对象。可以像下面这样来使用createAnother()函数:

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"] 
};

var anotherPerson = createAnother(person); 
anotherPerson.sayHi(); //"hi"

这个例子中的代码基于person返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法,而且还有自己的sayHi()方法。
在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。前面示 范继承模式时使用的object()函数不是必需的;任何能够返回新对象的函数都适用于此模式。
使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一 点与构造函数模式类似。

寄生组合式继承

组合继承是JS最常用的继承模式;不过,它也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。

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);
};

在第一次调用SuperType构造函数时,SubType.prototype会得到两个属性:namecolors;它们都是SuperType的实例属性,只不过现在位于SubType 的原型中。当调用SubType构造函数时,又会调用一次SuperType构造函数,这 一次又在新对象上创建了实例属性namecolors。于是,这两个属性就屏蔽了原型中的两个同名属性。
有两组namecolors属性:一组在实例上,一组在SubType原型中。这就是调用两次SuperType构造函数的结果。好在我们已经找到了解决这个问题方法——寄生组合式继承。
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //创建对象 
    prototype.constructor = subType; //增强对象 
    subType.prototype = prototype; //指定对象 
}

这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性,从而弥补因重写原型而失去的默认的constructor属性。
最后一步,将新创建的对象(即副本)赋值给子类型的原型。这样,我们就可以用调用inheritPrototype()函数的语句,去替换前面例子中为子类型原型赋值的语句了,例如:

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);
};


这个例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用instanceofisPrototypeOf()。寄生组合式继承是引用类型最理想的继承范式。

JavaScript
Web note ad 1