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