javascript - हरण - हिंदी में जावास्क्रिप्ट परिचय




"यह" कीवर्ड कैसे काम करता है? (13)

मैंने देखा है कि this कीवर्ड के बारे में स्पष्ट स्पष्टीकरण नहीं है और यह स्टैक ओवरफ़्लो साइट पर जावास्क्रिप्ट में सही तरीके से (और गलत तरीके से) कैसे उपयोग किया जाता है।

मैंने इसके साथ कुछ अजीब व्यवहार देखा है और यह समझने में असफल रहा है कि ऐसा क्यों हुआ है।

यह कैसे काम करता है और इसका उपयोग कब किया जाना चाहिए?


जावास्क्रिप्ट this

सरल समारोह आमंत्रण

निम्नलिखित फ़ंक्शन पर विचार करें:

function foo() {
    console.log("bar");
    console.log(this);
}
foo(); // calling the function

ध्यान दें कि हम इसे सामान्य मोड में चला रहे हैं, यानी सख्त मोड का उपयोग नहीं किया जाता है।

ब्राउज़र में चलाए जाने पर, इसका मान window रूप में लॉग किया जाएगा। ऐसा इसलिए है क्योंकि window एक वेब ब्राउज़र के दायरे में वैश्विक चर है।

यदि आप node.js जैसे वातावरण में कोड का एक ही टुकड़ा चलाते हैं, तो this आपके ऐप में वैश्विक चर का संदर्भ देगा।

अब अगर हम "use strict"; कथन जोड़कर इसे सख्त मोड में चलाते हैं "use strict"; समारोह घोषणा की शुरुआत के लिए, this अब किसी भी वातावरण में वैश्विक चर का उल्लेख नहीं करेगा। सख्त मोड में भ्रम से बचने के लिए यह किया जाता है। this , इस मामले में बस undefined लॉग होगा, क्योंकि यह वही है, यह परिभाषित नहीं है।

निम्नलिखित मामलों में, हम देखेंगे कि इसका मूल्य कैसे उपयोग किया जाए।

किसी ऑब्जेक्ट पर फ़ंक्शन को कॉल करना

ऐसा करने के कई तरीके हैं। यदि आपने जावास्क्रिप्ट में देशी और विधि के लिए देशी विधियों को बुलाया है, तो आपको पहले से ही पता होना चाहिए कि उस मामले में this चर उस Object को संदर्भित करता है जिस पर आपने उस फ़ंक्शन को बुलाया था (ध्यान दें कि जावास्क्रिप्ट में, बस सब कुछ एक Object , जिसमें Array और Function एस)। उदाहरण के लिए निम्नलिखित कोड लें।

var myObj = {key: "Obj"};
myObj.logThis = function () {
    // I am a method
    console.log(this);
}
myObj.logThis(); // myObj is logged

यदि किसी Object में कोई ऐसी संपत्ति होती है जिसमें Function , तो संपत्ति को विधि कहा जाता है। यह विधि, जिसे कॉल किया जाता है, हमेशा यह Object सेट किया जाएगा यह Object से जुड़ा हुआ है। यह सख्त और गैर-सख्त दोनों तरीकों के लिए सच है।

ध्यान दें कि अगर किसी विधि को किसी अन्य चर में संग्रहीत किया जाता है (या इसके बजाय, कॉपी किया गया), तो इसका संदर्भ अब नए चर में संरक्षित नहीं है। उदाहरण के लिए:

// continuing with the previous code snippet

var myVar = myObj.thisMethod;
myVar();
// logs either of window/global/undefined based on mode of operation

अधिक सामान्य व्यावहारिक परिदृश्य को ध्यान में रखते हुए:

var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself

new कीवर्ड

जावास्क्रिप्ट में एक कन्स्ट्रक्टर फ़ंक्शन पर विचार करें:

function Person (name) {
    this.name = name;
    this.sayHello = function () {
        console.log ("Hello", this);
    }
}

