jQuery建立例項與原型繼承揭秘

2022-05-15 10:21:07 字數 1332 閱讀 2835

在普通情況下我們要用原生類、或者自定義類建立例項要用new運算子,使建構函式建立乙個例項,並且例項繼承構造器prototype上的所有公有方法。如 new object()、new date()等等!(object有{},陣列有這樣的快捷方式 ,我們主要**new這種方式。)

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

funtion jquery( selector, context)

這裡可以看出jquery是有建構函式的,也是用了new 建立例項的。那麼jquery.fn是什麼呢?後面有個這樣的處理:

jquery.fn = jquery.prototype=

}

這樣我們就明白了,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保證多例項共享方法減少資源開支,約翰哥真的不簡單。

原型鏈繼承例項

先用物件字面量去構造乙個有用的物件 function says function 一旦有了乙個想要的物件,我們就可以利用object.create方法構造出更多的例項來 var mycat object.create mymammal mycat.name yzs mycat.saying meow...

原型與繼承

建構函式繼承 構造原函式物件 function perset name,age 在student中呼叫perset,並把perset中的this指向自己 function student name,age,id 原型繼承 function stu stu.prototype.name lili st...

原型 原型鏈與繼承

面試中經常考到物件導向的一些知識,在這記錄一下,如有不對歡迎指正,願在前端的道路上共勉!一 原型 1.什麼是原型 簡單說就像css的class一樣,是公用的,給dom元素加個class名就可以公用樣式,那麼原型就相當於css裡面的class,都可以用。在建構函式建立出來的時候,系統會預設的幫建構函式...