jQuery深入之原始碼解析（四）分離構造器

繼續來看建構函式

var jquery = function( selector, context ) ,
...;
jquery.fn = jquery.prototype = ;
和jquery.fn.extend()，用於合併兩個或多個物件的屬性到第乙個物件
jquery.extend = jquery.fn.extend = function() ;

通過new操作符構建乙個物件，一般經過四步：

a.建立乙個新物件

b.將建構函式的作用域賦給新物件（所以this就指向了這個新物件）

c.執行建構函式中的**

d.返回這個新物件

最後一點就說明了，我們只要返回乙個新物件即可。其實new操作符主要是把原型鏈跟例項的this關聯起來，這才是最關鍵的一點，所以我們如果需要原型鏈就必須要new操作符來進行處理。否則this則變成window物件了。

//宣告乙個類xjquery
var t_$=function
(){};
var $$ = xjquery = function
(selector) 
//為類構造prototype
xjquery.fn = xjquery.prototype = ,
constructor: xjquery
}//這裡將new宣告在外面（常用的手法）
var a = new $$('***');
a.selectorname();

這裡t_$沒有經過構造，

t_$宣告為function物件

全域性的function物件沒有自己的屬性和方法, 但是, 因為它本身也是函式，所以它也會通過原型鏈從function.prototype上繼承部分屬性和方法。

function屬性

function方法

function.prototype.bind()

bind()方法會建立乙個新函式,稱為繫結函式.當呼叫這個繫結函式時,繫結函式會以建立它時傳入 bind()方法的第乙個引數作為 this,傳入 bind()方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式.

function.prototype.call()

在乙個物件的上下文中應用另乙個物件的方法；引數能夠以列表形式傳入。

function.prototype.isgenerator()

若函式物件為generator，返回true，反之返回 false。（後來沒了）

function.prototype.tosource()

獲取函式的實現原始碼的字串。覆蓋了 object.prototype.tosource 方法。(後來已經被取消了)

function.prototype.tostring()

獲取函式的實現原始碼的字串。覆蓋了 object.prototype.tostring 方法。

宣告函式的原型構造方法，詳細請參考 object.constructor 。

到這裡應該就明報構造器是怎麼回事了

還是這段**

//宣告乙個類xjquery
var t_$=function
(){};
var $$ = xjquery = function
(selector) 
//為類構造prototype
xjquery.fn = xjquery.prototype = ,
//constructor: xjquery
}//這裡將new宣告在外面（常用的手法）
var a = new $$('***');
a.selectorname();

看到他的construtor是xjquery

而如果注釋掉constructor的話，它的構造器就是object

即使這樣，它還是繼承了xjquery的方法

var $$ = xjquery = function
(selector) 
this.selector = selector;
return
this
}var a =$$('***');

但是不能這樣寫，否則會無限遞迴，造成死迴圈

var $$ = ajquery = function
(selector)

jquery為了避免出現這種死迴圈的問題，採取的手段是把原型上的乙個init方法作為構造器

var $$ = ajquery = function
(selector) 
ajquery.fn = ajquery.prototype = ,
constructor: ajquery
}var b=$$('yyy');

這裡是把init作為構造器

我的理解是，繼承實質上是繼承構造器的原型函式prototype 而jquery採取的方式是在prototype中定義乙個方法init，通過new這個函式而建立乙個新的物件。因此新的物件繼承的是init的屬性和方法。

即如果var x= $$(『xx』)

console.log(x.name)// 為undefined，而不是」aaron」

因為x只繼承了init中的方法

我的理解是這樣

而jquery中還有一句是

init.prototype = jquery.fn;

這樣init使得原型又指向了jquery.fn

才得以繼承name:』aaron』這樣的屬性吧

}//新新增的

var init=ajquery.fn.init;

init.prototype=ajquery.fn;

var b=$$3('yyy');

這樣b.name=』aaron』

完整demo

/乙個空的function/
vart_$=function
(){};
/*通常構造類的方法*/
var $$1 = xjquery = function
(selector) 
//為類構造prototype
// xjquery.fn = xjquery.prototype = ,
//建構函式constructor是在物件初始化的瞬間被呼叫的方法
//通常constructor的名字與它的類一致
selectorname: function
() ,
constructor: xjquery
}//這裡將new宣告在外面（常用的手法）
var a = new $$1('***');
a.selectorname();
/*改造常規構造方式，自呼叫函式，在return處加new*/
var $$2 = yjquery = function
(selector) 
this.selector = selector;
return
this
}yjquery.prototype =
}var c = $$2('***');
/*jquery採用的方式*/
var $$3= ajquery = function
(selector) 
ajquery.fn = ajquery.prototype = ,
constructor: ajquery
}var init=ajquery.fn.init;
init.prototype=ajquery.fn;
var b=$$3('yyy');

jQuery深入之原始碼解析（四）分離構造器

（一） Mybatis 原始碼解析之原始碼概述

Selenium之原始碼解析切換frame的四種方式

jquery原始碼解析

jQuery深入之原始碼解析（四） 分離構造器

（一） Mybatis 原始碼解析之原始碼概述

Selenium之原始碼解析切換frame的四種方式

jquery原始碼解析

相關推薦

jQuery深入之原始碼解析（四）分離構造器