જાવાસ્ક્રિપ્ટ 'this' બાઈન્ડિંગ: કોન્ટેક્ષ્ટ સ્વિચિંગ અને એરો ફંક્શનના વર્તનમાં નિપુણતા

જાવાસ્ક્રિપ્ટમાં this કીવર્ડ એક શક્તિશાળી પરંતુ ઘણીવાર ગૂંચવણભરી કલ્પના છે. તે ફંક્શનના એક્ઝેક્યુશન કોન્ટેક્ષ્ટનો સંદર્ભ આપે છે, જે નક્કી કરે છે કે ફંક્શન કયા ઓબ્જેક્ટ પર કાર્ય કરી રહ્યું છે. this કેવી રીતે વર્તે છે તે સમજવું સાચો અને જાળવી શકાય તેવો જાવાસ્ક્રિપ્ટ કોડ લખવા માટે નિર્ણાયક છે, ખાસ કરીને જટિલ એપ્લિકેશન્સમાં. આ માર્ગદર્શિકાનો હેતુ this ને સ્પષ્ટ કરવાનો છે, જેમાં તેના વિવિધ કોન્ટેક્ષ્ટ, તેને કેવી રીતે સંચાલિત કરવું, અને એરો ફંક્શન્સના વિશિષ્ટ વર્તનનો સમાવેશ થાય છે. અમે વિશ્વભરના ડેવલપર્સ માટે સંબંધિત વ્યવહારુ ઉદાહરણોનું અન્વેષણ કરીશું, તમારા સ્થાન અથવા સાંસ્કૃતિક પૃષ્ઠભૂમિને ધ્યાનમાં લીધા વિના સ્પષ્ટતા સુનિશ્ચિત કરીશું.

ડિફૉલ્ટ 'this' બાઈન્ડિંગને સમજવું

જાવાસ્ક્રિપ્ટમાં, this નું મૂલ્ય રનટાઇમ પર નક્કી થાય છે, જે ફંક્શનને કેવી રીતે કૉલ કરવામાં આવે છે તેના પર આધાર રાખે છે. ડિફૉલ્ટ બાઈન્ડિંગના નિયમો નીચે મુજબ છે:

1. ગ્લોબલ કોન્ટેક્ષ્ટ

જ્યારે કોઈ ફંક્શનને ગ્લોબલ કોન્ટેક્ષ્ટમાં કૉલ કરવામાં આવે છે (એટલે કે, કોઈ ઓબ્જેક્ટ કે બીજા ફંક્શનની અંદર નહીં), ત્યારે this ગ્લોબલ ઓબ્જેક્ટનો સંદર્ભ આપે છે. બ્રાઉઝર્સમાં, આ સામાન્ય રીતે window ઓબ્જેક્ટ હોય છે. Node.js માં, તે global ઓબ્જેક્ટ હોય છે. નોંધ લો કે સ્ટ્રિક્ટ મોડમાં ("use strict";), ગ્લોબલ કોન્ટેક્ષ્ટમાં this નું મૂલ્ય undefined હશે.

ઉદાહરણ (બ્રાઉઝર):

            function globalFunction() {
  console.log(this === window); // true (without strict mode)
  console.log(this); // window object (without strict mode)
}

globalFunction();

            

              
                Copy
              
            
          

ઉદાહરણ (Node.js):

            function globalFunction() {
  console.log(this === global); // true (without strict mode)
  console.log(this); // global object (without strict mode)
}

globalFunction();

            

              
                Copy
              
            
          

ઉદાહરણ (સ્ટ્રિક્ટ મોડ):

            "use strict";
function globalFunction() {
  console.log(this === undefined); // true
  console.log(this); // undefined
}

globalFunction();

            

              
                Copy
              
            
          

2. ઇમ્પ્લિસિટ બાઈન્ડિંગ

જ્યારે કોઈ ફંક્શનને કોઈ ઓબ્જેક્ટની મેથડ તરીકે કૉલ કરવામાં આવે છે, ત્યારે this તે ઓબ્જેક્ટનો સંદર્ભ આપે છે જેના પર મેથડ કૉલ કરવામાં આવી રહી છે. આને ઇમ્પ્લિસિટ બાઈન્ડિંગ તરીકે ઓળખવામાં આવે છે કારણ કે કોન્ટેક્ષ્ટ ઓબ્જેક્ટ દ્વારા ગર્ભિત રીતે પ્રદાન કરવામાં આવે છે.