var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`

यह कैसे काम करता है? खैर, देखते हैं कि जब हम new कीवर्ड का उपयोग करते हैं तो क्या होता है।

  1. new कीवर्ड के साथ फ़ंक्शन को कॉल करने से तुरंत Object ऑफ Object प्रारंभ होता है।
  2. इस Object कन्स्ट्रक्टर के पास इसका कन्स्ट्रक्टर Person । साथ ही, ध्यान दें कि typeof awal केवल Object लौटाएगा।
  3. इस नए Object को Person.prototype का Person.prototype सौंपा जाएगा। इसका मतलब है कि Person प्रोटोटाइप में किसी भी विधि या संपत्ति Person के सभी उदाहरणों के लिए उपलब्ध होगी, जिसमें awal भी शामिल है।
  4. फ़ंक्शन Person स्वयं ही आवेदित है; this नव निर्मित वस्तु के लिए एक संदर्भ है।

बहुत कठोर, आह?

ध्यान दें कि आधिकारिक ईसीएमएस्क्रिप्ट स्पेक नो कहां कहता है कि इस प्रकार के फ़ंक्शन वास्तविक constructor फ़ंक्शन हैं। वे केवल सामान्य कार्य हैं, और किसी भी समारोह पर new का उपयोग किया जा सकता है। यह सिर्फ इतना है कि हम उन्हें इस तरह उपयोग करते हैं, और इसलिए हम उन्हें केवल इतना कहते हैं।

कार्यों पर कॉलिंग फ़ंक्शन: call और apply

तो हाँ, चूंकि function एस Objects (और वास्तव में जावास्क्रिप्ट में प्रथम श्रेणी चर) हैं, यहां तक ​​कि फ़ंक्शंस में विधियां हैं जो ... अच्छी तरह से काम करती हैं।

सभी फ़ंक्शंस वैश्विक Function से प्राप्त होते हैं, और इसकी कई विधियां call और apply , और दोनों का उपयोग उस फ़ंक्शन में उस के मान में हेरफेर करने के लिए किया जा सकता है जिस पर उन्हें कॉल किया जाता है।

function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);

यह call का उपयोग करने का एक विशिष्ट उदाहरण है। यह मूल रूप से पहला पैरामीटर लेता है और this thisArg संदर्भ के रूप में फ़ंक्शन foo में सेट करता है। call करने के लिए पारित सभी अन्य पैरामीटर फ़ंक्शन foo को तर्क के रूप में पास कर दिए जाते हैं।
तो उपरोक्त कोड {myObj: "is cool"}, [1, 2, 3] लॉग करेगा। किसी भी समारोह में इसका मूल्य बदलने के लिए बहुत अच्छा तरीका है।

apply लगभग समान है जैसा कि call स्वीकार करता है कि इसमें केवल दो पैरामीटर लगते हैं: thisArg और एक सरणी जिसमें फ़ंक्शन को पास करने के लिए तर्क शामिल हैं। तो उपरोक्त call कॉल का अनुवाद इस तरह apply करने के apply किया जा सकता है:

foo.apply(thisArg, [1,2,3])

ध्यान दें कि call और apply this सेट के मूल्य को डॉट विधि आमंत्रण द्वारा ओवरराइड कर सकते हैं, हमने दूसरी बुलेट में चर्चा की थी। काफी सरल :)

प्रस्तुत करना .... bind !

bind call का एक भाई है और apply । यह जावास्क्रिप्ट में वैश्विक Function कन्स्ट्रक्टर के सभी कार्यों द्वारा विरासत में प्राप्त एक विधि भी है। bind और call / apply बीच का अंतर यह है कि call और apply दोनों वास्तव में फ़ंक्शन का आह्वान करेंगे। दूसरी ओर, इस thisArg और arguments पूर्व-सेट के साथ एक नया कार्य देता है। आइए बेहतर समझने के लिए एक उदाहरण लें:

function foo (a, b) {
    console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */

bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`

तीनों के बीच अंतर देखें? यह सूक्ष्म है, लेकिन वे अलग-अलग उपयोग किए जाते हैं। call और apply , bind डॉट-विधि आमंत्रण द्वारा this सेट के मान को भी अधिक सवारी करेगा।

यह भी ध्यान रखें कि इन तीनों कार्यों में से कोई भी मूल कार्य में कोई बदलाव नहीं करता है। call और apply ताजा निर्माण कार्यों से मूल्य वापस कर देगा, जबकि bind के लिए तैयार ताजा बनाया गया कार्य स्वयं वापस कर देगा।

अतिरिक्त सामान, इसे कॉपी करें

कभी-कभी, आपको this तथ्य को पसंद नहीं है कि this गुंजाइश, विशेष रूप से नेस्टेड स्कोप के साथ बदलता है। निम्नलिखित उदाहरण पर एक नज़र डालें।

