面向对象的程序设计

一.理解对象

1.ECMAScript中对象是一组没有特定顺序的值。每个属性或方法都有一个名字，而每个名字都映射到一个值。

2.创建对象最简单方式(对象字面量语法)：

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

3.属性类型

①数据属性

(1)数据属性包含一个数据值的位置，在这个位置可以读取和写入值。

(2)4个描述其行为的特性：(由于是内部值，要放到两对方括号中)

[[Configurable]]  能否用delete删除属性，能否修改属性的特性

[[Enumerable]]   能否通过for-in循环返回属性

[[Writable]]        能否修改属性的值

[[Value]]            属性的数据值

[[Configurable]]，[[Enumerable]]，[[Writable]]特性默认为true，[[Value]]特性被设置为指定的值

(3)Object.defineProperty()方法用于修改属性默认的特性

三个参数：Object.defineProperty(属性所在的对象，"属性的名字"，{描述符对象})

var person={};
Object.defineProperty(person,"name",{
    writable:false,
    value:"liu" 
});
alert(person.name); //"liu"
person.name="zhong";
alert(person.name); //"liu"  无法修改

(4)调用Object.defineProperty()方法时，configurable,enumerable,writable特性默认都是false

(5)可以多次调用Object.defineProperty()修改同一属性，但把configurable设置为false之后，将只能修改writable特性

②访问器属性

(1)不包含数据值，包含一对getter和setter函数。在读取访问器属性时调用getter，返回有效的值。在写入访问器属性时，调用setter函数并传入新值，负责如何处理数据

(2)4个特性：

[[Configurable]]

[[Enumerable]]

[[Get]]

[[Set]]

(3)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

(4)不一定同时指定getter setter

4.定义多个属性

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

    }
});

5.读取属性的特性

Object.getOwnPropertyDescriptor(属性所在对象，"属性名称”)

返回一个对象

二.创建对象

Object构造函数和对象字面量可以创建单个对象，但多个相似对象会产生大量重复代码

1.工厂模式

function creatPerson(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
        alert(this.name);
    }
    return o;
}
var person=creatPerson("liu",21);

无法知道一个对象的类型

2.构造函数模式

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    };      //构造函数问题所在 var sayName=new Function("alert(this.name)");
}
var person1=new Person("liu",21);
var person2=new Person("zhong",22);

(1)构造函数第一个字母大写

(2)构造函数也是函数，调用方法：

①通过new操作符，作为构造函数

②不使用new操作符，作为普通函数

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

(3)构造函数的问题

①每个方法都要在每个实例上重新创建一遍，所以每个Person实例都会包含一个不同的Function实例，会导致不同的作用域链和标识符解析

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

②将函数定义转移到函数外部，在构造函数内部，将sayName属性设置为等于全局的sayName函数，但全局作用域中定义的函数只能被某个对象调用。而且有多个方法时要定义多个全局函数。

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=sayName;
}
function sayName(){
    alert(this.name);
}

3.原型模式

prototype(原型)属性：每个函数都有一个prototype属性，是一个指针，指向一个对象，这个对象包含特定类型的所有实例共享的属性和方法。即prototype属性指向函数的原型对象

function Person(){}
person.prototype.name="liu";
person.prototype.age=21;
person.prototype.sayName=function(){
    alert(this.name);
};
var person1=new Person();
person1.sayName(); //"liu"
var person2=new Person();
person2.sayName(); //"liu"
alert(person1.sayName==person2.sayName); //true

(1)理解原型对象

①Person.prototype指向构造函数的原型对象

Person.prototype.constructor指向prototype所在函数 即构造函数Person

创建的实例包含[[Prototype]](内部属性)指向构造函数的原型对象

②isPrototypeOf()方法

[[Prototype]]指向调用isPrototypeOf()方法的对象 返回true

alert(Person.prototype.isPrototype(person1)); //true

③Object.getPrototypeOf()

通过实例取得一个对象的原型：alert(Object.getPrototype(person1).name); //”liu”

④属性的搜索过程

先搜索对象实例本身，若找到了给定名字的属性则返回属性的值，若没有，搜索原型对象

在实例中添加属性会屏蔽原型中的同名属性，但不会修改原型中的属性，因为先搜索对象实例本身

delete操作符可以删除以定义的实例中的属性，从而使用原型中的属性

⑤hasOwnProperty()检测属性存在于实例中还是原型中，存在实例中返回true

alert(person1.hasOwnProperty(“name”)); //false

(2)原型与in操作符

①单独使用：对象能访问给定属性时返回true，无论属性存在于实例中还是原型中

alert(“name” in person1); //true

与hasOwnProperty()配合使用

function hasPrototypeProperty(object,name){
    return !object.hasOwnProperty(name) && (name in object);
} //name属性存在且存在于原型中返回true

②for-in循环

返回所有能通过对象访问的，可枚举的属性

所有开发人员定义的属性都是可枚举的

bug：toString(),hasOwnPrpperty(),propertyIsEnumerable(),toLocaleString(),toString(),valueOf()  [[Enumerable]]默认为false 即不可枚举

③Object.keys()方法  //得到实例属性,原型属性呢？

接受一个对象作为参数

var keys=Object.keys(Person.prototype);

alert(keys); //”name,age,sayName”

④Object.getOwnPropertyNames()方法得到所有实例属性 //实例属性？那原型属性呢

var keys=Object.getOwnPropertyNames(Person.prototype);

alert(keys);

(3)简单的原型语法

function Person(){
}
Person.prototype={
    constructor:Person,/*本质上重写了prototype对象,所以constructor   
    name:"liu",         *属性变成了新对象的constructor属性，不再指向
    age:29,             */Person函数(指向Object)，可将其设为Person
    sayName:function(){
        alert(this.name);
    }
};

