每天一篇javascript學(xué)習(xí)小結(jié)（面向?qū)ο缶幊蹋?/h1>

 更新時(shí)間：2015年11月20日 08:54:09   作者：史洲宇  

這篇文章主要介紹了javascript中的面向?qū)ο缶幊讨R(shí)點(diǎn)，對(duì)面向?qū)ο缶幊踢M(jìn)行概述，以及各種方法進(jìn)行整理，感興趣的小伙伴們可以參考一下

1、面向?qū)ο蟮墓S方法

 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");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"

工廠模型的方法的缺點(diǎn)是會(huì)產(chǎn)生大量重復(fù)代碼！

2、構(gòu)造函數(shù)模式創(chuàng)建對(duì)象

 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");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //false  

 使用new關(guān)鍵字創(chuàng)建對(duì)象會(huì)經(jīng)歷以下四個(gè)過(guò)程

• 1、創(chuàng)建一個(gè)新對(duì)象
• 2、將構(gòu)造函數(shù)的作用域賦給一個(gè)新對(duì)象（因此this就指向了這個(gè)新對(duì)象）
• 3、執(zhí)行構(gòu)造函數(shù)的方法（為這個(gè)新對(duì)象賦值）
• 4、返回新對(duì)象

3、將構(gòu)造函數(shù)當(dāng)函數(shù)用

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
    alert(this.name);
   };
  }
  
  var person = new Person("Nicholas", 29, "Software Engineer");
  person.sayName(); //"Nicholas"
  
  Person("Greg", 27, "Doctor"); //adds to window
  window.sayName(); //"Greg"
  
  var o = new Object();
  Person.call(o, "Kristen", 25, "Nurse");
  o.sayName(); //"Kristen"

構(gòu)造函數(shù)當(dāng)做函數(shù)使用就和普通的函數(shù)沒有任何不同，它屬于window對(duì)象下面添加的方法而已。由于構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)際上是創(chuàng)建一個(gè)新對(duì)象，因此在本質(zhì)上兩者還是不一樣的，還是分離的，他們的方法還是不一樣的！

4、將共有的方法方法全局解決不一致的問題

 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");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //true  

雖然上面的方法解決了一致的問題，但是定義的全局的方法本身屬于window，那么局部和全局就沒有分開！所以這個(gè)方法使用的并不多見！也不建議使用。

5、原型模式

我們創(chuàng)建的任何的一個(gè)函數(shù)都有一個(gè)原型對(duì)象，這個(gè)屬性是一個(gè)指針，它指向一個(gè)對(duì)象，而這個(gè)對(duì)象的作用是可以有特定的類型的所有的實(shí)例共享的方法！

 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"
  
  alert(person1.sayName == person2.sayName); //true
  
  alert(Person.prototype.isPrototypeOf(person1)); //true
  alert(Person.prototype.isPrototypeOf(person2)); //true
  
  //only works if Object.getPrototypeOf() is available
  if (Object.getPrototypeOf){
   alert(Object.getPrototypeOf(person1) == Person.prototype); //true
   alert(Object.getPrototypeOf(person1).name); //"Nicholas"
  }

理解原型

無(wú)論什么時(shí)候只要是創(chuàng)建了一個(gè)函數(shù)，就會(huì)創(chuàng)建一個(gè)原型屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)的情況下，原型對(duì)象都會(huì)包含一個(gè)constructor（構(gòu)造函數(shù)屬性），這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針！

屬性讀取的順序

每當(dāng)代碼讀取某個(gè)對(duì)象的屬性時(shí)候，都會(huì)執(zhí)行一次搜索，目標(biāo)是具有給定名字的屬性，搜索從對(duì)象的實(shí)例本身開始查找，如有則返回，沒有則繼續(xù)搜索該對(duì)象的原型鏈，直至搜索到原型鏈的最外層！

 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();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" 來(lái)自實(shí)例
  alert(person2.name); //"Nicholas" 來(lái)自原型

如果刪除了這個(gè)元素的實(shí)例屬性

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();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" ?from instance
  alert(person2.name); //"Nicholas" ?from prototype
  
  delete person1.name;
  alert(person1.name); //"Nicholas" - from the prototype

6、hasOwnProperty方法

這個(gè)方法可以檢測(cè)一個(gè)屬性是否存在于實(shí)例中，還是存在于原型中！hasOwnProperty是從Object繼承來(lái)的，只要給定屬性存在于對(duì)象實(shí)例中，才會(huì)返回true.

 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();
    var person2 = new Person();
    
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true
    
    person1.name = "Greg";
    alert(person1.name);  //"Greg" ?from instance
    alert(person1.hasOwnProperty("name")); //true
    alert("name" in person1); //true
    
    alert(person2.name);  //"Nicholas" ?from prototype
    alert(person2.hasOwnProperty("name")); //false
    alert("name" in person2); //true
    
    delete person1.name;
    alert(person1.name);  //"Nicholas" - from the prototype
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true