var myObj = {
    hello: function () {
        return "world"
        },
    myMethod: function () {
        // copy this, variable names are case-sensitive
        var that = this;
        // callbacks ftw \o/
        foo.bar("args", function () {
            // I want to call `hello` here
            this.hello(); // error
            // but `this` references to `foo` damn!
            // oh wait we have a backup \o/
            that.hello(); // "world"
        });
    }
  };

उपर्युक्त कोड में, हम देखते हैं कि इसका मूल्य नेस्टेड स्कोप के साथ बदल गया है, लेकिन हम मूल दायरे से इसका मूल्य चाहते थे। इसलिए हमने इसे 'कॉपी' किया और इसके बजाय प्रतिलिपि का उपयोग किया। चालाक, आह?

सूचकांक:

  1. डिफ़ॉल्ट रूप से इसमें क्या होता है?
  2. क्या होगा यदि हम ऑब्जेक्ट-डॉट नोटेशन के साथ फ़ंक्शन को विधि के रूप में कॉल करते हैं?
  3. क्या होगा यदि हम new कीवर्ड का उपयोग करते हैं?
  4. हम call साथ this कैसे apply और apply ?
  5. bind का उपयोग करना
  6. नेस्टेड-स्कोप समस्याओं को हल करने के लिए this कॉपी करना।

"यह" गुंजाइश के बारे में सब कुछ है। प्रत्येक फ़ंक्शन का अपना दायरा होता है, और चूंकि जेएस में सब कुछ एक वस्तु है, यहां तक ​​कि एक फ़ंक्शन भी "इस" का उपयोग करके कुछ मूल्यों को अपने आप में संग्रहीत कर सकता है। ओओपी 101 सिखाता है कि "यह" केवल किसी ऑब्जेक्ट के उदाहरणों पर लागू होता है। इसलिए, प्रत्येक बार एक फ़ंक्शन निष्पादित होता है, उस फ़ंक्शन के एक नए "उदाहरण" का "नया" का एक नया अर्थ होता है।

अधिकांश लोग भ्रमित हो जाते हैं जब वे अज्ञात बंद कार्यों के अंदर "इस" का उपयोग करने का प्रयास करते हैं जैसे:

(function(value) {
    this.value = value;
    $('.some-elements').each(function(elt){
        elt.innerHTML = this.value;        // uh oh!! possibly undefined
    });
})(2);

तो यहां, प्रत्येक () के अंदर, "यह" उस "मान" को नहीं रखता है जिसे आप उम्मीद करते हैं (से

this.value = value;
इसके ऊपर)। तो, इसे पाने के लिए (कोई इरादा नहीं है) समस्या, एक डेवलपर यह कर सकता है:

(function(value) {
    var self = this;            // small change
    self.value = value;
    $('.some-elements').each(function(elt){
        elt.innerHTML = self.value;        // phew!! == 2 
    });
})(2);

कोशिश करके देखो; आप प्रोग्रामिंग के इस पैटर्न को पसंद करना शुरू कर देंगे


Here is one good source of this in JavaScript .

Here is the summary:

  • global this

    In a browser, at the global scope, this is the window object

    <script type="text/javascript">
      console.log(this === window); // true
      var foo = "bar";
      console.log(this.foo); // "bar"
      console.log(window.foo); // "bar"
    

    In node using the repl, this is the top namespace. You can refer to it as global .

    >this
      { ArrayBuffer: [Function: ArrayBuffer],
        Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
        Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
        ...
    >global === this
     true
    

    In node executing from a script, this at the global scope starts as an empty object. It is not the same as global

    \\test.js
    console.log(this);  \\ {}
    console.log(this === global); \\ fasle
    
  • function this

Except in the case of DOM event handlers or when a thisArg is provided (see further down), both in node and in a browser using this in a function that is not called with new references the global scope…

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();
    console.log(this.foo); //logs "foo"
</script>

If you use use strict; , in which case this will be undefined

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      "use strict";
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
</script>

If you call a function with new the this will be a new context, it will not reference the global this .

<script type="text/javascript">
    foo = "bar";

    function testThis() {
      this.foo = "foo";
    }

    console.log(this.foo); //logs "bar"
    new testThis();
    console.log(this.foo); //logs "bar"

    console.log(new testThis().foo); //logs "foo"
</script>
  • prototype this

Functions you create become function objects. They automatically get a special prototype property, which is something you can assign values to. When you create an instance by calling your function with new you get access to the values you assigned to the prototype property. You access those values using this .

function Thing() {
  console.log(this.foo);
}

Thing.prototype.foo = "bar";

var thing = new Thing(); //logs "bar"
console.log(thing.foo);  //logs "bar"

It is usually a mistake to assign arrays or objects on the prototype . If you want instances to each have their own arrays, create them in the function, not the prototype.

function Thing() {
    this.things = [];
}

var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing1.things); //logs ["foo"]
console.log(thing2.things); //logs []
  • object this

