jQuery建構函式init引數分析(一)

2022-09-18 05:03:22 字數 3848 閱讀 7597

的建構函式,

jquery

物件中有乙個原型方法

init

才是是真正的建構函式,通過

init

的原型物件跟

jquery

的原型物件保持引用關係使得

init

的例項可以正常呼叫

jquery

的原型方法,就好像是

jquery

的例項一樣。下面就來看看

init

這個幕後的建構函式是怎麼寫的:

init: function

( selector, context, rootjquery )

可以看到這個方法接受3

個引數,其前兩個引數是

jquery

方法傳遞過來的

var jquery = function

( selector, context ) ,

selector原則上可以輸入任意值,但並不是所有值都是有意義的,只有

undefined

、dom 

元素、字串、函式、

jquery 

物件、普通 

j**ascript 

物件這幾種型別是有效的,這個引數是通常是填寫的但是不填寫也不會報錯

console.log($());

//[constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

context作為執行上下文或者叫執行範圍可以不傳入,或者傳入 

dom 

元素、jquery 

物件、普通 

j**ascript 

物件之一

引數 rootjquery

:包含了 

document 

物件的 

jquery 

物件,用於 

document.getelementbyid() 

查詢失敗、

selector 

是選擇器表示式且未指定 

context

、selector 

是函式的情況,其實就是

$(document)

。下面根據引數的不同分為12

種情況逐個討論

1.selector 可以轉換為false

//

handle $(""), $(null), or $(undefined)

if ( !selector )

原始碼中的注釋已經寫得很清楚了,當是這三種情況時直接return

不進行任何處理

2.引數 selector 

是 dom 

元素

例如: $(document)

這種寫法

//

handle $(domelement)

if( selector.nodetype )

只要是dom

元素肯定有節點型別,然後把這個節點變成

jquery

物件的第乙個元素並且賦值給上下文context,

length

屬性是jquery

的原型屬性預設為

0

//

the default length of a jquery object is 0

length: 0,

這裡有了乙個元素之後就把length

屬性修改為1。

return this 

操作使得函式執行後的結果依然是

jquery

物件這樣就可以實現類似

$(document).each()

這樣的鏈式呼叫了。最終得到的類似這樣的

物件,其實所有的情況最後都會變成這種形式的物件,除了

jquery

原型屬性和方法之外就是獲取的

dom節點並且按照阿拉伯數字依次排列,所以我們可以使用

$(selector)[0]

的形式代替

$(selector).get(0)

來獲取dom

物件。例如:

3.引數是特殊的字串「body

由於body

元素在乙個文件物件中只有乙個所以單獨列出來處理

//

the body element only exists once, optimize finding it

if ( selector === "body" && !context &&document.body )

這裡有3

個條件必須同時滿足,第二個必須沒有上下文的條件我也不是太理解,

$(『body』,document)這樣的看起來很正常的寫法也會被這種情況「忽視」     

console.log($('body',document)); /*

jquery.fn.jquery.init[1]

0: body

context: document

length: 1

prevobject: jquery.fn.jquery.init[1]

selector: "body"

__proto__: jquery[0]

*/

雖然和$('body')的結果是一樣的,但是卻被當做兩種情況來看待,可能是因為body

只有乙個上下文只能是

document

沒有必要新增吧,否則又要判斷上下文是不是

document

。第三個條件是保證

document.body

必須存在,那麼什麼情況下會前兩個情況滿足

document.body

又不存在呢?首先就是

js**先於

html

**載入時會出現這個是初學者經常會犯的錯誤,通常我們要寫成:

$(function())

或者

$(document).ready(function())

其實這兩個是一樣的調取的是乙個方法,

dom載入這一塊以後在分析。對此我們可以做個測試

html

**如下:

然後再jquery

源**裡面輸出

selector

、context

和document.body

console.log(selector+context+document.body);

//the body element only exists once, optimize finding it

if ( selector === "body" && !context &&document.body )

雖然我們只寫了乙個其實執行了四次,只有最後一次才是是我們呼叫後的結果,最後一次的結果是bodyundefinednull

這個時候前兩個就是滿足的但是最後乙個是

null

。回想起第一篇

jquery

總體架構架構裡面

undefined

會被重新,那麼

document.body

會不會被重寫為

null

呢?當我嘗試在**中修改時就會報錯看來是不會的,那這個條件就是預防沒有載入

html

就執行的情況吧

有無參建構函式

都在物件被構造的時候被呼叫,只是在構造物件時根據new物件的引數型別和個數進行選擇對應的構造方法進行呼叫,當沒有引數時呼叫無參構造方法,有引數時呼叫對應的有參構造方法。建構函式的引數一般用來初始化類的資料成員。建構函式的特點及作用 建構函式的命名必須和類名完全相同。建構函式的功能主要用於在類的物件建...

有無參建構函式

都在物件被構造的時候被呼叫,只是在構造物件時根據new物件的引數型別和個數進行選擇對應的構造方法進行呼叫,當沒有引數時呼叫無參構造方法,有引數時呼叫對應的有參構造方法。建構函式的引數一般用來初始化類的資料成員。建構函式的特點及作用 建構函式的命名必須和類名完全相同。建構函式的功能主要用於在類的物件建...

python建構函式init例項方法解析

一程式設計客棧 建立物件,我們需要定義建構函式 init 方法。構造方法用於執行 實程式設計客棧例物件的初始化工作 即物件建立後,初始化當前物件的屬性,無返回值。init 要點如下 1.名稱固定,必須為 init 2.第乙個引數固定,必須為self。self指的就是剛剛建立好的示例物件。3.建構函式...