jQuery原型鏈分析

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

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

前言

自己搭建了個(gè)仿jQuery的原型設(shè)計(jì)，JQuery的原型設(shè)計(jì)也是按這樣來(lái)實(shí)現(xiàn)的，簡(jiǎn)單的說(shuō)就是讓_mJQ.init的原型對(duì)象和_mJQ的原型對(duì)象共用，然后new 一個(gè)_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) {
        // 進(jìn)行selector匹配，比如class,attr,id等...
        if (selector === "#test") {
            const elem = document.getElementById("test")
            this.elem = elem
            return this
        }
        return this
    }
    // 讓init的原型對(duì)象指向_mJQ的原型
    _mJQ.init.prototype = _mJQ.prototype = {
        // 功能
        each: function() {
            // 循環(huán)
        },
        html: function() {},
        css: function (name, value) {
            console.log(this)
            this.elem.style[name] = value
        }
    }
    // 設(shè)置contructor指向問(wèn)題
    Object.defineProperty(_mJQ.prototype, "constructor", {
        enumerable: false,
        value: _mJQ
    })
    // 掛載到window
    window.$ = window.mJQ = _mJQ;
})

測(cè)試結(jié)果

GPU云服務(wù)器云服務(wù)器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96623.html

相關(guān)文章

原型（prototype）相關(guān)方法，jquery類(lèi)型判斷源碼分析。

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

madthumb 2019-08-20 19:09 評(píng)論0 收藏0
Lodash 嚴(yán)重安全漏洞背后你不得不知道的 JavaScript 知識(shí)

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

YorkChen 2019-08-26 10:15 評(píng)論0 收藏0
最新：Lodash 嚴(yán)重安全漏洞背后你不得不知道的 JavaScript 知識(shí)

摘要：可能有信息敏感的同學(xué)已經(jīng)了解到庫(kù)爆出嚴(yán)重安全漏洞，波及萬(wàn)項(xiàng)目。以此為例，可見(jiàn)這次漏洞算是比較嚴(yán)重了。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。使用數(shù)據(jù)結(jié)構(gòu)，不會(huì)存在原型污染狀況。可能有信息敏感的同學(xué)已經(jīng)了解到：Lodash 庫(kù)爆出嚴(yán)重安全漏洞，波及 400萬(wàn)+ 項(xiàng)目。這個(gè)漏洞使得 lodash 連夜發(fā)版以解決潛在問(wèn)題，并強(qiáng)烈建議開(kāi)發(fā)者升級(jí)版本。我們?cè)诿χ礋狒[或者升級(jí)版本的同時(shí)...

Integ 2019-08-23 18:37 評(píng)論0 收藏0
進(jìn)擊的 JavaScript （七）之原型鏈

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

ivydom 2019-08-22 17:13 評(píng)論0 收藏0
underscore源碼剖析之整體架構(gòu)

摘要：我這里有個(gè)不夠準(zhǔn)確但容易理解的說(shuō)法，就是檢查一個(gè)對(duì)象是否為另一個(gè)構(gòu)造函數(shù)的實(shí)例，為了更容易理解，下面將全部以是的實(shí)例的方式來(lái)說(shuō)。 underscore源碼分析之整體架構(gòu) 最近打算好好看看underscore源碼，一個(gè)是因?yàn)樽约捍_實(shí)水平不夠，另一個(gè)是underscore源碼比較簡(jiǎn)單，比較易讀。本系列打算對(duì)underscore1.8.3中關(guān)鍵函數(shù)源碼進(jìn)行分析，希望做到最詳細(xì)的源碼分析。今...

2shou 2019-08-22 15:27 評(píng)論0 收藏0