7、Object.keys() 可枚舉屬性方法

這個(gè)方法接收一個(gè)對(duì)象作為參數(shù)，返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組

 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.keys(Person.prototype);
    alert(keys);  //"name,age,job,sayName"
如果想得到所有實(shí)例的屬性，無(wú)論它是否可以枚舉都可以使用這個(gè)方法來(lái)獲取
 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.getOwnPropertyNames(Person.prototype);
    alert(keys);  //"constructor,name,age,job,sayName"

此方法高版本瀏覽器才支持

8、簡(jiǎn)單的原型寫法

 function Person(){
    }
    
    Person.prototype = {
      name : "Nicholas",
      age : 29,
      job: "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //false
    alert(friend.constructor == Object); //true

重寫了原型就等于將默認(rèn)的原型方法覆蓋，那么同樣的構(gòu)造方法也會(huì)被重寫，重寫的構(gòu)造方法指向了Object對(duì)象！而不是原來(lái)的對(duì)象Person

如果還是想指向之前的構(gòu)造方法，可以顯示的指定

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

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //true
    alert(friend.constructor == Object); //false

9、原型方法的動(dòng)態(tài)添加

function Person(){
    }
    
    Person.prototype = {
      constructor: Person,
      name : "Nicholas",
      age : 29,
      job : "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };
    
    var friend = new Person();
    
    Person.prototype.sayHi = function(){
      alert("hi");
    };
    
    friend.sayHi();  //"hi" ?works!

10、原生對(duì)象的原型方法

alert(typeof Array.prototype.sort);     //"function"
    alert(typeof String.prototype.substring);  //"function"

    String.prototype.startsWith = function (text) {//修改原生對(duì)象的原型方法
      return this.indexOf(text) == 0;
    };
    
    var msg = "Hello world!";
    alert(msg.startsWith("Hello"));  //true

11、組合使用構(gòu)造函數(shù)和原型模式創(chuàng)建對(duì)象

//構(gòu)造函數(shù)模式
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);  //"Shelby,Court,Van"
    alert(person2.friends);  //"Shelby,Court"
    alert(person1.friends === person2.friends); //false
    alert(person1.sayName === person2.sayName); //true

12、動(dòng)態(tài)原型模式

function Person(name, age, job){
    
      //properties
      this.name = name;
      this.age = age;
      this.job = job;
      
      //methods
      if (typeof this.sayName != "function"){
      
        Person.prototype.sayName = function(){
          alert(this.name);
        };
        
      }
    }

    var friend = new Person("Nicholas", 29, "Software Engineer");
    friend.sayName();

13、寄生構(gòu)造函數(shù)模式

 function Person(name, age, job){
var o = new Object();//依賴全局對(duì)象初始化一個(gè)對(duì)象，然后再返回這個(gè)對(duì)象
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}; 
return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

function SpecialArray(){ 

//create the array
var values = new Array();

//add the values
values.push.apply(values, arguments);

//assign the method
values.toPipedString = function(){
return this.join("|");
};

//return it
return values; 
}

var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

alert(colors instanceof SpecialArray);

上訴方法有一點(diǎn)說(shuō)明下，由于它是依賴外層對(duì)象來(lái)創(chuàng)建一個(gè)新對(duì)象，因此不能依賴 instanceof方法來(lái)確定屬性和方法的來(lái)源！它實(shí)際上和構(gòu)造函數(shù)的沒有關(guān)系！

14、穩(wěn)妥構(gòu)造函數(shù)模式

 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"

此方法不依賴任何new this 關(guān)鍵符！如果要訪問對(duì)象的方法和屬性，只能通過(guò)對(duì)象已經(jīng)定義好的方法來(lái)獲?。?/p>

15、繼承
javascript實(shí)現(xiàn)繼承是通過(guò)原型鏈來(lái)實(shí)現(xiàn)的

function SuperType(){
      this.property = true;//定義一個(gè)屬性
    }
    
    SuperType.prototype.getSuperValue = function(){//定義的原型方法
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //true
    
    alert(instance instanceof Object);   //true
    alert(instance instanceof SuperType);  //true
    alert(instance instanceof SubType);   //true

    alert(Object.prototype.isPrototypeOf(instance));  //true
    alert(SuperType.prototype.isPrototypeOf(instance)); //true
    alert(SubType.prototype.isPrototypeOf(instance));  //true
SubType繼承SuperType的方法和屬性，因此當(dāng)instance可以直接調(diào)用SuperType的方法！
 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //new method
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    //override existing method
    SubType.prototype.getSuperValue = function (){
      return false;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //false

上面的例子說(shuō)明，重寫的原型會(huì)覆蓋之前繼承的原型，最后返回的往往不是預(yù)期的效果

 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //使用字面量添加的方法導(dǎo)致上面的方法失效了
    SubType.prototype = {
      getSubValue : function (){
        return this.subproperty;
      },
    
      someOtherMethod : function (){
        return false;
      }
    }; 
    
    var instance = new SubType();
    console.log(instance);
    alert(instance.getSuperValue());  //error!

下面的例子也說(shuō)明重寫原型帶來(lái)的風(fēng)險(xiǎn)

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

    function SubType(){      
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green,black"

原型共享導(dǎo)致兩個(gè)不同的對(duì)象調(diào)用的同一個(gè)數(shù)據(jù)
16、借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)繼承

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

    function SubType(){ 
      //inherit from SuperType
      SuperType.call(this);
    }

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green"

傳遞參數(shù)

 function SuperType(name){
      this.name = name;
    }

    function SubType(){ 
      //inherit from SuperType passing in an argument
      SuperType.call(this, "Nicholas");
      
      //instance property
      this.age = 29;
    }

    var instance = new SubType();
    alert(instance.name);  //"Nicholas";
    alert(instance.age);   //29

17、組合繼承方式

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

18、原型繼承

 function object(o){
      function F(){}
      F.prototype = o;
      return new F();
    }
    
    var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
    };
    
    var anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");

19、寄生組合式繼承

 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 instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    instance1.sayName();   //"Nicholas";
    instance1.sayAge();    //29
    
    
    var instance2 = new SubType("Greg", 27);
    alert(instance2.colors); //"red,blue,green"
    instance2.sayName();   //"Greg";
    instance2.sayAge();    //27

以上就是今天的javascript學(xué)習(xí)小結(jié)，之后每天還會(huì)繼續(xù)更新，希望大家繼續(xù)關(guān)注。

您可能感興趣的文章:

• js實(shí)現(xiàn)對(duì)ajax請(qǐng)求面向?qū)ο蟮姆庋b
• 詳解JavaScript基于面向?qū)ο笾^承實(shí)例
• 詳解JavaScript基于面向?qū)ο笾^承
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（2）
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（1）
• Javascript簡(jiǎn)單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
• 初步了解javascript面向?qū)ο?/a>
• js面向?qū)ο笾Ｒ妱?chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
• JavaScript的面向?qū)ο缶幊袒A(chǔ)
• 簡(jiǎn)單分析javascript面向?qū)ο笈c原型
• JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析

