成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術(shù)教程 ? 實例詳解jQuery的無new構(gòu)建
全站頭部文字 我要出現(xiàn)在這里
實例詳解jQuery的無new構(gòu)建 679 2024-02-23   

jQuery的無new構(gòu)建

jQuery框架的核心就是從HTML文檔中匹配元素并對其執(zhí)行操作、

回想一下使用 jQuery 的時候,實例化一個 jQuery 對象的方法:

// 無 new 構(gòu)造
$('#test').text('Test');
 
// 當然也可以使用 new
var test = new $('#test');
test.text('Test');

大部分人使用 jQuery 的時候都是使用第一種無 new 的構(gòu)造方式,直接 $('') 進行構(gòu)造,這也是 jQuery 十分便捷的一個地方。

當我們使用第一種無 new 構(gòu)造方式的時候,其本質(zhì)就是相當于 new jQuery(),那么在 jQuery 內(nèi)部是如何實現(xiàn)的呢?看看:

(function(window, undefined) {
  var
  // ...
  jQuery = function(selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);
  },
 
  jQuery.fn = jQuery.prototype = {
    init: function(selector, context, rootjQuery) {
      // ...
    }
  }
  jQuery.fn.init.prototype = jQuery.fn;
})(window);

沒看懂?沒關(guān)系,我們一步一步分析。

函數(shù)表達式和函數(shù)聲明

在ECMAScript中,創(chuàng)建函數(shù)的最常用的兩個方法是函數(shù)表達式和函數(shù)聲明,兩者期間的區(qū)別是有點暈,因為ECMA規(guī)范只明確了一點:函數(shù)聲明必須帶有標示符(Identifier)(就是大家常說的函數(shù)名稱),而函數(shù)表達式則可以省略這個標示符: 

   //函數(shù)聲明:
  function 函數(shù)名稱 (參數(shù):可選){ 函數(shù)體 }
  //函數(shù)表達式:
  function 函數(shù)名稱(可選)(參數(shù):可選){ 函數(shù)體 }

所以,可以看出,如果不聲明函數(shù)名稱,它肯定是表達式,可如果聲明了函數(shù)名稱的話,如何判斷是函數(shù)聲明還是函數(shù)表達式呢?

ECMAScript是通過上下文來區(qū)分的,如果function foo(){}是作為賦值表達式的一部分的話,那它就是一個函數(shù)表達式,

如果function foo(){}被包含在一個函數(shù)體內(nèi),或者位于程序的最頂部的話,那它就是一個函數(shù)聲明。

 function foo(){} // 聲明,因為它是程序的一部分
 var bar = function foo(){}; // 表達式,因為它是賦值表達式的一部分
 new function bar(){}; // 表達式,因為它是new表達式
 (function(){
  function bar(){} // 聲明,因為它是函數(shù)體的一部分
 })();

還有一種函數(shù)表達式不太常見,就是被括號括住的(function foo(){}),他是表達式的原因是因為括號 ()是一個分組操作符,它的內(nèi)部只能包含表達式

再來看jQuery源碼:

(function(window, undefined) {
  /...
})(window)

可以將上面的代碼結(jié)構(gòu)分成兩部分:(function(){window, undefined}) 和 (window) ,

第1個()是一個表達式,而這個表達式本身是一個匿名函數(shù),

所以在這個表達式后面加(window)就表示執(zhí)行這個匿名函數(shù)并傳入?yún)?shù)window。

原型 prototype

認識一下什么是原型?

在JavaScript中,原型也是一個對象,通過原型可以實現(xiàn)對象的屬性繼承,JavaScript的對象中都包含了一個" [[Prototype]]"內(nèi)部屬性,這個屬性所對應的就是該對象的原型。

對于"prototype"和"__proto__"這兩個屬性有的時候可能會弄混,"Person.prototype"和"Person.__proto__"是完全不同的。

在這里對"prototype"和"__proto__"進行簡單的介紹:

1.對于所有的對象,都有__proto__屬性,這個屬性對應該對象的原型

2.對于函數(shù)對象,除了__proto__屬性之外,還有prototype屬性,當一個函數(shù)被用作構(gòu)造函數(shù)來創(chuàng)建實例時,該函數(shù)的prototype屬性值將被作為原型賦值給所有對象實例(也就是設置實例的__proto__屬性)

function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.getInfo = function(){
  console.log(this.name + " is " + this.age + " years old");
};
//調(diào)用
var will = new Person("Will", 28);
will.getInfo();//"Will is 28 years old"

閉包

閉包的定義:

當一個內(nèi)部函數(shù)被其外部函數(shù)之外的變量引用時,就形成了一個閉包。

閉包的作用:

在了解閉包的作用之前,我們先了解一下 javascript中的GC機制:

在javascript中,如果一個對象不再被引用,那么這個對象就會被GC回收,否則這個對象一直會保存在內(nèi)存中。

在上述例子中,B定義在A中,因此B依賴于A,而外部變量 c 又引用了B, 所以A間接的被 c 引用,

也就是說,A不會被GC回收,會一直保存在內(nèi)存中。為了證明我們的推理,看如下例子:

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

count是A中的一個變量,它的值在B中被改變,函數(shù)B每執(zhí)行一次,count的值就在原來的基礎上累加1。因此,A中的count一直保存在內(nèi)存中。

這就是閉包的作用,有時候我們需要一個模塊中定義這樣一個變量:希望這個變量一直保存在內(nèi)存中但又不會“污染”全局的變量,這個時候,我們就可以用閉包來定義這個模塊

在看jQuery源碼:

(function(window, undefined) {
  var
  // ...
  jQuery = function(selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);
  },
  jQuery.fn = jQuery.prototype = {
    init: function(selector, context, rootjQuery) {
      // ...
    }
  }
  jQuery.fn.init.prototype = jQuery.fn;
})(window);

我們知道了 什么是閉包:當一個內(nèi)部函數(shù)被其外部函數(shù)之外的變量引用時,就形成了一個閉包。

jQuery.fn的init 函數(shù)被jQuery 的構(gòu)造函數(shù)調(diào)用了,這里形成了一個閉包。
構(gòu)造函數(shù)及調(diào)用代碼:

// ...
  jQuery = function(selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);
  },

問題關(guān)鍵來了。

如何實現(xiàn)無new構(gòu)建

JavaScript是函數(shù)式語言,函數(shù)可以實現(xiàn)類,類就是面向?qū)ο缶幊讨凶罨镜母拍?/p>

var aQuery = function(selector, context) {
    //構(gòu)造函數(shù)
}
aQuery.prototype = {
  //原型
  name:function(){},
  age:function(){}
}
var a = new aQuery();
a.name();

這是常規(guī)的使用方法,顯而易見jQuery不是這樣玩的

要實現(xiàn)這樣,那么jQuery就要看成一個類,那么$()應該是返回類的實例才對

按照jQuery的抒寫方式

$().ready() 
$().noConflict()

要實現(xiàn)這樣,那么jQuery就要看成一個類,那么$()應該是返回類的實例才對

所以把代碼改一下:

var aQuery = function(selector, context) {
    return new aQuery();
}
aQuery.prototype = {
  name:function(){},
  age:function(){}
}

通過new aQuery(),雖然返回的是一個實例,但是也能看出很明顯的問題,死循環(huán)了

那么如何返回一個正確的實例?

在javascript中實例this只跟原型有關(guān)系

那么可以把jQuery類當作一個工廠方法來創(chuàng)建實例,把這個方法放到aQuery.prototye原型中

var aQuery = function(selector, context) {
    return aQuery.prototype.init(selector);
}
aQuery.prototype = {
  init:function(selector){
    return this;
  }
  name:function(){},
  age:function(){}
}

當執(zhí)行aQuery() 返回的實例:

查看圖片

很明顯aQuery()返回的是aQuery類的實例,那么在init中的this其實也是指向的aQuery類的實例

問題來了init的this指向的是aQuery類,如果把init函數(shù)也當作一個構(gòu)造器,那么內(nèi)部的this要如何處理?

var aQuery = function(selector, context) {
    return aQuery.prototype.init(selector);
}
aQuery.prototype = {
  init: function(selector) {
    this.age = 18
    return this;
  },
  name: function() {},
  age: 20
}
aQuery().age //18

因為this只是指向aQuery類的,所以aQuery的age屬性是可以被修改的。

這樣看似沒有問題,其實問題很大的

為什么是new jQuery.fn.init?

看如下代碼:

var aQuery = function(selector, context) {
    return aQuery.prototype.init(selector);
}
aQuery.prototype = {
  init: function(selector) {
    if(selector=="a")
      this.age = 18
    return this;
  },
  name: function() {},
  age: 20
}
aQuery("a").age //18
aQuery("b").age //18

當我調(diào)用 傳入"a"的時候,修改age=18,及aQuery("a").age 的值為18

但是當我 傳入"b"的時候 并沒又修改 age的值,我也希望得到默認age的值20,但是aQuery("b").age 的值為18.

因為在 調(diào)用aQuery("a").age 的時候age被修改了。