You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new .

var obj = {
    foo: "bar",
    logFoo: function () {
        console.log(this.foo);
    }
};

obj.logFoo(); //logs "bar"
  • DOM event this

In an HTML DOM event handler, this is always a reference to the DOM element the event was attached to

function Listener() {
    document.getElementById("foo").addEventListener("click",
       this.handleClick);
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs "<div id="foo"></div>"
}

var listener = new Listener();
document.getElementById("foo").click();

Unless you bind the context

function Listener() {
    document.getElementById("foo").addEventListener("click", 
        this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
    console.log(this); //logs Listener {handleClick: function}
}

var listener = new Listener();
document.getElementById("foo").click();
  • HTML this

Inside HTML attributes in which you can put JavaScript, this is a reference to the element.

<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>
  • eval this

You can use eval to access this .

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
}

var thing = new Thing();
thing.logFoo();
  • with this

You can use with to add this to the current scope to read and write to values on this without referring to this explicitly.

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    with (this) {
        console.log(foo);
        foo = "foo";
    }
}

var thing = new Thing();
thing.logFoo(); // logs "bar"
console.log(thing.foo); // logs "foo"
  • jQuery this

the jQuery will in many places have this refer to a DOM element.

<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
    console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
    this.click();
});
</script>

this in Javascript always refers to the 'owner' of the function that is being executed .

If no explicit owner is defined, then the top most owner, the window object, is referenced.

So if I did

function someKindOfFunction() {
   this.style = 'foo';
}

element.onclick = someKindOfFunction;

this would refer to the element object. But be careful, a lot of people make this mistake

<element onclick="someKindOfFunction()">

In the latter case, you merely reference the function, not hand it over to the element. Therefor, this will refer to the window object.


this कीवर्ड अन्य भाषा की तुलना में जावास्क्रिप्ट में अलग-अलग व्यवहार करता है। ऑब्जेक्ट ओरिएंटेड भाषाओं में, this कीवर्ड कक्षा के वर्तमान उदाहरण को संदर्भित करता है। जावास्क्रिप्ट में इसका मान मुख्य रूप से फ़ंक्शन (संदर्भ। फ़ंक्शन context.function() ) के आमंत्रण संदर्भ और जहां इसे कहा जाता है, द्वारा निर्धारित किया जाता है।

1. जब वैश्विक संदर्भ में उपयोग किया जाता है

जब आप वैश्विक संदर्भ में इसका उपयोग this , तो यह वैश्विक वस्तु (ब्राउज़र में window ) के लिए बाध्य है

document.write(this);  //[object Window]

जब आप वैश्विक संदर्भ में परिभाषित फ़ंक्शन के अंदर इसका उपयोग this , तो this अभी भी वैश्विक वस्तु से जुड़ा हुआ है क्योंकि फ़ंक्शन वास्तव में वैश्विक संदर्भ की विधि बना देता है।

function f1()
{
   return this;
}
document.write(f1());  //[object Window]

ऊपर f1 को वैश्विक वस्तु का एक तरीका बनाया गया है। इस प्रकार हम इसे window ऑब्जेक्ट पर भी निम्नानुसार कॉल कर सकते हैं:

function f()
{
    return this;
}

document.write(window.f()); //[object Window]

2. ऑब्जेक्ट विधि के अंदर उपयोग किया जाता है

जब आप किसी ऑब्जेक्ट विधि के अंदर this कीवर्ड का उपयोग this , तो this "तत्काल" संलग्न वस्तु से जुड़ा होता है।

var obj = {
    name: "obj",
    f: function () {
        return this + ":" + this.name;
    }
};
document.write(obj.f());  //[object Object]:obj