• javascript學(xué)習(xí)小結(jié)
• 面向?qū)ο缶幊?/a>

相關(guān)文章

• 

  原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁(yè)版游戲完整實(shí)例

  這篇文章主要介紹了原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁(yè)版游戲完整實(shí)例,可實(shí)現(xiàn)自主選擇游戲難度進(jìn)行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁(yè)面元素的操作技巧,需要的朋友可以參考下

  2015-05-05
• 

  ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)

  echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對(duì)象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下

  2022-11-11
• 

  JS獲取IE版本號(hào)與HTML設(shè)置IE文檔模式的方法

  下面小編就為大家?guī)?lái)一篇JS獲取IE版本號(hào)與HTML設(shè)置IE文檔模式的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2016-10-10
• 

  javascript 兩個(gè)字符串比較函數(shù)

  比較兩個(gè)字符串中不同的字符

  2009-05-05
• 

  javascript實(shí)現(xiàn)對(duì)話框功能警告（alert 消息對(duì)話框）確認(rèn)（confirm 消息對(duì)話框）

  這篇文章主要介紹了javascript：警告（alert 消息對(duì)話框），確認(rèn)（confirm 消息對(duì)話框）的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

  2019-05-05
• 

  基于zepto.js實(shí)現(xiàn)登錄界面

  這篇文章主要為大家詳細(xì)介紹了使用zepto.js，純JS寫的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2017-10-10
• 

  原生js封裝添加class,刪除class的實(shí)例

  下面小編就為大家?guī)?lái)一篇原生js封裝添加class,刪除class的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助

  2017-11-11
• 

  javascript動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格實(shí)現(xiàn)代碼

  動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格的方法有很多，本文為大家介紹下利用javascript是如何實(shí)現(xiàn)的

  2014-02-02
• 

  JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例

  下面小編就為大家分享一篇JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

  2017-12-12
• 

  老生常談JavaScript 正則表達(dá)式語(yǔ)法

  下面小編就為大家?guī)?lái)一篇老生常談JavaScript 正則表達(dá)式語(yǔ)法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2016-08-08

最新評(píng)論