JavaScript面向對象程序設計

理解對象

• 通用屬性

  </li>

  1. configurable: 表示能否修改屬性的特性或可以被刪除

     </li>

  2. Enumerable：表示能否通過 for-in 循環遍歷屬性

     </li> </ol>

  3. data descriptor：

     </li>

     1. Writable：表示能否修改屬性的值

        </li>

     2. Value：包含這個屬性的值

        </li> </ol>

     3. accessor descriptor

        </li>

        1. get： 獲取屬性值

           </li>

        2. set： 設置屬性值

           </li> </ol> </ul>

           備注：data descriptor和accessor descriptor 不能同時存在，如果同時存在會報[TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified]

           在JavaScript中創建對象的方式

           1.  工廠模式

           function createPerson(name, age, job) {
               var person = new Object();
               person.name = name;
               person.age = age;
               person.job = job;
               person.toString = function() {
                   console.log("name:"+name+", age:"+age+", job:"+job);
               }
           
           
           return person;
           
           }
           var person = createPerson("David", 22, "Engineer");
           person.toString();</pre> 
            
           
           2.  構造函數模式
           
           function Person(name, age, job) {
               this.name = name;
               this.age = age;
               this.job = job;
               this.toString = sayInfo;
           }
           
           function sayInfo() {
               console.log("name:"+this.name+", age:"+this.age+", job:"+this.job);
           }
           var person = new Person("David", 33, "Artist");
           person.toString();</pre> 
            
           
           3.  原形模式
           
           function Person(name, age, job) {
               this.name = name;
               this.age = age;
               this.job = job;
               if(typeof this.sayName != "function") {
                   Person.prototype.sayName = function() {
                       console.log(this.name);
                   }
               }
           }
           
           var person = new Person("David", 32, "Engineer");
           person.sayName();</pre> 
            
           
           JavaScript中的對象繼承模式
           
           1.  原型鏈：
           
           function SuperType() {
               this.superProperty = true;
               this.colors = ["red", "blue"];
           }
           SuperType.prototype.saySuperProperty = function() {
               console.log(this.superProperty);
           }
           function SubType() {
               this.subProperty = false;
           }
           
           SubType.prototype = new SuperType();
           SuperType.prototype.saySubProperty = function() {
               console.log(this.subProperty);
           }
           var sb1 = new SubType();
           var sb2 = new SubType();
           sb1.saySuperProperty();  //true
           sb1.saySubProperty();    //false
           sb2.saySuperProperty();  //true
           sb2.saySubProperty();    //false
           sb1.colors.push("white");
           console.log("sb1 "+sb1.colors);   // "sb1 red,blue,white"
           console.log("sb2 "+sb2.colors);   // "sb2 red,blue,white"</pre> 
            
           
           2.  借用構造函數：
           
           function say_hello(){
                alert("Hello RunJS!");
           }
           
           function SuperType(name) {
               this.name = name;
               this.colors = ["red","yellow"];
           }
           function SubType(name) {
               SuperType.call(this);
           }
           var sb1 = new SubType("David");
           var sb2 = new SubType("Bill");
           sb1.colors.push("Black");
           sb2.colors.pop();
           console.log("sb1.colors: "+sb1.colors);  // "sb1.colors: red,yellow,Black"
           console.log("sb2.colors: "+sb2.colors);  // "sb2.colors: red"</pre> 
            
           
           3.  組合繼承：
           
           function say_hello(){
                alert("Hello RunJS!");
           }
           
           function SuperType(name) {
               this.name = name;
               this.colors = ["red","yellow"];
           }
           SuperType.prototype.sayName = function() {
               console.log(this.name);
           }
           function SubType(name) {
               SuperType.call(this, name);
           }
           SubType.prototype = new SuperType();
           var sb1 = new SubType("David");
           var sb2 = new SubType("Bill");
           sb1.sayName();  //"David"
           sb2.sayName();  //"Bill"
           sb1.colors.push("Black");
           sb2.colors.pop();
           console.log("sb1.colors: "+sb1.colors);  // "sb1.colors: red,yellow,Black"
           console.log("sb2.colors: "+sb2.colors);  // "sb2.colors: red"</pre> 
            
           
           4.  原形式繼承：可以在不必預先定義構造函數的情況下實現繼承，其本質是執行對給定對象的淺復制。而復制得到的副本還可以得到進一步改造。
           
           function object(o){
               function F(){}
               F.prototype = o;
               return new F();
           }
           
           var person = {
               name: "Nicholas", friends: ["Shelby", "Court", "Van"]
           };
           // var anotherPerson = object(person);
           var anotherPerson = Object.create(person);
           anotherPerson.name = "Greg";
           anotherPerson.friends.push("Rob");
           // var yetAnotherPerson = object(person);
           var yetAnotherPerson = Object.create(person);
           yetAnotherPerson.name = "Linda";
           yetAnotherPerson.friends.push("Barbie");
           alert(person.friends); //”Shelby,Court,Van,Rob,Barbie”</pre> 
            
           
           5.  寄生式繼承：與原形式繼承非常相似，也是基于某個對象或某些信息創建一個對象，然后增強對象，最后返回對象。為了解決組合繼承模式由于多次調用超類型構造函數而導致的低效率問題，可以將這個模式與組合繼承一起使用。
           
           function object(o){
               function F(){}
               F.prototype = o;
               return new F();
           }
           function createAnother(original){
               var clone = object(original); //create a new object by calling a function
               clone.sayHi = function(){ //augment the object in some way
                   alert("hi");
               };
               return clone; //return the object
           }
           var person = {
               name: "Nicholas",
               friends: ["Shelby", "Court", "Van"]
           };
           var anotherPerson = createAnother(person);
           anotherPerson.sayHi(); //"hi"
            
            
           
           6.  寄生組合式繼承：集寄生式繼承和組合繼承的優點于一身，是實現基于類型繼承的最有效方式。
           
           function object(o){
               function F(){}
               F.prototype = o;
               return new F();
           }
           function inheritPrototype(subType, superType){
               var prototype = object(superType.prototype); //create object
               prototype.constructor = subType; //augment object
               subType.prototype = prototype; //assign object
           }
           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);
           };
           
           var sb1 = new SubType("David", 15);
           sb1.sayName();
           sb1.sayAge();</pre>來自：http://my.oschina.net/u/1382598/blog/291525