常見面試題之談一談原型在實際應用中的使用

我一直在思考， 寫博客是爲了什麼？終於有一天我想明白了: 思考， 表達，交流。

問: 談一談原型和構造函數在實際應用中的使用?

答: 原型和構造函數在jquery和zpeto中大量的被使用。

zepto的大概的流程是這樣的:

//創建一個自執行函數，避免全局變量被污染
(function(window) {
  // 聲明一個zepto對象
  var zepto = {};
  function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for(i=0;i<len;i++) {
      this[i] = dom[len];
    }
    this.length = len;
    this.selector = selector || ''
  }
  //Z方法new了一個Z的實例，說明Z是一個構造函數
  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }
  //init 函數將selector選中的類數組變成數組, 然後執行Z方法
  zepto.init = function (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelector(selector));
    return zepto.Z(dom, selector);
  }
  //$ 返回zepto初始化的方法
  var $ = function(selector) {
    return zepto.init(selector)
  }

  //給window一個$
  window.$ = $;
  $.fn = {
    css: function(key, val) {
      console.log(val)
    },
    html: function(val) {
      console.log(val)
    }
  }
  Z.prototype = $.fn
})(window)

jquery中的使用大致是這樣的:

(function(window) {
  //初始化$
  var jQuery = function(selector) {
   return  new jQuery.fn.init(selector);
  }

  //定義fn方法

  jQuery.fn = {
    css: function(key, val) {
      alert('css')
    },
    html: function(val) {
      return 'html'
    }
  }
  var init = jQuery.fn.init = function(selector) {
    var slice = Array.prototype.slice;
    var dom = document.querySelectorAll(selector);

    var i, len = dom ? dom.length : 0;
    for (i=0;i<len;i++) {
      this[i] = dom[i]
    }
    this.length = len;
    this.selector = selector;
  }
  //把fn方法掛載到init的prototype上
  console.log(jQuery.fn)
  init.prototype = jQuery.fn
  //創建$方法
  window.$ = jQuery;
})(window)

問題: 談一談jquery的插件機制(講講原型的擴展？)

答: jquery中, 是通過$.fn.方法名來擴展插件的。這樣寫的好處有兩個:

1. 向全局只暴露一個變量$,而沒有構造函數Z（jquery.init）.
2. 方便統一管理

代碼如下:

	init.prototype = jQuery.fn

簡單的實例:

<script type="text/javascript" src="./jquery-3.2.1.js"></script>
    <script type="text/javascript">
        // 插件擴展
        $.fn.getNodeName = function () {
            // this
            alert(this[0].nodeName)
        }
    </script>
    <script type="text/javascript">
        // 驗證
        var $p = $('p')
        $p.getNodeName()
        var $div1 = $('#div1')
        $div1.getNodeName()
    </script>