ઉદાહરણ:

            const myObject = {
  name: "Example Object",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

myObject.greet(); // Output: Hello, my name is Example Object

            

              
                Copy
              
            
          

3. એક્સપ્લિસિટ બાઈન્ડિંગ

જાવાસ્ક્રિપ્ટ this નું મૂલ્ય સ્પષ્ટપણે સેટ કરવા માટે ત્રણ મેથડ્સ – call, apply, અને bind – પૂરી પાડે છે. જ્યારે ઇમ્પ્લિસિટ બાઈન્ડિંગ ઇચ્છિત પરિણામ પ્રદાન ન કરે ત્યારે એક્ઝેક્યુશન કોન્ટેક્ષ્ટને નિયંત્રિત કરવા માટે આ મેથડ્સ આવશ્યક છે.

a. call

call મેથડ તમને નિર્દિષ્ટ this મૂલ્ય અને વ્યક્તિગત રીતે પાસ કરેલા આર્ગ્યુમેન્ટ્સ સાથે ફંક્શનને કૉલ કરવાની મંજૂરી આપે છે.

સિન્ટેક્સ:

            function.call(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

ઉદાહરણ:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.call(anotherPerson, "Hello"); // Output: Hello, my name is Bob

            

              
                Copy
              
            
          

b. apply

apply મેથડ call જેવી જ છે, પરંતુ તે આર્ગ્યુમેન્ટ્સને એરે તરીકે સ્વીકારે છે.

સિન્ટેક્સ:

            function.apply(thisArg, [argsArray])

            

              
                Copy
              
            
          

ઉદાહરણ:

            const person = {
  name: "Alice",
  greet: function(greeting, punctuation) {
    console.log(greeting + ", my name is " + this.name + punctuation);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.apply(anotherPerson, ["Hello", "!"]); // Output: Hello, my name is Bob!

            

              
                Copy
              
            
          

c. bind

bind મેથડ એક નવું ફંક્શન બનાવે છે જે, જ્યારે કૉલ કરવામાં આવે, ત્યારે તેનો this કીવર્ડ પૂરા પાડવામાં આવેલા મૂલ્ય પર સેટ હોય છે. call અને apply થી વિપરીત, bind ફંક્શનને તરત જ કૉલ કરતું નથી; તે એક નવું ફંક્શન પરત કરે છે જેને પછીથી કૉલ કરી શકાય છે.

સિન્ટેક્સ:

            function.bind(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

ઉદાહરણ:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

const greetBob = person.greet.bind(anotherPerson, "Hello");
greetBob(); // Output: Hello, my name is Bob

            

              
                Copy
              
            
          

4. ન્યૂ બાઈન્ડિંગ

જ્યારે કોઈ ફંક્શનને new કીવર્ડ સાથે કૉલ કરવામાં આવે છે, ત્યારે એક નવો ઓબ્જેક્ટ બનાવવામાં આવે છે, અને this તે નવા ઓબ્જેક્ટ સાથે બંધાયેલું હોય છે. આ સામાન્ય રીતે કન્સ્ટ્રક્ટર ફંક્શન્સમાં ઓબ્જેક્ટની પ્રોપર્ટીઝને શરૂ કરવા માટે વપરાય છે.

ઉદાહરણ:

            function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const alice = new Person("Alice");
alice.greet(); // Output: Hello, my name is Alice

            

              
                Copy
              
            
          

એરો ફંક્શન્સ અને લેક્સિકલ 'this'

ECMAScript 6 (ES6) માં રજૂ કરાયેલા એરો ફંક્શન્સ (() => {}) this ના સંદર્ભમાં એક વિશિષ્ટ વર્તન ધરાવે છે. સામાન્ય ફંક્શન્સથી વિપરીત, એરો ફંક્શન્સનું પોતાનું this બાઈન્ડિંગ હોતું નથી. તેના બદલે, તેઓ આસપાસના સ્કોપમાંથી this મૂલ્ય વારસામાં મેળવે છે, જેને લેક્સિકલ સ્કોપિંગ તરીકે ઓળખવામાં આવે છે. આનો અર્થ એ છે કે એરો ફંક્શનની અંદરનું this તેને સમાવતા ફંક્શન અથવા સ્કોપના this મૂલ્યનો સંદર્ભ આપે છે.

this નું આ લેક્સિકલ બાઈન્ડિંગ કોડને સરળ બનાવી શકે છે અને પરંપરાગત ફંક્શન બાઈન્ડિંગ સાથે સંકળાયેલી સામાન્ય મુશ્કેલીઓને ટાળી શકે છે, ખાસ કરીને જ્યારે કૉલબેક્સ અને નેસ્ટેડ ફંક્શન્સ સાથે કામ કરતી વખતે.

ઉદાહરણ:

            const myObject = {
  name: "Example Object",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, my name is " + this.name); // this refers to myObject
    }, 1000);
  }
};

myObject.greet(); // Output (after 1 second): Hello, my name is Example Object

            

              
                Copy
              
            
          

ઉપરોક્ત ઉદાહરણમાં, setTimeout ની અંદરનું એરો ફંક્શન greet ફંક્શનમાંથી this વારસામાં મેળવે છે, જે myObject સાથે બંધાયેલું છે. જો એરો ફંક્શનને બદલે સામાન્ય ફંક્શનનો ઉપયોગ કરવામાં આવ્યો હોત, તો તમારે સાચા કોન્ટેક્ષ્ટને એક્સેસ કરવા માટે .bind(this) નો ઉપયોગ કરવો પડત અથવા this ને વેરિયેબલમાં સંગ્રહિત કરવું પડત (દા.ત., const self = this;).

સામાન્ય ફંક્શન સાથે સરખામણી:

            const myObject = {
  name: "Example Object",
  greet: function() {
    const self = this; // Capture 'this'
    setTimeout(function() {
      console.log("Hello, my name is " + self.name); // Need to use 'self'
    }, 1000);
  }
};

myObject.greet();

            

              
                Copy
              
            
          

'this' બાઈન્ડિંગ નિયમોની અગ્રતા

જ્યારે એકથી વધુ બાઈન્ડિંગ નિયમો લાગુ પડે છે, ત્યારે જાવાસ્ક્રિપ્ટ this નું મૂલ્ય નક્કી કરવા માટે એક ચોક્કસ અગ્રતા ક્રમ અનુસરે છે:

1. ન્યૂ બાઈન્ડિંગ: જો ફંક્શનને new સાથે કૉલ કરવામાં આવે, તો this નવા બનાવેલા ઓબ્જેક્ટનો સંદર્ભ આપે છે.
2. એક્સપ્લિસિટ બાઈન્ડિંગ: જો call, apply, અથવા bind નો ઉપયોગ કરવામાં આવે, તો this સ્પષ્ટપણે નિર્દિષ્ટ મૂલ્ય પર સેટ થાય છે.
3. ઇમ્પ્લિસિટ બાઈન્ડિંગ: જો ફંક્શનને ઓબ્જેક્ટની મેથડ તરીકે કૉલ કરવામાં આવે, તો this તે ઓબ્જેક્ટનો સંદર્ભ આપે છે.
4. ડિફૉલ્ટ બાઈન્ડિંગ: જો ઉપરોક્ત કોઈ નિયમો લાગુ ન પડતા હોય, તો this ગ્લોબલ ઓબ્જેક્ટ (અથવા સ્ટ્રિક્ટ મોડમાં undefined) નો સંદર્ભ આપે છે.

એરો ફંક્શન્સ, તેમના લેક્સિકલ this સાથે, આ નિયમોને અસરકારક રીતે બાયપાસ કરે છે અને તેમના આસપાસના સ્કોપમાંથી this વારસામાં મેળવે છે.

સામાન્ય ઉપયોગના કિસ્સાઓ અને ઉદાહરણો

વિવિધ જાવાસ્ક્રિપ્ટ પરિસ્થિતિઓમાં this ને સમજવું નિર્ણાયક છે. અહીં કેટલાક સામાન્ય ઉપયોગના કિસ્સાઓ છે:

1. ઇવેન્ટ હેન્ડલર્સ

ઇવેન્ટ હેન્ડલર્સમાં (દા.ત., બટન ક્લિક્સ, ફોર્મ સબમિશનનો પ્રતિસાદ આપવો), this સામાન્ય રીતે તે DOM એલિમેન્ટનો સંદર્ભ આપે છે જેણે ઇવેન્ટને ટ્રિગર કરી છે.

ઉદાહરણ (બ્રાઉઝર):

            <button id="myButton">Click Me</button>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    console.log(this === button); // true
    this.textContent = "Clicked!"; // Change button text
  });
