javascript - जावास्क्रिप्ट "मुझे"="यह", क्यों?




extjs (5)

आम तौर पर आप this के लिए एक दायरे के अंदर एक संदर्भ रख सकते हैं जिसमें this किसी और चीज को संदर्भित करता है (उदाहरण के लिए कॉलबैक फ़ंक्शन की तरह)।

इस उदाहरण पर विचार करें, जिसमें क्लिक इवेंट हैंडलर फ़ंक्शन का एक अलग संदर्भ है जो आप उम्मीद कर सकते हैं ( this MyClass उदाहरण को संदर्भित नहीं करता है):

var MyClass = function (elem) {
    this.elem = elem;
    this.name = "James";
    elem.addEventListener("click", function () {
        alert(this.name); //oops
    }, false);
};

अब इस उदाहरण पर विचार करें, जिसमें हम कन्स्ट्रक्टर फ़ंक्शन के अंदर इसके मान के संदर्भ को संग्रहीत करते हैं, और कॉलबैक फ़ंक्शन के अंदर इसका उपयोग करते हैं:

var MyClass = function (elem) {
    var me = this;
    this.elem = elem;
    this.name = "James";
    elem.addEventListener("click", function () {
        alert(me.name); //works!
    }, false);
};

कॉलबैक फ़ंक्शन उस चर को संदर्भित कर सकता है जिसे बाहरी फ़ंक्शन में घोषित किया गया था, उसके बाद भी उस फ़ंक्शन को वापस कर दिया गया है ( MyClass कन्स्ट्रक्टर जैसे ही इसे addEventListener निष्पादित किया जाता है)। यह एक बंद करने का प्रदर्शन है।

मैंने कई स्रोत कोडों में देखा:

var me = this;

खासकर एक्सटी-जेएस 4 (जेएस फ्रेमवर्क) में। ऐसी चीज क्यों कर रही है? क्या कोई अन्य कारण है या आप सिर्फ एक चर के लिए "यह" के बजाय "मुझे" कहलाते हैं?

धन्यवाद।


असल में यह जावास्क्रिप्ट में बंद करने का उपयोग करता है। इसे बंद करने के बारे में पढ़ें।

इसका उपयोग इस विशेष घटना को फ़ंक्शन कॉल करने के लिए किया जाता है जहां इसका एक अलग अर्थ होता है।


me=this सेट me=this आपको this चर का उपयोग किसी बाहरी दायरे से बाहरी दायरे में करने की अनुमति देता है।

var Outer= function () {
        var me = this;
        me.x = "outerx";
        me.inner = {
            x: "innerx",
            displayValues: function () {
                console.log(me.x); //outerx
                console.log(this.x); //innerx
            }
        };
    };

    new Outer().inner.displayValues();

हालांकि निश्चित रूप से बंद करने के लिए यह अधिक स्पष्ट कारण है, मैं बस एक और कारण जोड़ना चाहता हूं जावास्क्रिप्ट फ़ाइल के minified संस्करण के आकार को कम करने के लिए।

एक कीवर्ड के रूप में फ़ाइल को छोटा करने की प्रक्रिया में इसका नाम बदला नहीं जा सकता है, जबकि एक स्थानीय चर कर सकते हैं। दूसरे शब्दों में, जब भी आप इसका उपयोग करेंगे (4 अक्षर), इसके बजाय 1 वर्ण स्थानीय चर का उपयोग किया जा सकता है।

ExtJS के Ext.data.Store के निम्न उदाहरण फ़ंक्शन पर विचार करें। Ext.data.Store :

filterBy: function(fn, scope) {
    var me = this;

    me.snapshot = me.snapshot || me.data.clone();
    me.data = me.queryBy(fn, scope || me);
    me.fireEvent('datachanged', me);
    me.fireEvent('refresh', me);
}

(ध्यान दें कि यहां कोई बंद नहीं है)

और इसका छोटा संस्करण:

filterBy:function(b,a){var c=this;c.snapshot=c.snapshot||c.data.clone();c.data=c.queryBy(b,a||c);c.fireEvent("datachanged",c);c.fireEvent("refresh",c)}

(151 वर्ण / बाइट्स)

अब, अगर हम इसे स्थानीय चर में असाइन नहीं करते हैं तो इसे न्यूनतम संस्करण से तुलना करें:

filterBy:function(b,a){this.snapshot=this.snapshot||this.data.clone();this.data=this.queryBy(b,a||this);this.fireEvent("datachanged",this);this.fireEvent("refresh",this)}

(170 वर्ण / बाइट्स)

जैसा कि आप स्थानीय चर के साथ संस्करण देख सकते हैं केवल फ़ंक्शन के आकार का 88% लेता है जो इसके बजाए हर बार this उपयोग करता है।

विशेष रूप से बड़ी पुस्तकालयों में यह फ़ाइल आकार को थोड़ा कम कर सकता है।


एक पुस्तकालय (जिसे "क्लोन" कहा जाता है) है , जो यह काफी अच्छा करता है। यह सबसे पूर्ण रिकर्सिव क्लोनिंग / अनियंत्रित वस्तुओं की प्रतिलिपि प्रदान करता है जो मुझे पता है। यह परिपत्र संदर्भों का भी समर्थन करता है, जो अभी तक अन्य उत्तरों द्वारा कवर नहीं है।

आप इसे एनपीएम पर भी पा सकते हैं । इसका उपयोग ब्राउज़र के साथ-साथ Node.js. के लिए भी किया जा सकता है।

इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

इसे स्थापित करें

npm install clone

या इसे Ender साथ पैकेज करें।

ender build clone [...]

आप मैन्युअल रूप से स्रोत कोड भी डाउनलोड कर सकते हैं।

फिर आप इसे अपने स्रोत कोड में उपयोग कर सकते हैं।

var clone = require('clone');

var a = { foo: { bar: 'baz' } };  // inital value of a
var b = clone(a);                 // clone a -> b
a.foo.bar = 'foo';                // change a

console.log(a);                   // { foo: { bar: 'foo' } }
console.log(b);                   // { foo: { bar: 'baz' } }

(अस्वीकरण: मैं पुस्तकालय का लेखक हूं।)







javascript extjs