第六章 面向对象的程序设计

6.1理解对象

ECMA-262定于对象为:无序属性的集合，其属性可以包含基本值、对象或者函数。

创建自定义对象的最简单方式（早期）：

  var person=new Object();
        person.name="Nicholas";
        person.age=29;
        person.job="Software Engineer";
        person.sayName=function(){
            alert(this.name);
        };

现在一般使用对象字面量语法创建对象

var person={
            name:"Nicholas",
            age:29,
            job:"Software Enginner",
            sayName:function(){
                alert(this.name);
            }
        };

6.1.1 属性类型

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

1.数据属性

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

[[Configurable]]:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特征，或者能否把属性修改为访问器属性。那些直接在对象上定义的属性，它们的这个属性默认值为true。

[[Enumerable]]:表示能否通过for-in循环返回属性。那些直接在对象上定义的属性，它们的这个属性默认值为true。

[[Writable]]:表示能否修改属性的值。那些直接在对象上定义的属性，它们的这个属性默认值为true。

[[Value]]:包含这个属性的数据值。读取属性值得时候，从这个位置读；写入属性值得时候，把新值保存在这个位置。这个特性的默认值为undefined。

如果要修改属性的默认特性，必须使用ECMAScript5的Object.defineProperty()方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符对象的属性必须是：configurable、enumerable、writable和value。设置其中的一个或多个值，可以修改对应的特征值。例如：

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

上例中的person.name属性是只读的，这个属性的值是不能被修改的。如果尝试为它指定新值，则在非严格模式下，赋值操作将被忽略；在严格模式下，赋值操作会导致抛出错误。

在调用Object.defineProperty()方法时，如果不指定，configurable、enumerable、writable特性的默认值都是false.

2.访问器属性

访问器属性不包含数据值：它们包含一对儿getter和setter函数（非必需）。

读取访问器的属性时，对调用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){
                this._year=newValue;
                this.edition+=newValue-2004;
            }
        });
        book.year=2005;   
        alert(book.edition); //2

 不一定非要同时指定getter和setter。只指定getter意味着属性是不能写的。没有指定setter函数的属性不能够读。

6.1.2 定义多个属性

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

以上代码在book对象上定义了两个数据属性(_year和edition)和一个访问器属性(year)。

6.1.3 读取属性的特性

Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象。

　　　　 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"

6.2创建对象

使用Object构造函数或对象字面量都可以用来创建单个对象，但是同一个借口需要创建多个对象，会产生大量的重复代码。

6.2.1工厂模式

    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 构造函数模式（可用来创建特定类型的对象）

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

按照惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

以这种方式调用构造函数实际上会经历以下4个步骤：

①创建一个新对象

②将构造函数的作用域赋给新对象（因此this就指向这个新对象）

③执行构造函数中的代码（为这个新对象添加属性）

④返回新对象

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

构造函数存在的问题：

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

    function Person(name,age,job){
            this.name=name;
            this.age=age;
            this.job=job;
            this.sayName=new Function("alert(this.name);");
          }

从这个角度来看构造函数，发现每一个Person实例都包含一个不同的Function实例（以显示name属性）的本质。

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

创建两个完全同样任务的Function实例是没有必要的。因此可以通过把函数定义转移到构造函数外部来解决这个问题。

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");
console.log(person1.sayName==person2.sayName); //true

虽然这样解决了两个函数做同一件事的问题，可是依然存在新的问题：在全局作用域中定义的函数在实际上却只能被某个对象(person1,person2)调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很过方法，那么就要定义很多全局函数，于是我们这个自定义的引用函数就丝毫没有封装性可言。这时我们需要通过原型模式来解决。

6.2.3原型模式

我们创建的每一函数都有一个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"
console.log(person1.sayName==person2.sayName);  //true

 更常见的做法

function Person(){}
       Person.prototype={
　　　　　　 constructor:Person,   //必须重新指定（此时可枚举）
           name:"Nicholas",
           age:29,
           job:"Software Engineer",
           sayName:function(){
               alert(this.name);
           }
       };

在上面代码中，我们将Person.prototype设置为一个以对象字面量形式创建的新对象。因此，constructor属性不再指向Person了。

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

 使用原型模式也存在着缺点。首先，它省略了为构造函数传递初始化参数的环节。这会导致所有实例在默认情况下都将取得相同的属性值。另外最重要的是，原型中所有的属性是被实例所共享的，这对于包含引用类型的属性来说，就会产生问题，看下面的例子。

   function Person(){
    }
    Person.prototype={
        constructor:Person,
        name:"Nicholas",
        age:29,
        job:"Software Engineer",
        friends:["Sbelby","Court"],
        sayName:function(){
            alert(this.name);
        }
    };
    var person1=new Person();
    var person2=new Person();
    person1.friends.push("Van");
    alert(person1.friends);   //"Sbelby","Court"，"Van"
    alert(person2.friends);   //"Sbelby","Court"，"Van"

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

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

在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的。这种构造函数和原型混成的模式，是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。

6.2.5动态原型模式

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() //"Nicholas"

这里只在sayName()方法不存在的情况下，才会将它添加到原型中。这段代码只会在初次调用构造函数时才会执行。此后，原型已经完成初始化，不需要再做什么修改了。

6.2.6 寄生构造函数模式

这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。从表面上看，这个函数很像是典型的构造函数。

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 person1=new Person("Nicholas",29,"Software Engineer");

person1.sayName(); //"Nicholas"

除了使用new操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。

构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

 6.2.7 稳妥构造函数模式

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

 6.3继承

6.3.1原型链

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;
}
var instance =new SubType();
alert(instance.getSuperValue()); //true

注意instance.constructor现在指向的是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);   //第二次调用SuperType()
    this.age=age;
}

  SubType.prototype=new SuperType();     //第一次调用SuperType()
  SubType.prototype.constructor=SubType;
  SubType.prototype.sayAge=function(){
      alert(this.age);
  }
  var instance=new SubType("Nicholas",29);

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

不过我们已经解决了这个方法——寄生组合式继承

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

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

function SuperType(name){
    this.name=name;
    this.colors=["red","blue","green"];
    console.log(222);
}

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 instance = new SubType("Nicholas",29);

这个例子的高效率体现在它值调用了一次SuperType构造函数，并且避免了在SubType.prototype上面创建不必要的，多余的属性。