</script>

            

              
                Copy
              
            
          

ઇવેન્ટ હેન્ડલર્સમાં એરો ફંક્શન્સનો ઉપયોગ કરવો મુશ્કેલ હોઈ શકે છે જો તમારે તે એલિમેન્ટને એક્સેસ કરવાની જરૂર હોય જેણે ઇવેન્ટને ટ્રિગર કરી છે કારણ કે this તે એલિમેન્ટ સાથે બંધાયેલું નહીં હોય. આવા કિસ્સાઓમાં, સામાન્ય ફંક્શનનો ઉપયોગ કરવો અથવા ઇવેન્ટ ઓબ્જેક્ટ (event.target) ને એક્સેસ કરવું વધુ યોગ્ય છે.

2. ઓબ્જેક્ટ-ઓરિએન્ટેડ પ્રોગ્રામિંગ (OOP)

OOP માં, ઓબ્જેક્ટની મેથડ્સમાં ઓબ્જેક્ટની પ્રોપર્ટીઝ અને મેથડ્સને એક્સેસ કરવા માટે this મૂળભૂત છે. ડેટા અને વર્તનને સમાવતા ક્લાસ અને ઓબ્જેક્ટ બનાવવા માટે આ જરૂરી છે.

ઉદાહરણ:

            class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.getArea()); // Output: 50

            

              
                Copy
              
            
          