ऊपर मैंने शब्द को दोहरे उद्धरणों में तत्काल रखा है। यह मुद्दा बनाना है कि यदि आप वस्तु को किसी अन्य वस्तु के अंदर घोंसला करते हैं, तो this तत्काल माता-पिता से बंधे हैं।

var obj = {
    name: "obj1",
    nestedobj: {
        name:"nestedobj",
        f: function () {
            return this + ":" + this.name;
        }
    }            
}

document.write(obj.nestedobj.f()); //[object Object]:nestedobj

यहां तक ​​कि यदि आप ऑब्जेक्ट को विधि के रूप में स्पष्ट रूप से फ़ंक्शन जोड़ते हैं, तो यह अभी भी उपरोक्त नियमों का पालन करता है, यह अभी भी तत्काल मूल वस्तु को इंगित करता है।

var obj1 = {
    name: "obj1",
}

function returnName() {
    return this + ":" + this.name;
}

obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1

3. संदर्भ-कम कार्य का आह्वान करते समय

जब आप this अंदर के फ़ंक्शन का उपयोग करते हैं जिसे किसी भी संदर्भ के बिना बुलाया जाता है (यानी किसी ऑब्जेक्ट पर नहीं), तो यह वैश्विक ऑब्जेक्ट (ब्राउज़र में window ) से जुड़ा हुआ है (भले ही फ़ंक्शन को ऑब्जेक्ट के अंदर परिभाषित किया गया हो)।

var context = "global";

var obj = {  
    context: "object",
    method: function () {                  
        function f() {
            var context = "function";
            return this + ":" +this.context; 
        };
        return f(); //invoked without context
    }
};

document.write(obj.method()); //[object Window]:global 

इसे सभी कार्यों के साथ कोशिश कर रहा है

हम कार्यों के साथ अंक के ऊपर भी कोशिश कर सकते हैं। हालांकि कुछ मतभेद हैं।

  • ऊपर हमने वस्तुओं को शाब्दिक नोटेशन का उपयोग करके वस्तुओं में जोड़ा। हम इसका उपयोग करके कार्यों में सदस्यों को जोड़ सकते हैं। उन्हें निर्दिष्ट करने के लिए।
  • ऑब्जेक्ट शाब्दिक नोटेशन ऑब्जेक्ट का एक उदाहरण बनाता है जिसे हम तुरंत उपयोग कर सकते हैं। फ़ंक्शन के साथ हमें पहले new ऑपरेटर का उपयोग करके अपना उदाहरण बनाना होगा।
  • ऑब्जेक्ट शाब्दिक दृष्टिकोण में, हम स्पष्ट रूप से डॉट ऑपरेटर का उपयोग कर पहले से परिभाषित ऑब्जेक्ट में सदस्यों को जोड़ सकते हैं। यह केवल विशिष्ट उदाहरण में जोड़ा जाता है। हालांकि मैंने फ़ंक्शन प्रोटोटाइप में चर जोड़ा है ताकि यह फ़ंक्शन के सभी उदाहरणों में दिखाई दे।

नीचे मैंने ऑब्जेक्ट और उपर्युक्त सभी चीजों की कोशिश की, लेकिन पहले किसी ऑब्जेक्ट को लिखने के बजाय फ़ंक्शन बनाकर।

