為何jquery實例化的時候不需要new 一個構造函數

zorpan 發布于2019-08-22 15:56 / 2651人閱讀

摘要：為何構造函數不直接返回呢而是在中間搞了一個讀過源碼的都知道，這個函數實際是的初始化函數。

如題，這個問題我曾經在支付寶的電話面試里面最后一個問題被問到過，后來也沒有去看到底為何不需要new，現在我們就來剖析下。
而且當你在看jquery源碼的時候，如果一開始就搞不懂這樣的問題，抑或jQuery.fn.init.prototype =jQuery.fn 這樣的問題也搞不懂的話，那基本后面的東西都是懵的。

首先回顧下，我們一般是如何寫插件的，通常是這樣的

function Kissy () {
  
}

Kissy.prototype.alert = function () {
 
}
// 實例化必須要有，否則無法調用原型鏈上的alert方法
var kissy = new Kissy()
kissy.alert()
// 如果我們直接這樣調用
Kissy().alert()
// 就會報錯alert不是一個function。這里涉及到原型繼承，new 一個構造函數和 執行普通函數的區別，不在贅述。

回歸一個知識點，有助于我們理解后面我們講解的內容

構造函數有return值怎么辦？
構造函數里沒有顯式調用return時，默認是返回this對象，也就是新創建的實例對象。
當構造函數里調用return時，分兩種情況：
1.return的是五種簡單數據類型：String，Number，Boolean，Null，Undefined。
這種情況下，忽視return值，依然返回this對象。
2.return的是Object
這種情況下，不再返回this對象，而是返回return語句的返回值。

如何改造上面的代碼，可以不用new函數，直接調用到alert方法呢？很簡單。改造如下：

function Kissy () {
  return Kissy.prototype
}

當我們直接調用Kissy()函數的時候，不是返回的null或undefined而是返回Kissy的原型，即返回了一個原型對象，這個對象上是有alert方法的，這就好像我們熟悉的下面的代碼一樣

var obj = {
  name: "zj",
  getName: function() {
    console.log(this.name)
  }
}
obj.getName() // zj

接下來，我們仿造jquery源碼又來改造下：

function Kissy () {
      return new Kissy.fn.init()
}
    
Kissy.fn = Kissy.prototype = {
  constructor: Kissy,
  init: function() {
      console.log("init")
  }
}

Kissy.fn.init.prototype = Kissy.fn

Kissy.fn.alert = function() {
    alert("0000")
}
Kissy().alert()  // 00000

無非就是在Kissy上面增加了一個fn屬性，這個屬性指向了Kissy.prototype。這樣的目的是便于我們開發插件的時候，在原型上增加方法可以直接這么寫Kissy.fn.alert 僅此而已。為何構造函數不直接返回
Kissy.fn呢而是在中間搞了一個init.讀過jquery源碼的都知道，jquery.fn.init 這個函數實際是jquery的初始化函數。這里就不在展開了。

return new Kissy.fn.init()

構造函數返回了一個Kissy.fn.init()這個函數的一個實例。當然就會繼承這個實例上的原型，而原型又被我們重置了

Kissy.fn.init.prototype = Kissy.fn

所以就能調用到Kissy.fn上面的alert方法了，不信大家可以試試哦。

再來看jquery的源碼，對比剛剛分析的代碼，是不是基本一模一樣，只是jquery源碼fn.init方法有比較多初始化的內容。

jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn = jQuery.prototype = { //fn即對應prototype
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        ...
        return this;
    }
    ...
}
jQuery.fn.init.prototype = jQuery.fn;

云服務器 GPU云服務器構造函數實例java new實例數據 new一個 new函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93879.html

求索：GSAP的動畫快于jQuery嗎？為何？

摘要：本文已完結，請看下文求索的動畫快于嗎為何續本文源自對問題動畫性能優于的原理是什么的回答。是這樣的嗎請看下文求索的動畫快于嗎為何續本文已完結，請看下文： > 求索：GSAP的動畫快于jQuery嗎？為何？/續本文源自對問題《GSAP js動畫性能優于jQuery的原理是什么？》的回答。GSAP是一個js動畫插件，它聲稱20x faster than jQuery，是什么讓...

LiangJ 2019-08-28 17:51 評論0 收藏0
字節跳動前端一面試題及答案

摘要：將構造函數的作用域賦值給新對象。也所以對象指向新對象執行構造函數內部的代碼，將屬性添加給中的對象。通常的解決方案是判斷是否是構造函數的實例，若是則繼續執行，若不是則進行的操作。代碼如下在構造函數參數個數固定的情況下這種方案是可行的。首先，一般的都是介紹自己，主要是項目經歷問題1：jQuery與Vue的區別是什么？ JQuery和Vue的主要區別是JQuery主要是通過選擇器來選取D...

roundstones 2019-08-23 15:36 評論0 收藏0
Spring IoC學習總結

摘要：學習總結學習整理的一些筆記，很簡單。大部分認為和只是不同的叫法而已。依賴注入的兩種方式和注解使用注釋驅動的功能源碼剖析 Spring IoC學習總結學習spring Ioc整理的一些筆記，很簡單。分享給大家。 IoC 基本概念在這之前，我們先記住一句話。好萊塢原則：Dont call us, we will call you.其實這句話很恰當地形容了反轉的意味；Ioc, Inve...

silencezwm 2019-08-15 11:04 評論0 收藏0