JavaScript中的prototype

JavaScript中的prototype

• 
  1、prototype

  在JavaScript中並沒有類的概念，但JavaScript中的確可以實現重載，多態，繼承。這些實現其實方法都可以用JavaScript中的引用和變數範圍結合prototype來解釋。

  2、Simple Example

  var Blog = function( name, url ){    this.name = name;    this.url = url;};Blog.prototype.jumpurl = '';Blog.prototype.jump = function(){    window.location = this.jumpurl;};/* *等同於Blog.prototype = {    jumpurl : '',    jump : function(){        window.location = this.jumpurl;    }};*/var rainman = new Blog('rainman', 'http://rainman.cnblogs.com');var test = new Blog('test', 'http://test.cnblogs.com');

  這是一個非常簡單的例子，但卻可以很好的解釋prototype內在的一些東西，先看的記憶體配置：
  

  通過可以看到下面這些內容：

  • prototype只是函數的一個屬性，該屬性的類型是一個對象。
  • 記憶體配置狀況：
    函數Blog擁有一個prototype屬性，而prototype屬性擁有一個變數和一個函數；
    test和rainman兩個變數都分別有name和url兩個變數；
    test和rainman兩個變數都有一個jumpUrl變數和一個jump函數，但是並沒有分配記憶體，它們是對Blog.protype中的引用
    3、擴充1：Website.prototype = Blog.prototype

    var Blog = function( name, url ){    this.name = name;    this.url = blogurl;};Blog.prototype.jumpurl = '';Blog.prototype.jump = function(){    window.location = this.jumpurl;};var rainman = new Blog('rainman', 'http://rainman.cnblogs.com');var test = new Blog('test', 'http://test.cnblogs.com');var Website = function(){};Website.prototype = Blog.prototype;var mysite = new Website();

    通過可以看到下面這些內容：

    • "Website.prototype = Blog.prototype;"：Website的prototype並沒有分配記憶體，只是引用了Blog的prototype屬性。
    • mysite的兩個屬性也沒有分配記憶體，也只是分別引用了Blog.prototype.jumpurl和Blog.prototype.jump
      4、擴充2：Website.prototype = new Blog()

      var Blog = function(){};Blog.prototype.jumpurl = '';Blog.prototype.jump = function(){    window.location = this.jumpurl;};var Website = function(){};Website.prototype = new Blog();var mysite = new Website();

      通過可以看到下面這些內容：

      • Website的prototype屬性，只是Blog的一個執行個體（ 同rainman=new Blog(); ）;因此Website的prototype屬性就具有了jumpurl變數和jump方法了。
      • mysite是Website的一個執行個體，它的jumpurl和jump方法是繼承自Website的prototype，而Web.prototype繼承自Blog.prototype（這裡與其說是繼承，不如說是引用）
      • 整段程式在啟動並執行過程中，記憶體中只分配了一個jumpurl變數和一個jump方法5、new運算子

        JavaScript中new運算子是建立一個新對象。使用方法：

        new constructor[(arguments)]

        其中constructor是必選項。對象的建構函式。如果建構函式沒有參數，則可以省略圓括弧。
        arguments是可選項。任意傳遞給新物件建構函數的參數。
        
        JavaScript中new運算子說明
        new 運算子執行下面的任務：
        建立一個沒有成員的對象。
        為那個對象調用建構函式，傳遞一個指標給新建立的對象作為 this 指標。
        然後建構函式根據傳遞給它的參數初始化該對象。
        樣本
        下面這些是有效 new 運算子的用法例子。

        my_object = new Object;
        my_array = new Array();
        my_date = new Date("Jan 5 1996");

        
        
        6、其它
        • 在絕大多數JavaScript版本中，JS引擎都會給每個函數一個空的原型對象，即prototype屬性。