歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery中創建實例與原型繼承揭秘

jQuery中創建實例與原型繼承揭秘

日期:2017/3/1 10:07:12   编辑:Linux編程

斷斷續續用jquery兩年了,最近一般的jquery應用已經滿足自己的求知欲望了,只能找jquery源碼來“洩欲”了,今天先從創建jquery對象說起吧

在普通情況下我們要用原生類、或者自定義類創建實例要用new運算符,使構造函數創建一個實例,並且實例繼承構造器prototype上的所有公有方法

如 new Object()、new Date()等等!(object有{},數組有[]這樣的快捷方式 ,我們主要探討new這種方式。)

我們在使用jQuery時從來沒有使用過new,他是不是用其他方法來生成實例呢?是不是沒有使用prototype屬性呢?事實上他都有使用,只是內部處理的非常巧妙,提高了使用的爽快度。我們來看看他的源碼。

  1. funtion jQuery( selector, context){
  2.   returnnew jQuery.fn.init( selector, context );
  3. }

這裡可以看出jQuery是有構造函數的,也是用了new 創建實例的。那麼jQuery.fn是什麼呢?後面有個這樣的處理

  1. jQuery.fn = jQuery.prototype={
  2. init:function (){}
  3. }

這樣我們就明白了,jQuery的構造函數是他原型上的init方法,而不是function jQuery。這樣的話每次調用$()他都會用jQuery原型上的init創建一個實例,那麼新的問題來了。如果用init創建實例的話,這個對象繼承的是init的prototype上的方法而不會繼承jQuery prototype上的方法,那麼他是怎麼實現原型繼承的呢?

jQuery.fn.init.prototype = jQuery.fn;

這裡他有一個這樣的處理,把jQuery.fn賦值給了jQuery.fn.init.prototype ,這一步很關鍵。我門看看這些是什麼。

jQuery.fn是jQuery.prototype

jQuery.fn.init.prototype是jQuery.prototype.init.prototype

這個處理相當於

jQuery.prototype = jQuery.prototype.init.prototype

那麼每當我們調用$()是,jQuery就會用new運算符調用他prototype上的init創建一個實例,這個由init創建實例會繼承jQuery protype上的所有方法,並且這個實例的__proto__內部屬性會指向jQuery的prototype屬性。

另外我們注意到這個處理:

jQuery.fn = jQuery.prototype

這是他為了避免頻繁的操作jQuery.prototype,所以用jQuery.fn緩存了jQuery.prototype。

這些的處理實在是非常巧妙,內部處理了實例創建不用使用者用new去生成實例,又非常漂亮的處理了prototype保證多實例共享方法減少資源開支。

Copyright © Linux教程網 All Rights Reserved