javascript 面向对象

理解对象

//两种简单创建对象的方式
var person = new Object ();
person.name = "nicholas";
person.age = 29;
person.job = "software engineer" ;
person.sayName = function () {
    alert (this. name);
};
var person1 = {
    name : "nicholas",
    age : 29,
    job : "software engineer",
    sayName : function () {
        alert (this. name);
    }
};

属性类型

数据属性

Configurable:是否能删除（delete），默认true。

Enumerable:是否能枚举，默认true。

Writable:是否能更改，默认true。

Value:属性的字面类型。

var person = {} ;
Object.defineProperty(person , "name", {
    writable : false,
    value : "nicholas"
});
alert(person.name ); //nicholas
person.name= "greg"; //由于writable为false，设置无效。
alert(person.name ); //nicholas

var person = {} ;
Object.defineProperty(person , "name", {
    configurable : false,
    value : "nicholas"
});
alert(person.name ); //nicholas
delete person.name; //由于configurable为false，删除无效。
alert(person.name ); //nicholas
//抛出错误
Object.defineProperty(person , "name", {
configurable : true,
value: "hello"
});

访问器属性

Configurable:

Enumerable:

Get:读取属性时所需要用到的函数。默认为undefined。

Set:写入属性时所需要用到的函数。默认为undefined。

//访问器属性
var book = {
    _year : 2004,
    edition : 1
};

Object.defineProperty(book , "year", {
    get : function () {
        return this. _year;
    } ,
    set : function (val) {
        if (val > 2004) {
            this. _year = val;
            this .edition++ ;
        }
    }
});
book.year= 2005;
alert(book.edition );

/在不支持ecmascript5（defineProperty方法）的浏览器中，定义setter，getter
book.__defineGetter__( "year",function (){
    return this ._year;
});
book.__defineSetter__( "year",function (year){
    if (year>2004){
        this. _year=year;
        this.edition ++;
    }
});

工厂模式

//工厂模式
function createPerson(name, age,job){
    var o={};
    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("aa" ,22, "student");

构造函数模式

优缺点

/构造函数模式
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( "aa",22 ,"student") ;

alert(person1.constructor ===Person) ; //true
alert(person1 instanceof Person ); //true
alert(person1 instanceof Object ); //true
//如果是工厂模式，为Object类型

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

原型方法

hasOwnProperty()方法，in 关键字。

//原型模式 
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 () ;

alert (person1. hasOwnProperty( "name" )); //false

alert ("name" in person1); //true

person1. name= "aa" ;
alert (person1.hasOwnProperty ( "name")) ; //true
alert ("name" in person1); //true

var prop= "name" ;
alert (hasPrototypeProperty (person1 ,prop)) ; //true
alert (hasPrototypeProperty2 (person1 ,prop)) ; //true

person1. name= "aa" ;
alert (hasPrototypeProperty (person1 ,prop)) ; //false
alert (hasPrototypeProperty2 (person1 ,prop)) ; //true

//简单判断是否是原型属性
function hasPrototypeProperty (obj, name){
    return !obj. hasOwnProperty(name)&&(name in obj) ;
}

function hasPrototypeProperty2 (obj, name){
    var propVal ,res= false; 
    if (obj.hasOwnProperty (name)){
        propVal=obj[name]; 
        delete obj[name]; 
    }
    if (name in obj){ 
        res= true;
    }
    if ( typeof propVal !== "undefined" ){
        obj[name]=propVal; 
    }
    return res ;
}

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

var p1= new Person () ;
p1. name= "p1name" ;
var p1keys= Object . keys(p1) ;
alert (p1keys); //name

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

更简单的原型语法

//原型的简写形式 
function Person () {
}
Person .prototype = {
    constructor : Person, //重新赋值构造函数，此时的enumerable属性改变为true， 
    // 可通过Object.defineProperty()方法正确构造
    age : 29, 
    job : "software engineer" ,
    sayName : function () { 
        alert ( this. name ); 
    }
};

原型链

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

原型式继承

//原型式继承 
function object (o){
    function F (){}
    F . prototype=o ;
    return new F() ;
}
var person={
    name : "nicholas", 
    friends :[ "shelby", "court" ,"van" ]
}
var person1= object(person) ;
person1. friends. push ("rob" ) ;
var person2= object (person); 
person2. friends. push ("linda" ) ;
alert (person2.friends ) ;

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

//组合使用构造函数和原型模式 
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. sayName() ;
person2. sayName() ;

//组合继承 
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

ecmascript5 中的Object.create()

//ecmascript5中的Object.create()与之类似; 
//Object.create(proto,props);
var person1= Object. create (person); 
person1. friends. push ("rob" ) ;
var person2= Object . create(person) ;
person2. friends. push ("linda" ) ;
var person3= Object . create(person , {
    name :{
        value : "greg"
    }
});
person3. friends. push ("barbie" ) ;
alert (person2.friends ) ;

寄生组合式

//寄生组合式继承 
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" ] ;
}
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 ); 
} ;

寄生构造函数

优缺点，

//寄生构造函数 
function SpecialArray (){
    var values= new Array () ;
    values. push .apply (values ,arguments) ; //调用values属性的方法
    values. toPipedString = function(){
        return this. join ("|" ) ;
    }
    return values ;
}
var colors= new SpecialArray ( "red", "blue" ,"yellow" ) ;
alert (colors.toPipedString ()) ; //red|blue|yellow

寄生式继承

//寄生式继承 
function createAnother (original){
    var clone= object(original) ;
    clone. sayHi = function(){
        alert ( "hi") ;
    } ;
    return clone; 
}
var person1= createAnother(person) ;
person1. sayHi() ;

稳妥构造函数

稳妥对象，

//稳妥方法 
function Person (name, age ,job){ 
    var o= new Object () ;

    //定义私有变量和属性 
    
    //添加方法
    o. sayName = function(){
        alert (name) ;
    } ;
    return o; 
}
var person1= Person( "aa" ,22 , "aaaa") ;
person1. sayName() ;