8.20 Global This

 

জাভাস্ক্রিপ্ট language টি বিভিন্ন environment এ ক্রমবর্ধমানভাবে ব্যবহৃত হচ্ছে। ওয়েব ব্রাউজার ছাড়াও বিভিন্ন হোস্ট যেমন – servers, smartphones, and বিভিন্ন robotic hardware এ আমরা javascript code run করতে পারি। প্রতিটি environment এরই নিজস্ব কিছু object model আছে এবং global object কে access করার জন্য তারা বিভিন্ন syntax provide করে থাকে। উদাহরণস্বরুপ বলা যায় যে – ওয়েব browser এ global object কে আমরা window, self, বা frames এর মাধ্যমে access করে থাকি। আবার node.js এ global object কে access করার জন্য js এ আমাদের window ব্যবহার করতে হয়। তেমনিভাবে Web Workers এ শুধুমাত্র slef দ্বারা global object কে access করা যায়।
এখন আমরা যদি কোন cross platform এর জন্য javscript code লিখতে চাই, তবে আমাদের বারবার if/else দ্বারা check করে global object বের করা লাগবে, যা যথেস্ট কষ্টসাধ্য। es2020 এর আগে আমাদের ঠিক এভাবেই কাজ করতে হতো।
কিন্তু es2020 globalThis কে introduce করার পর, আমাদের এই সমস্যা থেকে অনেকটাই মুক্তি মিলেছে। globalThis একটি standard global property কে define করার মাধ্যমে বিভিন্ন global object কে access করার পদ্ধতিসমূহকে একত্রিত করে। ফলে অতিরিক্ত কোন check/test ছাড়াই জাভাস্ক্রিপ্ট কোডটি বিভিন্ন environment এ কাজ করতে পারে। কারণ প্রতিটি environment এ globalThis সরাসরি সেই environment এর global object কে রেফার করে। আর যখন আমাদের লিখা জাভাস্ক্রিপ্ট কোড টি specifically কোন environment এ use হবে তা নিয়ে surity না থাকে, তখনই আমরা আমাদের জাভাক্রিপ্ট code এ global object কে access করার জন্য globalThis ব্যবহার করব।

Example :

Without globalThis

1. Window

Window property এর মাধ্যমে কারেন্ট document এর global object কে browser environment এ refer করা হয়।

var a = [10, 20];
 
console.log(window.a);          // → [10, 20]
console.log(a === window.a);    // → true

 

2. Self

Web workers এ global object কে access করার জন্য, self property ব্যবহার করা হয়।

// a web worker
console.log(self);    // => DedicatedWorkerGlobalScope {...}
 
var a = 10;
 
console.log(self.a);          // → 10
console.log(a === self.a);    // → true

 

3. Frames
ব্রাউসারে global object access করার জন্য অন্য আরেকটি মাধ্যম হল frame.

// browser environment
console.log(frames);    // => Window {...}

 

4. This
ব্রাউসারে global object কে access করার জন্য জাভাস্ক্রিপ্ট প্রোগ্রামের টপ লেভেলে this keyword ব্যবহার করা হয়।

this.foo = 123;
console.log(this.foo === window.foo);    // => true

With globalThis

// browser environment
console.log(globalThis);    // => Window {...}
 
// node.js environment
console.log(globalThis);    // => Object [global] {...}
 
// web worker environment
console.log(globalThis);    // => DedicatedWorkerGlobalScope {...}

 

উদাহরন
  • উদাহরণ- ১
const object = {
  message: "Hello, Good People!",
  getMessage() {
    const message = "Hello, World!";
    return this.message;
  },
};
console.log(object.getMessage()); //Hello, Good People!

object.getMessage() হলো একটি method invocation। আর কোন method এর ভেতরে this সর্বদাই সে যে object টির অন্তর্গত তা প্রকাশ করে।

তাই উল্লিখিত কোডটির আউটপুট হবে ‘Hello, Good People!’
উল্লেখ্য যে, এখানে মেথড টির ভেতর একটি variable declaration const message = ‘Hello, World!’ কিন্তু এই variable, this.message এর value কে influence করবে না।

 

  • উদাহরণ- ২
function Pet(name) {
  this.name = name;
  this.getName = () => this.name;
}
const cat = new Pet("Fluffy"); //Fluffy
console.log(cat.getName());
const { getName } = cat;
console.log(getName()); //Fluffy

 

  • উদাহরণ- ৩
const object = {
  message: "Hello, World!",
  logMessage() {
    console.log(this.message);
  },
};
setTimeout(object.logMessage, 1000);
//undefined

 

  • উদাহরণ- ৪
function getGrades() {
    var args = Array.prototype.slice.call(arguments, 1, 3);
    return args;
  }
   
  console.log(getGrades(90, 100, 75, 40, 89, 95)); //[100, 75]

 

  • উদাহরণ- ৫
const object = {
    who: "World",
    greet() {
      return `Hello, ${this.who}!`;
    },
    farewell: () => {
      return `Goodbye, ${this.who}!`;
    },
  };
  console.log(object.greet()); //Hello, World!
  console.log(object.farewell()); //Goodbye, undefined!

 

এসো নিজে করি
const object = {
    message: 'Hello, World!'
  };
  function logMessage() {
    console.log(this.message); // "Hello, World!"
  }
  // Write your code here...
  • logMessage function টিকে এমনভাবে কল দাও, যাতে তা ‘Hello, World!’ print করে।
var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}
const object = {
  length: 5,
  method(callback) {
    callback();
  },
};
object.method(callback, 1, 2);
  • উল্লিখিত কোডটির আউটপুট কি?
var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}
const object = {
  length: 5,
  method() {
    arguments[0]();
  },
};
object.method(callback, 1, 2);
  • উল্লিখিত কোডটির আউটপুট কি?
const test = {
prop: 42,
func: function () {
return this.prop;
},
};

console.log(test.func());
  • উল্লিখিত কোডটির আউটপুট কি?
function foo() {
    "use strict";
    return this;
  }
   
  console.log(foo());
  • উল্লিখিত কোডটির আউটপুট কি?
8.19. Array.flat() and Array.flatMap()
8.21. Optional chaining