আমার সাথে

Personal Blog of Zonayed
ওয়েব টেকনোলোজি জাভাস্ক্রিপ্ট প্রোগ্রামিং বাংলা

জাভাস্ক্রিপ্ট অ্যাডভান্সঃ ফাংশন কন্সট্রাকটর(Constructor) এবং ‘new’ কীওয়ার্ড

আগস্ট 7, 2018

জাভাস্ক্রিপ্ট যদিও অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং ল্যাঙ্গুয়েজ, কিন্তু যারা অন্য কোনো ল্যাঙ্গুয়েজ থেকে জাভাস্ক্রিপ্ট এ এসেছেন তারা হয়তো একটা জিনিস এখানে মিসিং দেখবেন। সেটা হচ্ছে ক্লাস (Class)। অবজেক্ট ওরিয়েন্টেড ল্যাঙ্গুয়েজ কিন্তু ক্লাস নাই এটা কেমন কথা! হ্যাঁ, এজন্যেই জাভাস্ক্রিপ্ট একটু অন্যরকম। জাভাস্ক্রিপ্ট এ ক্লাস কনসেপ্ট এর পরিচয় করানো হয় নাই ডেভেলপারদের সাথে।

জাভাস্ক্রিপ্ট অবজেক্ট ওরিয়েন্টেড হলেও এটা অন্যান্য ল্যাঙ্গুয়েজ যেমন সি++ বা জাভা থেকে একটু অন্যরকমভাবে কাজ করে। ঐ ল্যাঙ্গুয়েজগুলো ক্লাস বেসড হলেও জাভাস্ক্রিপ্ট মূলত প্রোটোটাইপ বেসড ল্যাঙ্গুয়েজ। অন্যান্য ল্যাগুয়েজের মতো জাভাস্ক্রিপ্ট ক্লাস এর ভিতরে সব রাখে না, বরং এখানে একটা অবজেক্ট আরেকটা অবজেক্ট এর সাথে প্রোটোটাইপ দিয়ে লিঙ্ক থাকে। আমরা গত পর্বে প্রোটোটাইপ চেইন নিয়ে কথা বলেছি। মূলত প্রোটোটাইপ চেইনে এরকমভাবে একটা আরেকটার সাথে লিঙ্ক করা থাকে, এমন লিঙ্ক হতে হতে সবশেষে নাল null হয়ে যায়। নাল এর কোনো প্রোটোটাইপ নেই, অর্থাৎ এটাই প্রোটোটাইপ চেইনের শেষ। জাভাস্ক্রিপ্ট এ বলতে গেলে সব অবজেক্টই এরকম প্রোটোটাইপ চেইন থাকে।

ফাংশন কন্সট্রাকটরও সেইম ভাবে ক্লাসের মতো অবজেক্ট এর ব্লু-প্রিন্ট তৈরী করতে ইউজ করা হয়। এখন ব্লু-প্রিন্ট মানে? হ্যাঁ, আমাদের একই রকম দেখতে অনেকগুলো অবজেক্ট থাকতে পারে এরকমঃ

var samir = { 
   name: 'Samir Hossain',
   age: 22,
   job: 'Student'
}
var kinan = { 
   name: 'Kinan Hossain',
   age: 29,
   job: 'Businessman'
}
var jamil = { 
   name: 'Jemil Hossain',
   age: 18,
   job: 'Driver'
}
var zawad = { 
   name: 'Zawad Ahmed',
   age: 1,
   job: 'Child'
}
var zonayed = { 
   name: 'Zonayed Ahmed',
   age: 21,
   job: 'Developer'
}

এখন প্রত্যেকটা অবজেক্ট আমাদের আলাদা আলাদা করে লিখতে হচ্ছে এখানে, কিন্তু এটা মনে হচ্ছে একইরকম প্যাটার্ন আমরা বারবার রিপিট করতেছি। এমন কিছু যদি থাকতো যেটা ইউজ করে আমরা একটা প্যাটার্ন বানাবো, তারপরে জাস্ট সেটাকে আমাদের ভ্যালুগুলো দিয়ে করলেই নতুন অবজেক্ট তৈরী হয়ে যেতো, তাইলে কেমন হতো? হ্যাঁ সেজন্যেই ফাংশন কন্সট্রাকটর ইউজ করা হয়। ফাংশন কন্সট্রাকটর ইউজ করে আমরা একটা ব্লু-প্রিন্ট তৈরী করি, পরে ঐটা থেকে সহজেই নতুন new অবজেক্ট তৈরী করতে পারি। উপরের সেইম কাজটাই ফাংশন কন্সট্রাকটর দিয়ে করবো। তার আগে ব্লু-প্রিন্ট তৈরী করে নিবোঃ

var Person = function(name, age, job) {
   this.name = name;
   this.age = age;
   this.job = job;
}

এখানে খেয়াল করবেন Person এর P বড় হাতের, কারন এটা একটা কনভেনশন। জাভস্ক্রিপ্ট কমিউনিটিতে ফাংশন কন্সট্রাকটর তৈরীর ক্ষেত্রে এটার নামকরনে প্রথম অক্ষর বড় হাতের দেওয়ার হয় যাতে সহজেই ধরা যায় এটা একটা ফাংশন কন্সট্রাকটর। যাই হউক উপরে this.name = name এই লাইনটা একটু কনফিউজিং, আর্গুমেন্টস এর ভ্যারিয়েবল ও ভিতরের (সম্ভাব্য)অবজেক্ট এর ভ্যারিয়েবল সেইম নামেই দেওয়া হয়েছে। এটাও একটা কনভেনশন, তাই আমি এভাবে দেখিয়েছি। কিন্তু এটাও সম্পূর্ণ ভ্যালিডঃ