3. કૉલબેક્સ

જ્યારે કૉલબેક્સનો ઉપયોગ કરવામાં આવે છે (દા.ત., એસિંક્રોનસ ઓપરેશન્સમાં), ત્યારે this નું મૂલ્ય અણધારી હોઈ શકે છે. એરો ફંક્શન્સનો ઉપયોગ લેક્સિકલ this ને સાચવીને કોડને સરળ બનાવી શકે છે.

ઉદાહરણ:

            function fetchData(callback) {
  // Simulate an asynchronous operation
  setTimeout(() => {
    const data = { message: "Data fetched successfully" };
    callback(data);
  }, 1000);
}

const myObject = {
  name: "My Object",
  processData: function() {
    fetchData((data) => {
      console.log(this.name + ": " + data.message); // 'this' refers to myObject
    });
  }
};

myObject.processData(); // Output (after 1 second): My Object: Data fetched successfully

            

              
                Copy
              
            
          

4. ક્લોઝર્સ

ક્લોઝર્સ ક્યારેક this સાથે અણધારી રીતે ક્રિયા-પ્રતિક્રિયા કરી શકે છે. ક્લોઝર્સ કેવી રીતે વેરિયેબલ્સને કેપ્ચર કરે છે, જેમાં this નો સમાવેશ થાય છે, તે સમજવું મહત્વપૂર્ણ છે.

ઉદાહરણ:

            function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
console.log(counter.getCount()); // Output: 2

            

              
                Copy
              
            
          

મુશ્કેલીઓ અને શ્રેષ્ઠ પદ્ધતિઓ

જ્યારે this લવચીકતા પ્રદાન કરે છે, ત્યારે તે સામાન્ય ભૂલો તરફ પણ દોરી શકે છે. અહીં ટાળવા જેવી કેટલીક મુશ્કેલીઓ અને અનુસરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ છે:

• ઇવેન્ટ હેન્ડલર્સમાં 'this' ગુમાવવું: ખાતરી કરો કે ઇવેન્ટ લિસનર્સનો ઉપયોગ કરતી વખતે this યોગ્ય રીતે બંધાયેલું છે. .bind() અથવા એરો ફંક્શન્સનો ઉપયોગ કરવાનું વિચારો, અથવા ઇવેન્ટ ટાર્ગેટને સીધું એક્સેસ કરો.
• કૉલબેક્સમાં 'this' ની ગૂંચવણ: કૉલબેક્સનો ઉપયોગ કરતી વખતે કોન્ટેક્ષ્ટનું ધ્યાન રાખો, ખાસ કરીને એસિંક્રોનસ ઓપરેશન્સમાં. એરો ફંક્શન્સ ઘણીવાર આને સરળ બનાવી શકે છે.
• એક્સપ્લિસિટ બાઈન્ડિંગનો વધુ પડતો ઉપયોગ: જ્યારે call, apply, અને bind શક્તિશાળી છે, ત્યારે તેનો વધુ પડતો ઉપયોગ ટાળો. વિચારો કે શું ઇમ્પ્લિસિટ બાઈન્ડિંગ અથવા એરો ફંક્શન્સ ઇચ્છિત પરિણામ વધુ સ્પષ્ટપણે પ્રાપ્ત કરી શકે છે.
• સ્ટ્રિક્ટ મોડમાં 'this': યાદ રાખો કે સ્ટ્રિક્ટ મોડમાં ગ્લોબલ કોન્ટેક્ષ્ટમાં this undefined હોય છે.
• લેક્સિકલ 'this' ને સમજવું: ધ્યાન રાખો કે એરો ફંક્શન્સ આસપાસના સ્કોપમાંથી this વારસામાં મેળવે છે, જે ફાયદાકારક હોઈ શકે છે પરંતુ સાવચેતીપૂર્વક વિચારણા પણ જરૂરી છે.

આંતરરાષ્ટ્રીય વિચારણાઓ

વૈશ્વિક પ્રેક્ષકો માટે ડેવલપમેન્ટ કરતી વખતે, એવો કોડ લખવો મહત્વપૂર્ણ છે જે ડેવલપરના સ્થાન અથવા સાંસ્કૃતિક પૃષ્ઠભૂમિને ધ્યાનમાં લીધા વિના સરળતાથી જાળવી શકાય અને સમજી શકાય. this નો સ્પષ્ટ અને સુસંગત ઉપયોગ, વ્યાપક દસ્તાવેજીકરણ સાથે, ખાતરી કરવામાં મદદ કરી શકે છે કે તમારો કોડ વિશ્વભરના ડેવલપર્સ માટે સુલભ છે. સુસંગત નામકરણ સંમેલનોનો ઉપયોગ કરવો અને વધુ પડતી જટિલ પેટર્ન ટાળવી પણ વાંચનક્ષમતામાં સુધારો કરી શકે છે.

ઉદાહરણ તરીકે, તમારા કોડ અથવા ટિપ્પણીઓમાં ભાષા-વિશિષ્ટ અથવા સાંસ્કૃતિક-વિશિષ્ટ શબ્દોનો ઉપયોગ કરવાનું ટાળો. વિવિધ ટીમો અને પ્રદેશોમાં આંતરકાર્યક્ષમતા અને સહયોગને પ્રોત્સાહન આપવા માટે પ્રમાણભૂત જાવાસ્ક્રિપ્ટ પદ્ધતિઓ અને સંમેલનોને વળગી રહો.

નિષ્કર્ષ

જાવાસ્ક્રિપ્ટમાં this કીવર્ડમાં નિપુણતા મેળવવી એ મજબૂત, જાળવી શકાય તેવી અને સ્કેલેબલ એપ્લિકેશન્સ લખવા માટે આવશ્યક છે. વિવિધ બાઈન્ડિંગ નિયમો, એરો ફંક્શન્સનું વર્તન અને સામાન્ય મુશ્કેલીઓને સમજવાથી તમને એવો કોડ લખવામાં સશક્ત બનાવશે જે કાર્યક્ષમ અને સમજવામાં સરળ બંને હોય. શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને અને વૈશ્વિક સંદર્ભને ધ્યાનમાં રાખીને, તમે જાવાસ્ક્રિપ્ટ એપ્લિકેશન્સ બનાવી શકો છો જે વિશ્વભરના ડેવલપર્સ માટે સુલભ અને જાળવી શકાય તેવી હોય. આ સમજ આંતરરાષ્ટ્રીય સેટઅપ્સમાં અસરકારક ટીમવર્ક માટે પરવાનગી આપે છે.

this ની તમારી સમજને મજબૂત કરવા માટે વિવિધ પરિસ્થિતિઓ અને ઉદાહરણો સાથે પ્રેક્ટિસ કરતા રહો. આ મૂળભૂત ખ્યાલ પર મજબૂત પકડ સાથે, તમે સૌથી જટિલ જાવાસ્ક્રિપ્ટ પડકારોનો સામનો કરવા માટે સારી રીતે સજ્જ હશો.