JQ原始碼解析(二)無 new 構建 JQ 物件

2021-08-20 17:45:15 字數 1818 閱讀 1146

我們都知道,例項乙個 jq 物件是沒有用到 new 的

var test = $('.test')	//這裡 $('.test') 相當於 new jquery('.test')
如何實現的呢,擷取這個功能的主體**:

jquery = function( selector, context ) ,

jquery.fn = jquery.prototype =

var init = jquery.fn.init = function( selector, context, root )

init.prototype = jquery.fn;

初看很複雜,看不明白他到到底想幹什麼,也看了很多說明,最終還是覺得從實現這個功能的目的反推**,配上**的解釋更易懂。

首先,我們得構建乙個 jq 物件,

function jquery( selector, context )
$().addclass(),因為 jquery 是乙個類,並且呼叫後返回的也是這個類的例項(因為返回的例項能呼叫自身的方法),所以這個建構函式為

function jquery( selector, context )
這樣寫會出現死迴圈一直呼叫 jquery ,我們可以在 jquery 原型上構建乙個方法,這個方法返回 this ,指向原型本身:

function jquery( selector, context ) 

jquery.prototype = ,

//內部屬性方法

name:'z',

sayname:function(),

......

}

這裡問題是解決了,但是別人比我們厲害的就在後面,深挖細節在不同場景下都能最優使用,假設我們需要繼續在這個 init 函式中建構函式,並適用不同場景:

init:function(selector),

jquery(0).sayname() //輸出z

jquery(1).sayname() //輸出p

jquery(0).sayname() //輸出p

因為例項 jquery 類時 init 構造的屬性是直接作用在 jquery 類的原型上,所以會出現上面的作用域相互影響。

解決辦法就是每次類都返回乙個新物件(鏈式呼叫就是如此)。

function jquery( selector, context )
但是執行後會發現

jquery(0).sayname()	//undefined

jquery(1).sayname() //輸出p

因為新例項的 init 與 jquery 類的 this 分離了

所以還要加上

jquery.prototype.init.prototype = jquery.prototype
jquery.prototype 上的屬性方法都會被 init 繼承

全文,基本就是 jq 原始碼的意思了:

function jquery( selector, context ) 

jquery.prototype = ,

//內部屬性方法

name:'z',

sayname:function(),

......

}jquery.prototype.init.prototype = jquery.prototype

EventBus原始碼解析(二)

那麼我們就馬上進入主題吧,上篇文章分析到boolean sticky這個引數和registersticky object subscriber 這個方法,這個方法與之前我們註冊的方法是不是很像啊?public void register object subscriber public void r...

EventBus原始碼解析二

上次分析了 註冊 這次分析下 事件傳送 eventbus.getdefault post new anyeventtype setresult aaa public void post object event try finally eventqueue.add event 新增到事件佇列中,然後...

Junit 原始碼解析(二)

這裡對blockjunit4classrunner中幾個跟寫單元測試最相關的幾個方法進行分析 1 構造方法 public blockjunit4classrunner class klass throws initializationerror作用 是取得類的聲名描述,即class klass 2 ...