這樣的情況下就出錯了,所以需要設計出獨立的作用域才行。

jQuery框架分隔作用域的處理

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
  },

很明顯通過實例init函數(shù),每次都構(gòu)建新的init實例對象,來分隔this,避免交互混淆

我們修改一下代碼:

var aQuery = function(selector, context) {
    return new aQuery.prototype.init(selector);
}
aQuery.prototype = {
  init: function(selector) {
    if(selector=="a")
      this.age = 18
    return this;
  },
  name: function() {},
  age: 20
}
aQuery("a").age //18
aQuery("b").age //undefined
aQuery("a").name() //Uncaught TypeError: Object [object Object] has no method 'name' 

又出現(xiàn)一個新的問題,

age :undefined,

name() :拋出錯誤,無法找到這個方法,所以很明顯new的init跟jquery類的this分離了

怎么訪問jQuery類原型上的屬性與方法?

做到既能隔離作用域還能使用jQuery原型對象的作用域呢,還能在返回實例中訪問jQuery的原型對象?

實現(xiàn)的關(guān)鍵點

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

我們再改一下:

var aQuery = function(selector, context) {
    return new aQuery.prototype.init(selector);
}
aQuery.prototype = {
  init: function(selector) {
    if(selector=="a")
      this.age = 18
    return this;
  },
  name: function() {
     return age;
  },
  age: 20
}
aQuery.prototype.init.prototype = aQuery.prototype; 

aQuery("a").age //18
aQuery("b").age //20
aQuery("a").name()  //20

最后在看一下jQuery源碼:

(function(window, undefined) {
  var
  // ...
  jQuery = function(selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context, rootjQuery);
  },
  jQuery.fn = jQuery.prototype = {
    init: function(selector, context, rootjQuery) {
      // ...
    }
  }
  jQuery.fn.init.prototype = jQuery.fn;
})(window);

是不是明白了?

哈哈哈~~~

在簡單說兩句:

大部分人初看 jQuery.fn.init.prototype = jQuery.fn 這一句都會被卡主,很是不解。但是這句真的算是 jQuery 的絕妙之處。理解這幾句很重要,分點解析一下:

1)首先要明確,使用 $('xxx') 這種實例化方式,其內(nèi)部調(diào)用的是 return new jQuery.fn.init(selector, context, rootjQuery) 這一句話,也就是構(gòu)造實例是交給了 jQuery.fn.init() 方法取完成。

2)將 jQuery.fn.init 的 prototype 屬性設置為 jQuery.fn,那么使用 new jQuery.fn.init() 生成的對象的原型對象就是 jQuery.fn ,所以掛載到 jQuery.fn 上面的函數(shù)就相當于掛載到 jQuery.fn.init() 生成的 jQuery 對象上,所有使用 new jQuery.fn.init() 生成的對象也能夠訪問到 jQuery.fn 上的所有原型方法。

3)也就是實例化方法存在這么一個關(guān)系鏈

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

2.new jQuery.fn.init() 相當于 new jQuery() ;

3.jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以這 2 者是相當?shù)模晕覀兛梢詿o new 實例化 jQuery 對象。

總結(jié)

以上就是jQuery的無new構(gòu)建的全部內(nèi)容,希望本文對大家學習jQuery有所幫助。也請大家繼續(xù)支持綠夏網(wǎng)。



主站蜘蛛池模板: 阴道电影| 程瑶瑶| 鬼迷心窍1994| 河东狮吼 电影| 又造句二年级上册| 依人在线视频| psv游戏| ?1,| 蛇谷奇兵 电影| 黑帮大佬365日| 苏西| 德鲁| 张柏芝艳照视频| 王春晖| 人总要有点爱好,生活才能继续 | 妈妈写给叛逆儿子的信看哭孩子| 田文仲个人资料| 三夫人电影| 淡蓝色的雨简谱| 在线免费污视频| 奇奇颗颗说恐龙| 田教授家的二十八个保姆电视剧免费观看| 吾凰在上动漫在线观看免费| 我妻子的一切 电影| 中国的省份有哪些?| 松子的一生| 五年级上册书法教案| 美女在线| 倪妮| 拔萝卜视频免费完整版| 黑丝高跟鞋美女| 《最后的凶手》免费观看| 花守由美里| 老江湖| 林佑星| 美食总动员在线观看完整版免费| 黎明电影| 战犬出击电影完整版免费观看| cctv16体育节目表今天目表| 白培中| 马克·吐温|

!!!站長長期在線接!!!

網(wǎng)站、小程序:定制開發(fā)/二次開發(fā)/仿制開發(fā)等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103