var Person = function(nameArg, ageArg, jobArg) {
   this.name = nameArg;
   this.age = ageArg;
   this.job = jobArg;
}

যাই হউক আমি কনভেনশন মেনেই কোড লিখবো। পরে আরেকটা জিনিস কনফিউজিং এখানে। সেটা হচ্ছে this কীওয়ার্ড। ফাংশন এর ভিতরে this কীওয়ার্ড, তার মানে তো আমরা এই ভ্যালুগুলো গ্লোবাল অবজেক্ট এ অ্যাড করতে যাচ্ছি মনে হয়…? কিন্তু না! মনে করুন this এর উপরে লেখায় আমার চারটি রুলস এর কথা। এখানে ৪ নাম্বার রুলসটা ছিলো new কীওয়ার্ড রুলস। আর হ্যাঁ আমরাও এই ফাংশন কন্সট্রাকটর থেকে new কীওয়ার্ড দিয়ে নতুন অবজেক্ট তৈরী করবো। আর তাই এখানে this দিয়েছি। আমরা প্রথমে একটা অবজেক্ট তৈরী করিঃ

var samir = new Person('Samir Hossain', 22, 'Student');

এখানে new কীওয়ার্ড this এর জন্যে ভ্যালু নির্ধারণ করছে, আর সেই সাথে পুরোটা আমরা একটা ভ্যারিয়েবলে, এখানে samir এ অ্যাসাইন করায় this মানে এখন samir এখানে। এভাবেই বাতাসের উপরে this এর ভ্যালু নির্ধারণ করে new কীওয়ার্ড, আর সেই সাথে সেটা কোনোকিছুরে অ্যাসাইন করা হলে this এ সেটাকে ইন্ডিকেট করা শুরু করে। আর তাই এখানে এখন samir.name মানে Samir Hossain হবে। এখানে আমাদের আর্গুমেন্টসগুলো আমাদের ফাংশন কন্সট্রাকটরে গিয়েছে, সেখানে গিয়ে this এর সাথে অ্যাসাইন হয়েছে। আর এই this new কীওয়ার্ড ইউজ করায় this এর কন্টেক্সট চেঞ্জ হয়ে গেছে। গ্লোবাল অবজেক্টকে ইন্ডিকেট না করে this অ্যাসাইনকৃত ভ্যারিয়েবলকেই ইন্ডিকেট করবে। এখানে এই উদাহরনে সেটা semir কে। আর তাই আমরা ভ্যালুগুলো এভাবে অ্যাক্সেস করতে পারবোঃ

console.log(samir.name);
console.log(samir.age);
console.log(samir.job);

আর এভাবেই আমরা নতুন নতুন যত ইচ্ছা অবজেক্ট তৈরী করতে পারবোঃ

var kinan = new Person('Kinan Hossain', 29, 'Businessman');
var jamil = new Person('Jamil Hossain', 18, 'Driver');
var jamil = new Person('Zawad Ahmed', 1, 'Child');
var zonayed = new Person('Zonayed Ahmed', 21, 'Developer');

এখন এখানে খুব সহজেই আমাদের সবগুলো অবজেক্ট তৈরী হয়ে গেলো। দেখতেও কত সুন্দর, আর সব কিছু গুছানো। এটাই ফাংশন কন্সট্রাকটরের কাজ মূলত।

আপনি চাইলে সেইমভাবে ফাংশন কন্সট্রাকটরে মেথডও অ্যাড করতে পারবেন। আমরা অলরেডী একটা ফাংশন কন্সট্রাকটর তৈরী করে ফেলেছি। অলরেডী তৈরী করা হয়ে গেছে এমন ফাংশন কন্সট্রাকটরে কিভাবে নতুন মেথড বা ভ্যারিয়েবল ঢুকাতে হবে সেগুলো নিয়ে পরের পর্বে আলোচনা করা হবে। তবে এখানে আমি নতুন আরেকটা কন্সট্রাকটর তৈরী করবো মেথডসহঃ

var Personwitmethod = function(name, age, job) {
   this.name = name;
   this.age = age;
   this.job = job;
   this.dateOfBirth = function() {
      console.log(this.name + ' is born in ' + (2018 - this.age));
   }
}

এখন এটা থেকে একটা অবজেক্ট তৈরী করবোঃ

var samirwithmethod = new Personwitmethod('Samir Hossain', 22, 'Student');

এখন ভ্যারিয়েবলগুলোকে তো আগের মতোই অ্যাক্সেস করতে পারবেন, সেই সাথে মেথডটাকেও অ্যাক্সেস করতে পারবেনঃ

samirwithmethod.dateOfBirth();

এভাবে একটা ফাংশন কন্সট্রাকটর ইউজ করে যতো ইচ্ছা অবজেক্ট তৈরী করতে পারবেন সহজেই। আশা করি এটা নিয়ে আর সমস্যা হবে না।


আমার নতুন ব্লগ পোস্ট গুলোর আপডেট পেতে আপনি আপনার ইমেইল দিয়ে আমার ব্লগ পোস্টগুলো সাবস্ক্রাইব করে রাখতে পারেন, নতুন পোস্টগুলো সপ্তাহে একদিন আপনার ইনবক্সে চলে যাবে

Comments

comments