原型

silencezwm 發布于2019-04-23 13:28 / 3223人閱讀

摘要：每個第一次使用的開發者都感到驚嘆的太神奇了究竟是怎么做到的使用控制贊嘆前人之余探究其本源才是前端開發者應該做的事社區常常說不要重復造輪子可是啊連輪子都造不出來又怎么去了解在什么環境下用什么輪子怎么樣才可以造成更加優秀的輪子不同階段對前端有不

每個第一次使用jq的開發者都感到驚嘆,jq的$太神奇了,究竟是怎么做到的使用$控制dom

贊嘆前人之余,探究其本源才是前端開發者應該做的事,社區常常說,不要重復造輪子,

可是啊,連輪子都造不出來,又怎么去了解在什么環境下用什么輪子,怎么樣才可以造成更加優秀的輪子,

不同階段對前端有不同的理解,作為一名程序員,本就是沒有盡頭,靜下心來,和別人比一比,多借鑒前人的發展,取其精

華去其糟粕,不要閉門造車,做一名不斷學習的前端開發者

? 回頭看來jq已經逐漸在不斷的學習中揭開了他神秘的面紗,讓我想看看美麗的$是怎么出生的

jQuery只有一個全局變量$ 那一定是掛載在window上面的

(function (window){
    var jQuery = function (selects) {
       
    }
    window.$ = jQuery;
 }
)(window)

可愛的$就指向JQuery的實例了當我們$("#id")就相當于 jQuery("#id")

那么現在就要處理獲取到的dom元素


(function (window) {
  function jQuery(selects) {
    return new jQuery.fn.init(selects)
  }
  jQuery.fn = {}  //創建掛載函數
  jQuery.fn.init = function (selects) {
    var dom = [].slice.call(document.querySelectorAll(selects))
    var i = 0;
    var len = dom ? dom.length : 0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selects = selects || " ";
  }
  window.$ = jQuery; //注意這里jQuery指向window
})(window)

現在我們就已經將$()里面的dom捕捉到了,請轉化成為數組,利于后面的操作

下一步就是在原型鏈上面創建jquery的方法了

(function (window){
  var jQuery = function (selector){
    return new jQuery.fn.init(selector)    //這里必須構造函數要不放怎么去獲取節點信息
  }
  jQuery.fn = {
    val(){
      return this[0].innerHTML
    }
      //.......等等方法
  }
  var int = jQuery.fn.init = function (selector) {
    var dom = [].slice.call(document.querySelectorAll(selector)) 
    var i,len = dom?dom.length:0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    console.log(len,selector);

    this.length = len;
    this.selector = selector || " "
  }

  int.prototype = jQuery.fn

  window.$ = jQuery;
})(window)

我們實現了類似jq的val()方法了

試驗一下





  
  
  
  title



  jquery test 1

最關鍵的一點使用jQuery.fn的方式利于拓展,上面代碼體現了這一點,假如我們現在jq上面創建自己的方法,就把方法掛在jQuery.fn上面相當于在原型上面加方法

這里可以看到jquery一切都是基于原型,所以呀,講原型,我用jquery來說明,感受到原型的強大

云服務器 GPU云服務器原型原型鏈基于原型原型方法原型聲明

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

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

關于構造函數、原型、原型鏈、多種方式繼承

摘要：可以看出這個構造函數是由創建出來的，而我們看下的隱式原型，竟然是指向了的原型，也就是也是由創建出來的。例如，其他構造函數的原型將覆蓋屬性并提供自己的方法。將構造函數的執行對象賦給這個空對象并且執行。把對象的隱式原型指向構造函數的原型。構造函數與實例對象又是這個經典的問題，嗯，我先來寫個構造函數，然后實例化一個對象看看。 function Person(name) { this....

zxhaaa 2019-08-23 15:57 評論0 收藏0
《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
JavaScript進階 - 1. 原型和原型鏈的概念

摘要：對應的關系圖如下講解了構造函數和原型對象之間的關系，那么實例對象和原型對象之間的關系又是怎么樣的呢下面講解。原型對象的指向的是構造函數和本身沒有屬性，但是其原型對象有該屬性，因此也能獲取到構造函數。 JavaScript進階 - 1. 原型和原型鏈的概念我們好多經常會被問道JavaScript原型和原型鏈的概念，還有關于繼承，new操作符相關的概念。本文就專門整理了原型和原型鏈的概念...

elisa.yang 2019-08-23 18:33 評論0 收藏0
JavaScript...原型與繼承中的原型鏈...

摘要：原型原型是什么在中函數是一個包含屬性和方法的類型的對象而原型就是類型對象的一個屬性在函數定義時就包含了屬性它的初始值是一個空對象在中并沒有定義函數的原型類型所以原型可以是任何類型原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響原型原型是什么在JavaScript中函數是一個包含屬性和方法的Function類型的對象而原型(Prototype)就是Function...

MiracleWong 2019-08-26 12:14 評論0 收藏0
JavaScript中的原型與原型鏈

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？國際慣例，讓我們先拋出問題：什么是原型、原型鏈它們有什么特點它們能做什么怎么確定它們的關系或許你已經有答案，或許你開始有點疑惑，無論是 get 新技能或是簡單的溫習一次，讓我們一起去探究一番吧如果文章中有出現紕...

laoLiueizo 2019-08-23 16:58 評論0 收藏0
JS高程讀書筆記--第六章原型繼承

摘要：高程讀書筆記第六章理解對象創建自定義對象的方式有創建一個實例，然后為它添加屬性和方法。創建了自定義的構造函數之后，其原型對象默認只會取得屬性至于其他方法都是從繼承而來的。 JS高程讀書筆記--第六章理解對象創建自定義對象的方式有創建一個Object實例，然后為它添加屬性和方法。還可用創建對象字面量的方式屬性類型 ECMAScript在定義只有內部采用的特性時，描述了屬性的各種特征...

EasonTyler 2019-08-21 10:56 評論0 收藏0