/********************************************************************* 
  1. When you add variable to the function using this keyword, it 
     gets added to the function prototype, thus allowing all function 
     instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
    this.name = "ObjDefinition";
    this.getName = function(){                
        return this+":"+this.name;
    }
}        

obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition   

/********************************************************************* 
   2. Members explicitly added to the function protorype also behave 
      as above: all function instances have their own copy of the 
      variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
    return "v"+this.version; //see how this.version refers to the
                             //version variable added through 
                             //prototype
}
document.write(obj1.getVersion() + "<br />"); //v1

/********************************************************************* 
   3. Illustrating that the function variables added by both above 
      ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
    this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1

obj2.incrementVersion();      //incrementing version in obj2
                              //does not affect obj1 version

document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1

/********************************************************************* 
   4. `this` keyword refers to the immediate parent object. If you 
       nest the object through function prototype, then `this` inside 
       object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj', 
                                    getName1 : function(){
                                        return this+":"+this.name;
                                    }                            
                                  };

document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj

/********************************************************************* 
   5. If the method is on an object's prototype chain, `this` refers 
      to the object the method was called on, as if the method was on 
      the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
                                    //as its prototype
obj3.a = 999;                       //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
                                    //calling obj3.fun() makes 
                                    //ProtoObj.fun() to access obj3.a as 
                                    //if fun() is defined on obj3

4. जब कन्स्ट्रक्टर फ़ंक्शन के अंदर उपयोग किया जाता है

जब फ़ंक्शन को कन्स्ट्रक्टर के रूप में उपयोग किया जाता है (वह तब होता है जब इसे new कीवर्ड के साथ बुलाया जाता है), this फ़ंक्शन बॉडी के अंदर बनाई गई नई वस्तु को इंगित करता है।

var myname = "global context";
function SimpleFun()
{
    this.myname = "simple function";
}

var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
//   object being constructed thus adding any member
//   created inside SimipleFun() using this.membername to the
//   object being constructed
//2. And by default `new` makes function to return newly 
//   constructed object if no explicit return value is specified

document.write(obj1.myname); //simple function

5. प्रोटोटाइप श्रृंखला पर परिभाषित फ़ंक्शन के अंदर उपयोग किए जाने पर

यदि विधि किसी ऑब्जेक्ट की प्रोटोटाइप श्रृंखला पर है, तो this तरह की विधि के अंदर उस ऑब्जेक्ट को संदर्भित किया जाता है जिस पर विधि को कॉल किया गया था, जैसे कि ऑब्जेक्ट पर विधि परिभाषित की गई है।

var ProtoObj = {
    fun: function () {
        return this.a;
    }
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun() 
//to be the method on its prototype chain

var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999

//Notice that fun() is defined on obj3's prototype but 
//`this.a` inside fun() retrieves obj3.a   

6. कॉल () के अंदर, लागू करें () और बाइंड () फ़ंक्शंस

  • इन सभी विधियों को Function.prototype पर परिभाषित किया गया है।
  • ये विधियां एक बार एक समारोह लिखने और विभिन्न संदर्भों में इसका आह्वान करने की अनुमति देती हैं। दूसरे शब्दों में, वे this के मान को निर्दिष्ट करने की अनुमति देते हैं जिसका उपयोग फ़ंक्शन निष्पादित होने पर किया जाएगा। जब भी इसे बुलाया जाता है तो वे मूल कार्य को पारित करने के लिए भी कोई पैरामीटर लेते हैं।
  • fun.apply(obj1 [, argsArray]) obj1 को this fun() अंदर fun() के मान के रूप में सेट करता है और तर्क के तत्वों को गुजरता है fun() तर्कों के रूप में अपने तर्क के रूप में।
  • fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - obj1 को this fun() अंदर fun() के मान के रूप में सेट करता है और fun() कॉल करता fun() arg1, arg2, arg3, ... इसके तर्क के रूप में।
  • fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) - फ़ंक्शन fun के संदर्भ को इस fun साथ obj1 बाध्य करता है और पैरामीटर को निर्दिष्ट पैरामीटर के लिए fun पैरामीटर देता है arg1, arg2, arg3,...
  • अब तक apply , call और bind बीच का अंतर स्पष्ट होना चाहिए। apply सरणी-जैसी वस्तु के रूप में कार्य करने के लिए तर्क निर्दिष्ट apply अनुमति देता है यानी एक संख्यात्मक length संपत्ति और संबंधित गैर-ऋणात्मक पूर्णांक गुण वाली वस्तु। जबकि call सीधे फ़ंक्शन को तर्क निर्दिष्ट करने की अनुमति देता है। apply और call दोनों निर्दिष्ट संदर्भ में और निर्दिष्ट तर्कों के साथ तुरंत फ़ंक्शन को आमंत्रित करते हैं। दूसरी तरफ, bind बस this मान और तर्क के निर्दिष्ट कार्य को वापस कर देता है। हम इसे एक परिवर्तनीय को असाइन करके इस लौटाए गए फ़ंक्शन के संदर्भ को कैप्चर कर सकते हैं और बाद में हम इसे किसी भी समय कॉल कर सकते हैं।
function add(inc1, inc2)
{
    return this.a + inc1 + inc2;
}

var o = { a : 4 };
document.write(add.call(o, 5, 6)+"<br />"); //15
      //above add.call(o,5,6) sets `this` inside
      //add() to `o` and calls add() resulting:
      // this.a + inc1 + inc2 = 
      // `o.a` i.e. 4 + 5 + 6 = 15
document.write(add.apply(o, [5, 6]) + "<br />"); //15
      // `o.a` i.e. 4 + 5 + 6 = 15

var g = add.bind(o, 5, 6);       //g: `o.a` i.e. 4 + 5 + 6
document.write(g()+"<br />");    //15

var h = add.bind(o, 5);          //h: `o.a` i.e. 4 + 5 + ?
document.write(h(6) + "<br />"); //15
      // 4 + 5 + 6 = 15
document.write(h() + "<br />");  //NaN
      //no parameter is passed to h()
      //thus inc2 inside add() is `undefined`
      //4 + 5 + undefined = NaN</code>

7. this घटना के हैंडलर के अंदर

  • जब आप किसी तत्व के इवेंट हैंडलर को सीधे फ़ंक्शन असाइन करते हैं, तो this सीधे अंदर इवेंट हैंडलिंग फ़ंक्शन का उपयोग संबंधित तत्व को संदर्भित करता है। इस तरह के प्रत्यक्ष कार्य असाइनमेंट addeventListener विधि या पारंपरिक घटना पंजीकरण विधियों जैसे onclick माध्यम से किया जा सकता है।
  • इसी प्रकार, जब आप this घटना का उपयोग सीधे घटना संपत्ति के अंदर करते हैं (जैसे <button onclick="...this..." > तत्व के, यह तत्व को संदर्भित करता है।
  • हालांकि इवेंट हैंडलिंग फ़ंक्शन या ईवेंट प्रॉपर्टी के अंदर बुलाए गए अन्य फ़ंक्शन के माध्यम से अप्रत्यक्ष रूप से इसका उपयोग वैश्विक ऑब्जेक्ट window हल हो जाता है।
  • माइक्रोसॉफ्ट के इवेंट पंजीकरण मॉडल विधि attachEvent का उपयोग करते हुए हम ईवेंट हैंडलर को फ़ंक्शन संलग्न करते समय उपर्युक्त व्यवहार प्राप्त होता है। ईवेंट हैंडलर (और इस प्रकार तत्व की फ़ंक्शन विधि बनाने) को फ़ंक्शन असाइन करने के बजाय, यह ईवेंट पर फ़ंक्शन को कॉल करता है (प्रभावी रूप से इसे वैश्विक संदर्भ में बुलाता है)।

मैं JSFiddle में इसे बेहतर तरीके से करने की सलाह देता JSFiddle

<script> 
    function clickedMe() {
       alert(this + " : " + this.tagName + " : " + this.id);
    } 
    document.getElementById("button1").addEventListener("click", clickedMe, false);
    document.getElementById("button2").onclick = clickedMe;
    document.getElementById("button5").attachEvent('onclick', clickedMe);   
</script>

<h3>Using `this` "directly" inside event handler or event property</h3>
<button id="button1">click() "assigned" using addEventListner() </button><br />
<button id="button2">click() "assigned" using click() </button><br />
<button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>

<h3>Using `this` "indirectly" inside event handler or event property</h3>
<button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />

<button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />

IE only: <button id="button5">click() "attached" using attachEvent() </button>

चूंकि यह धागा उछला है, मैंने this विषय के लिए नए पाठकों के लिए कुछ अंक संकलित किए हैं।

this का मूल्य कैसे निर्धारित किया जाता है?

हम इस तरह प्रयोग करते हैं जैसे हम अंग्रेजी जैसे प्राकृतिक भाषाओं में सर्वनाम का उपयोग करते हैं: "जॉन तेजी से दौड़ रहा है क्योंकि वह ट्रेन पकड़ने की कोशिश कर रहा है।" इसके बजाय हम लिख सकते थे "... जॉन ट्रेन पकड़ने की कोशिश कर रहा है"।

var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {

    // We use "this" just as in the sentence above:
       console.log(this.firstName + " " + this.lastName);

    // We could have also written:
       console.log(person.firstName + " " + person.lastName);
    }
}

this is not assigned a value until an object invokes the function where it is defined. In the global scope, all global variables and functions are defined on the window object. Therefore, this in a global function refers to (and has the value of) the global window object.

When use strict , this in global and in anonymous functions that are not bound to any object holds a value of undefined .

The this keyword is most misunderstood when: 1) we borrow a method that uses this , 2) we assign a method that uses this to a variable, 3) a function that uses this is passed as a callback function, and 4) this is used inside a closure — an inner function. (2)

What holds the future

Defined in ECMA Script 6 , arrow-functions adopt the this binding from the enclosing (function or global) scope.

function foo() {
     // return an arrow function
     return (a) => {
     // `this` here is lexically inherited from `foo()`
     console.log(this.a);
  };
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!

While arrow-functions provide an alternative to using bind() , it's important to note that they essentially are disabling the traditional this mechanism in favor of more widely understood lexical scoping. (1)

References:

  1. this & Object Prototypes , by Kyle Simpson. © 2014 Getify Solutions.
  2. javascriptissexy.com - http://goo.gl/pvl0GX
  3. Angus Croll - http://goo.gl/Z2RacU

Every function execution context in javascript has a scope context this parameter that is set by:

  1. How the function is called (including as an object method, use of call and apply , use of new )
  2. Use of bind
  3. Lexically for arrow functions (they adopt the this of their outer execution context)

Whatever that scope context is, is referenced by "this".

You can change that set the value of this scope context using func.call , func.apply or func.bind .

By default, and what confuses most beginners, when a callback listener is called after an event is raised on a DOM element, the scope context this value of the function is the DOM element.

jQuery makes this trivial to change with jQuery.proxy.


In pseudoclassical terms, the way many lectures teach the 'this' keyword is as an object instantiated by a class or object constructor. Each time a new object is constructed from a class, imagine that under the hood a local instance of a 'this' object is created and returned. I remember it taught like this:

function Car(make, model, year) {
var this = {}; // under the hood, so to speak
this.make = make;
this.model = model;
this.year = year;
return this; // under the hood
}

var mycar = new Car('Eagle', 'Talon TSi', 1993);
// ========= under the hood
var this = {};
this.make = 'Eagle';
this.model = 'Talon TSi';
this.year = 1993;
return this;

Probably the most detailed and comprehensive article on this is the following:

Gentle explanation of 'this' keyword in JavaScript

The idea behind this is to understand that the function invocation types have the significant importance on setting this value.

When having troubles identifying this , do not ask yourself:

Where is this taken from ?

but do ask yourself:

How is the function invoked ?

For an arrow function (special case of context transparency) ask yourself:

What value has this where the arrow function is defined ?

This mindset is correct when dealing with this and will save you from headache.


The value of "this" depends on the "context" in which the function is executed. The context can be any object or the global object, ie, window.

So the Semantic of "this" is different from the traditional OOP languages. And it causes problems: 1. when a function is passed to another variable (most likely, a callback); and 2. when a closure is invoked from a member method of a class.

In both cases, this is set to window.


This is the best explanation I've seen. Understand JavaScripts this with Clarity

The this reference ALWAYS refers to (and holds the value of) an object—a singular object—and it is usually used inside a function or a method, although it can be used outside a function in the global scope. Note that when we use strict mode, this holds the value of undefined in global functions and in anonymous functions that are not bound to any object.

There are Four Conditions where this can be confusing:

  1. When we pass a method (that uses this ) as a parameter to be used as a callback function.
  2. Another instance when this is misunderstood is when we use an inner method (a closure). It is important to take note that closures cannot access the outer function's this variable by using the this keyword because the this variable is accessible only by the function itself, not by inner functions.
  3. Using this when a method is assigned to a variable. The this value is bound to another object, if we assign a method that uses this to a variable
  4. Using this when using bind, apply, and call methods.

He gives code examples, the explanations, and the code fixes which I thought was very helpful.


Whould quirksmode.org/js/this.html help? (Most confusion of 'this' in javascript is coming from the fact that it generally is not linked to your object, but to the current executing scope -- that might not be exactly how it works but is always feels like that to me -- see the article for a complete explanation)


"यह" गुंजाइश के बारे में सब कुछ है। प्रत्येक फ़ंक्शन का अपना दायरा होता है, और चूंकि जेएस में सब कुछ एक वस्तु है, यहां तक ​​कि एक फ़ंक्शन भी "इस" का उपयोग करके कुछ मूल्यों को अपने आप में संग्रहीत कर सकता है।

$('#a').click(function(){
console.log($(this).attr('href'));
});





this