(4)原型的动态性

可以随时为原型添加属性和方法，但重写整个原型对象，实例的[[Prototype]]还是指向原来的原型对象

function Person(){
}
var person1=new Person();
Person.prototype={
    constructor:Person,   
    name:"liu",        
    age:29,             
    sayName:function(){
        alert(this.name);
    }
};
person1.sayName(); // error

(5)原生对象的原型

可以像修改自定义对象的原型一样修改原生对象的原型

String.prototype.start=function(text){
    return this.indexOf(text)==0;
};
var mes="hello world";
alert(mes.start("hello")); //true

(6)原型对象的问题

①不能为构造函数传递初始化参数

②原型中如果包含引用类型，修改一个实例对象的引用类型属性，会影响另一个实例对象

function Person(){
}
Person.prototype={
    friend:["jin","yang"]
};
var person1=new Person();
var person2=new Person();
person1.friend.push("liu");

alert(person1.friend); //"jin,yang,liu"
alert(person2.friend); //"jin,yang,liu" 会影响到person2实例对象

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

构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性

function Person(name,age){
    this.name=name;
    this.age=age;
    this.friend=["jin","yang"];
}

Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1=new Person("liu",21);

5.动态原型模式

6.寄生构造函数模式

7.稳妥构造函数模式

三.继承

ECMAScript通过原型链实现继承，让一个引用类型继承另一个引用类型的属性和方法

1.原型链

(1)原型链的构建：将一个类型的实例赋值给另一个构造函数的原型

实例中都包含一个指向原型对象的内部指针[[prototype]],实例赋值给另一个原型后，这个原型也将包含这个[[prototype]]指针，从而指向第一个原型对象，它的constructor属性也将指向第一个构造函数，存在于实例中的属性和方法，将存在于这个原型对象中

function SuperType(){
    this.property=true; //一个实例属性
}
SuperType.prototype.getSuperValue=function(){
    return this.property; //一个原型方法
};

function SubType(){
    this.subproperty=false; //一个实例属性
}

SubType.prototype=new SuperType(); //实现继承SuperType

SubType.prototype.getSubValue=function(){
    return this.subproperty;
};
var instance=new SubType();
alert(instance.getSuperValue()); //true 继承了SuperType原型对象中的方法 

(2)原型链扩展了原型搜索机制：①搜索实例②搜索SubType.prototype③搜索SuperType.prototype

(3)默认的原型Object

所有引用类型默认都继承了Object

所有函数的默认原型都是Object的实例，因此默认原型都包含一个内部指针，指向Object.prototype

(4)确定原型和实例的关系

instanceof操作符

alert(instance instanceof Object); //true instance是Object类型的实例

isPrototypeOf()方法

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

(5)重写或添加方法

给原型重写或添加方法的代码一定要放在替换原型的语句(一个类型的实例赋值给另一个构造函数的原型)之后

function SuperType(){
    this.property=true;
}
SuperType.prototype.getSuperValue=funtion(){
    return this.property;
};
function SubType(){
    this.subproperty=false;
}
SubType.property=new SuperType();  //替换原型
//添加新方法
SubType.prototype.getSubValue=function(){
    return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue=function(){
    return false;
};
var subinstance=new SubType();
alert(subinstance.getSuperValue()); //false 调用的重新写的方法

var superinstance=new SuperType();
alert(superinstance.getSuperValue()); //true 调用的原型中的方法

注意：不能使用对象字面量添加或重写原型方法，因为相当于重写了原型链(原型将包含Object的实例，而非SuperType的实例)

SubType.prototype=new SuperType();
SubType.prototype={
    getSubValue:function(){
        return this.subproperty;
    }
};  //不能用对象字面量法

(6)原型链问题

①包含引用类型的原型

原型继承实例属性后(即拥有了自己的一套属性 this指向的作用域)，这个原型的所有实例都将共享这个属性，如果这个这个属性是引用类型值，修改属性将影响所有实例

②在创建子类型的实例时，不能向超类型的构造函数中传递参数

2.借用构造函数

在子类型构造函数的内部调用超类型的构造函数。

function SuperType(){
    this.color=["red","blue"];
}
function SubType(){
    SuperType.call(this); //继承SuperType
}
var instance1=new SubType(); /*在新创建的SubType实例的环境下调用了
instance1.color.push("black");*SuperType构造函数，每个实例将拥有自己的  alert(instance1.color);       */color属性副本
//"red,blue,black"

var instance2=new SubType(); //this指向这个实例作用域
alert(instance.color); //"red,blue"

①传递参数

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

实际上在函数内部调用SuperType构造函数时，为SubType的实例设置了name属性

要在调用完构造函数之后，再为子类型中添加属性，防止被构造函数重写

②借用构造函数的问题

方法都在构造函数中定义，没法函数复用，而且在超类型的原型中定义的方法，对于子类型是不可见的，结果所有类型都只能使用构造函数模式

3.组合继承

使用原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性的继承

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

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

function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age=age;
}
//继承方法
SubType.prototype=new SuperTypr();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
    alert(this.age);
};

var instance=new SubType("liu",21);
instance.colors.push("green");
alert(instance.colors); //"red,blue,green"
instance.sayName(); //"liu"
instance.sayAge(); //21

var instance1=new SubType("zhong",22);
alert(instance1.colors); //"red,blue"
instance1.sayName(); //"zhong"
instance1.sayAge(); //22

SubType实例分别拥有了自己的属性：colors，age

相同的方法：sayName(),sayAge()

4.原型式继承

5.寄生式继承

6.寄生组合式继承