jQuery原型鏈分析

lidashuang 發(fā)布于2019-08-23 10:43 / 2341人閱讀

摘要：前言自己搭建了個仿的原型設計，的原型設計也是按這樣來實現(xiàn)的，簡單的說就是讓的原型對象和的原型對象共用，然后一個，很容易理解吧正文若環(huán)境存在則執(zhí)行初始化進行匹配，比如等讓的原型對象指向的原型功能循環(huán)設置指向問題掛載到測試結果

前言

自己搭建了個仿jQuery的原型設計，JQuery的原型設計也是按這樣來實現(xiàn)的，簡單的說就是讓_mJQ.init的原型對象和_mJQ的原型對象共用，然后new 一個_mJQ.init，很容易理解吧

正文

(function(global, factory) {
    if (typeof global.document === "undefined") {
        throw new Error("the environment must have a window Object with document !")
    }
    // 若環(huán)境存在則執(zhí)行factory
    factory(global);
})(typeof window !== "undefined" ? window : this, function (window) {
    var _mJQ = function (selector) {
        return new _mJQ.init(selector);
    }
    // 初始化
    _mJQ.init = function(selector) {
        // 進行selector匹配，比如class,attr,id等...
        if (selector === "#test") {
            const elem = document.getElementById("test")
            this.elem = elem
            return this
        }
        return this
    }
    // 讓init的原型對象指向_mJQ的原型
    _mJQ.init.prototype = _mJQ.prototype = {
        // 功能
        each: function() {
            // 循環(huán)
        },
        html: function() {},
        css: function (name, value) {
            console.log(this)
            this.elem.style[name] = value
        }
    }
    // 設置contructor指向問題
    Object.defineProperty(_mJQ.prototype, "constructor", {
        enumerable: false,
        value: _mJQ
    })
    // 掛載到window
    window.$ = window.mJQ = _mJQ;
})

測試結果

云服務器 GPU云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

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

原型（prototype）相關方法，jquery類型判斷源碼分析。

摘要：先來看一個這樣的對象在函數(shù)的原型上擴展了一個方法可以看到實例化的對象下有一個屬性，而這個屬性就指向構造函數(shù)的原型對象。重點是，連接的是實例對象與構造函數(shù)原型對象，而不是，實例對象和構造函數(shù)。前言介紹原型的概念，和相關屬性，以及jquery判斷純凈對象的實現(xiàn)，不小心點進來的直接 ctrl+f 搜你想找的屬性。什么是原型 isPrototypeOf() || Object.getP...

madthumb 2019-08-20 19:09 評論0 收藏0
Lodash 嚴重安全漏洞背后你不得不知道的 JavaScript 知識

摘要：可能有信息敏感的同學已經(jīng)了解到庫爆出嚴重安全漏洞，波及萬項目。以此為例，可見這次漏洞算是比較嚴重了。此外，凍結一個對象后該對象的原型也不能被修改。摘要：詳解原型污染。原文：Lodash 嚴重安全漏洞背后你不得不知道的 JavaScript 知識作者：Lucas HC Fundebug經(jīng)授權轉載，版權歸原作者所有。可能有信息敏感的同學已經(jīng)了解到：Lodash 庫爆出嚴...

YorkChen 2019-08-26 10:15 評論0 收藏0
最新：Lodash 嚴重安全漏洞背后你不得不知道的 JavaScript 知識

摘要：可能有信息敏感的同學已經(jīng)了解到庫爆出嚴重安全漏洞，波及萬項目。以此為例，可見這次漏洞算是比較嚴重了。此外，凍結一個對象后該對象的原型也不能被修改。使用數(shù)據(jù)結構，不會存在原型污染狀況。可能有信息敏感的同學已經(jīng)了解到：Lodash 庫爆出嚴重安全漏洞，波及 400萬+ 項目。這個漏洞使得 lodash 連夜發(fā)版以解決潛在問題，并強烈建議開發(fā)者升級版本。我們在忙著看熱鬧或者升級版本的同時...

Integ 2019-08-23 18:37 評論0 收藏0
進擊的 JavaScript （七）之原型鏈

摘要：創(chuàng)建一個新的對象即實例對象把新對象的指向后面構造函數(shù)的原型對象。簡單來驗證一下等同與對象沒有原型對象的原型對像等同于構造函數(shù)是等同于，構造函數(shù)是七原型鏈的作用其實，原型鏈的根本作用就是為了屬性的讀取。首先說一下，函數(shù)創(chuàng)建的相關知識在JavaScript中，我們創(chuàng)建一個函數(shù)A(就是聲明一個函數(shù)), 那么 js引擎就會用構造函數(shù)Function來創(chuàng)建這個函數(shù)。所以，所有的函數(shù)的con...

ivydom 2019-08-22 17:13 評論0 收藏0
underscore源碼剖析之整體架構

摘要：我這里有個不夠準確但容易理解的說法，就是檢查一個對象是否為另一個構造函數(shù)的實例，為了更容易理解，下面將全部以是的實例的方式來說。 underscore源碼分析之整體架構最近打算好好看看underscore源碼，一個是因為自己確實水平不夠，另一個是underscore源碼比較簡單，比較易讀。本系列打算對underscore1.8.3中關鍵函數(shù)源碼進行分析，希望做到最詳細的源碼分析。今...

2shou 2019-08-22 15:27 評論0 收藏0