JavaScript উদাহরণ

উত্তরসূরীতা প্রক্রিয়ার রূপায়ণ

এসম্বাধায়়মিক্রিপ্টে উত্তরসূরীতা প্রক্রিয়া রূপায়ণের জন্য, আপনি উত্তরসূরী করতে চানো মূল ক্লাস থেকে ভাবতে পারেন। সকল ডেভেলপার দ্বারা নির্বাচিত ক্লাসগুলোকে মূল ক্লাস হিসাবে ব্যবহার করা যায়। নিরাপত্তার কারণে, স্থানীয় ক্লাস এবং হোস্ট ক্লাসকে মূল ক্লাস হিসাবে ব্যবহার করা যায় না, এটি ব্যবহার করা যায় না থাকা ব্রাউজার স্তরের কোডকে প্রকাশ করার জন্য, যা খারাপকারী হামলার জন্য ব্যবহৃত হতে পারে。

মূল ক্লাস নির্বাচন করার পর, তার সাবক্লাস তৈরি করার সুযোগ পাবেন। কিন্তু কোনও ক্ষেত্রে আপনি একটি এমন মূল ক্লাস তৈরি করতে পারেন, যা প্রত্যক্ষভাবে ব্যবহার করা যায় না, এটি কেবল সাবক্লাসকে সাধারণ ফাংশন প্রদান করার জন্য ব্যবহৃত হয়। এই ক্ষেত্রে, মূল ক্লাসটিকে আবদ্ধ ক্লাস হিসাবে দেখা হয়。

এসম্বাধায়়মিক্রিপ্ট অন্যান্য ভাষার মতো আবদ্ধ ক্লাসটি কঠোরভাবে নির্দিষ্ট করে না, কিন্তু কখনও কখনও এটি ব্যবহার করে না থাকা ক্লাস তৈরি করে। সাধারণত, এইসব ক্লাসটিকে আবদ্ধ ক্লাস বলা হয়。

সৃষ্ট সাবক্লাস পার্য ক্লাসের সকল প্রকৃতি এবং পদ্ধতি গ্রহণ করবে, তারমধ্যে নির্মাণকারী পদ্ধতি এবং পদ্ধতির রূপায়ণও রয়েছে। মনে রাখুন, সকল প্রকৃতি এবং পদ্ধতি সকলেই জনসাধারণ বলে বলা হয়, সুতরাং সাবক্লাস এইসব পদ্ধতি প্রত্যক্ষভাবে পরিবেশিত করতে পারবে। সাবক্লাসটি পার্য ক্লাসের মধ্যে নেই এমন নতুন প্রকৃতি এবং পদ্ধতি যোগ করতেও পারে, এবং পার্য ক্লাসের প্রকৃতি এবং পদ্ধতির উপর নিয়ন্ত্রণ করতেও পারে。

উত্তরসূরীতা পদ্ধতি

অন্যান্য ফিচারগুলির মতো, ECMAScript-এর উত্তরসূরীতা পদ্ধতির একাধিকগুলি রয়েছে। কারণ JavaScript-এর উত্তরসূরীতা ব্যবস্থা বিশেষভাবে নির্দিষ্ট নয়, বরং মোকাবেলা করা হয়, এই অর্থে, সব উত্তরসূরীতা বিবরণ পূর্ণভাবে ব্যাক্তবাদী নয়। উন্নয়নকারীরা, সর্বোত্তম উত্তরসূরীতা পদ্ধতি বেছে নেওয়ার অধিকার রয়েছে

নিচে আপনাকে কিছু নির্দিষ্ট উত্তরসূরীতা পদ্ধতি প্রস্তুত করা হয়

অবজেক্ট মাস্কারেডিং

মূল ইক্মা-স্ক্রিপ্টটির সময়, অবজেক্ট মাস্কারেডিং (object masquerading) নিয়ে কোনও পরিকল্পনা করা হয়নি। এটা উন্নয়নকারীরা ফাংশনের কাজকর্মকে বোঝা শুরু করার পর, বিশেষ করে this কীভাবে ফাংশন ইনভাইরনমেন্টে ব্যবহৃত হয়, এরপর উন্নয়ন হয়

এই নিয়মটির কারণ হলো: কনস্ট্রাক্টর this কীভাবে সকল অতিকৃতি এবং পদ্ধতিকে সংযোজন করে (অর্থাৎ, শ্রেণী ঘোষণার মাধ্যমে কনস্ট্রাক্টর ব্যবহার করা হয়)। কারণ কনস্ট্রাক্টর একটি ফাংশন, তাই ClassA কনস্ট্রাক্টরকে ClassB-এর পদ্ধতি হিসাবে ব্যবহার করা যায়, এবং তা ব্যবহার করলে ClassB-এর কাছে ClassA-র কনস্ট্রাক্টরের অতিকৃতি এবং পদ্ধতি পাওয়া যাবে। উদাহরণস্বরূপ, নিচেরটি দেখুন ClassA এবং ClassB-এর নির্ধারণ:

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}
function ClassB(sColor) {
}

কিনা মনে রাখুন? this কীভাবে কনস্ট্রাক্টর কাজ করে, একটি শ্রেণীর প্রদর্শন করা হয়। কিন্তু এই পদ্ধতিতে, this কীভাবে এই পদ্ধতিতে প্রদর্শন করা হয়। এই নিয়মটি শ্রেণীটিকে সাধারণ ফাংশন হিসাবে উত্তরসূরীতা ব্যবস্থা তৈরি করে, না কোনও কনস্ট্রাক্টর হিসাবে। নিচেরটি কনস্ট্রাক্টর ClassB-এর মাধ্যমে উত্তরসূরীতা ব্যবস্থা তৈরি করতে পারে:

function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

এই কোডটিতে, ClassA-কে newMethod পদ্ধতিতে দেওয়া হয় (মনে রাখুন, ফাংশনের নাম তার প্রোফাইলের পুঙ্খানুপুঙ্খ নির্দেশক)

সব নতুন অতিকৃতি এবং নতুন পদ্ধতির প্রয়োজন হবে যদি নতুন পদ্ধতির কোডটি মুছে ফেলা হয়, না তবে তা উপশ্রেণীর অতিকৃতি এবং পদ্ধতিকে অপসারণ করতে পারে:

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

আগের কোডটির কার্যকারিতা প্রমাণের জন্য, নিচের উদাহরণটি চালাতে পারেন:

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();	//আউটপুট "blue"
objB.sayColor();	//আউটপুট "red"
objB.sayName();		// প্রদর্শন "John"

অবজেক্ট মাস্কারেডিং বহুসূত্রী উত্তরসূরীতা সম্ভব করে

আশ্চর্যজনকভাবে, অবজেক্ট মাস্কারেডিং বহুসূত্রী উত্তরসূরীতা সমর্থন করে। অর্থাৎ, একটি শ্রেণী একাধিক উপশ্রেণী থেকে উত্তরসূরী হতে পারে। UML-এর মাধ্যমে বহুসূত্রী উত্তরসূরীতা ব্যবস্থা নিচের চিত্রে দেখা যাচ্ছে:

উত্তরণ প্রক্রিয়া UML চিত্রাঙ্কন উদাহরণ

যদি দুটি শ্রেণী থাকে, ClassX এবং ClassY, ClassZ তাদেরকে উত্তরসূরী করতে চায়, তবে নিচের কোডটি ব্যবহার করতে পারেন:

function ClassZ() {
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;
    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
}

TIY

এখানে একটি প্রকৃত দুর্বলতা রয়েছে, যদি দুই ক্লাস ClassX এবং ClassY-র একই নামের অ্যাট্রিবিউট বা মথুদা থাকে, ClassY-র উচ্চ প্রাথমিকতা রয়েছে, কারণ তা পরবর্তী ক্লাস থেকে উত্তরসূরী হয়। এই ছোট সমস্যা ছাড়াই, বহুবিংশত্তা প্রতিনিধিত্ব পদ্ধতি মধ্যে ব্যবহার করে উত্তরসূরী পদ্ধতির প্রতিনিধিত্ব করা যায়。

এই উত্তরসূরী পদ্ধতির জন্য প্রচলিত হওয়ার কারণে, ECMAScript-এর তৃতীয় সংস্করণতে Function অবজেক্টের জন্য দুই নতুন মথুদা যুক্ত করা হয়েছে, যেগুলো হল call() এবং apply()।

call() মথুদা

call() মথুদা ক্লাসিক্ক অবজেক্ট প্রতিনিধিত্ব পদ্ধতির সঙ্গে সবচেয়ে সমান হয়। তার প্রথম পারামিটার this এর অবজেক্ট হিসাবে কাজ করে। অন্যান্য পারামিটার ফাংশনকে সরাসরি পাঠানো হয়। উদাহরণ হিসাবে:

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.call(obj, "The color is ", "a very nice color indeed.");

এই উদাহরণে, ফাংশন sayColor() অবজেক্টের বাইরে পরিভাষিত হয়, যদিও তা কোনও অবজেক্টের অংশ নয়, তবুও কীভুক্ত ক্যালকুলেস্ট্র this-কে উল্লেখ করা যায়। অবজেক্ট obj-র color অ্যাট্রিবিউট blue-এর সঙ্গে সমান। call() মথুদা কল করার সময়, প্রথম পারামিটার obj, যা বলা হয় যে sayColor() ফাংশনের this কীভুক্ত ক্যালকুলেস্ট্রকে obj-এর মান দেওয়া হবে। দ্বিতীয় এবং তৃতীয় পারামিটার হল স্ট্রিং। তারা sayColor() ফাংশনের sPrefix এবং sSuffix পারামিটারের সঙ্গে মাটচ করে, শেষভাবে তৈরি হওয়া সংদেশ "The color is blue, a very nice color indeed." প্রদর্শিত হবে。

এই পদ্ধতিকে উত্তরসূরী বস্তুর প্রতিনিধিত্ব পদ্ধতির সঙ্গে ব্যবহার করতে, কেবল তিনটি পদক্ষেপকে রূপান্তরিত করতে হবে: এসকেলের মাধ্যমে এক্সপ্রেশন, ফাংশন কল এবং ডিলেট করা।

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

TIY

এখানে, আমরা চাইবো যে ClassA-র কীভুক্ত ক্যালকুলেস্ট্র থিস একটি নতুন ক্লাসB অবজেক্টের সঙ্গে সমান হোক, তাই this প্রথম পারামিটার। দ্বিতীয়ত, sColor উভয় ক্লাসের জন্যই একটি অতিরিক্ত পারামিটার।

apply() মথুদা

apply() মথুদা দুই পারামিটার আছে, যা this এর অবজেক্ট এবং ফাংশনে পাঠানো পারামিটারের আইভিএস হিসাবে কাজ করে। উদাহরণ হিসাবে:

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

এই উদাহরণ আগের উদাহরণের মতোই, কিন্তু এখন যেমন পালন করা হয়েছে, apply() পদ্ধতিকে পালন করা হয়েছে। apply() পদ্ধতিকে পালন করার সময়, প্রথম পারামিটার এখনও obj, যার মান হবে sayColor() পদ্ধতিতে this কীভাবে প্রদান করা হবে, obj। দ্বিতীয় পারামিটার দুটি শব্দকক্ষ থেকে নেওয়া একটি আইসি, sPrefix এবং sSuffix এর সঙ্গে মাত্র মিলবে, শেষপর্যন্ত তৈরি করা বাক্য "The color is blue, a very nice color indeed." দেখানো হবে, যা প্রদর্শিত হবে。

এই পদ্ধতিটি আগের তিনটি পদক্ষেপকে প্রতিস্থাপন করতেও ব্যবহার করা যায়:

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, new Array(sColor));
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

একইভাবে, প্রথম পারামিটার এখনও this বলে থাকে, দ্বিতীয় পারামিটার একটি একমাত্র মান যেমন color একক আইসিকে রয়েছে। ClassB এর সমস্ত arguments অবজেক্টকে apply() পদ্ধতিতে দ্বিতীয় পারামিটার হিসাবে পাঠিয়ে যাওয়া যেতে পারে:

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

TIY

স্বাভাবিকভাবে, যদি সুপারক্লাসের পারামিটারের ক্রমবিন্যস্তকরণ সাবক্লাসের পারামিটারের সঙ্গে সমতুল্য হয়, তবেই পারামিটার অবজেক্টকে পাঠিয়ে যাওয়া যাবে। যদি না, তবে একটি আলাদা আইসিকে তৈরি করতে হবে, যা সঠিক ক্রমে পারামিটারকে স্থাপন করবে। এছাড়া, call() পদ্ধতিকেও ব্যবহার করা যেতে পারে。

প্রটোটাইপ চেইনিং (prototype chaining)

এই ধরণের উত্তরসূরীত্ব এসকিমাস্ক্রিপ্টে মূলত প্রটোটাইপ চেইনিং ব্যবহার করা হয়। পূর্ববর্তী চাপ্তীতে শ্রেণীর প্রটোটাইপ পদ্ধতিকে পরিচিত করা হয়েছে। প্রটোটাইপ চেইনিং এই পদ্ধতিকে বিস্তারিত করে, উত্তরসূরীত্ব প্রক্রিয়াকে একটি আশ্চর্যজনক পদ্ধতিতে রূপায়ণ করে।

পূর্ববর্তী চাপ্তীতে শিখা, prototype অবজেক্ট একটি টেমপ্লেট, যেসব অবজেক্টকে এই টেমপ্লেটের ভিত্তিতে বিন্যস্ত করা হয়, তারা। সমকক্ষে, prototype অবজেক্টের কোনও সম্পদ বা পদ্ধতি সেই শ্রেণীর সব ইনস্ট্যান্সকে পাঠিয়ে যায়। প্রটোটাইপ চেইনিং এই প্রক্রিয়াটি ব্যবহার করে উত্তরসূরীত্ব প্রক্রিয়াকে রূপায়ণ করে।

যদি প্রটোটাইপ পদ্ধতিতে আগের উদাহরণটির শ্রেণীকে পুনর্নির্মাণ করা হয়, তবে তারা নিম্নলিখিত রূপ নেবে:

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

প্রটোটাইপ পদ্ধতির অসাধারণতা হল, উপস্থাপিত নীল কোড লাইনটি। এখানে, ClassB-র prototype বৈশিষ্ট্যকে ClassA-র ইনস্ট্যান্স করে নেওয়া হয়। এটা অত্যন্ত আগ্রহ্য, কারণ আমরা ClassA-র সকল বৈশিষ্ট্য ও পদ্ধতি নিতে চাই, কিন্তু তাদের ক্লাস B-র prototype বৈশিষ্ট্যকে এককভাবে যোগ করতে চাই। কি আরও ভালো পদ্ধতি হতো তা নিয়ে চিন্তাভাবনা করুন?

পরীক্ষা করুন:ClassA-র কন্সট্রাক্টর ফাংশন বিনা প্যারামিটার পরিবর্তন করে, এটা প্রটোটাইপ চেইনের মধ্যে একটি প্রক্রিয়া। নিশ্চিত করুন যে, কন্সট্রাক্টর ফাংশনটি কোনও প্যারামিটার নেয় না。

ওবজেক্ট কোম্পোজিশনের মতো, সাবক্লাসের সকল বৈশিষ্ট্য ও পদ্ধতি prototype বৈশিষ্ট্যকে সংযোজিত হওয়ার পরেই উপস্থাপিত হতে হবে, কারণ তার আগে সংযোজিত সকল পদ্ধতি মিটে যাবে। কেন? কারণ prototype বৈশিষ্ট্যকে একটি নতুন ওবজেক্ট প্রতিস্থাপন করা হয়, যেটি নতুন পদ্ধতি যোগ করেছে, তা মিটে যাবে। তাই, ClassB ক্লাসের জন্য name বৈশিষ্ট্য ও sayName() পদ্ধতি যোগ করার কোড নিচেরভাবে দেওয়া হল:

function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};

এই কোডটির পরীক্ষা করতে নিচের উদাহরণটি চালু করুন:

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

TIY

এছাড়া, প্রটোটাইপ চেইনে, instanceof অপারেটরের কার্যকলাপও অনন্য। ClassB-র সকল ইনস্ট্যান্সের জন্য, instanceof ClassA এবং ClassB-কেই true ফলাফল দেয়। উদাহরণস্বরূপ:

var objB = new ClassB();
alert(objB instanceof ClassA);	// আউটপুট "true"
alert(objB instanceof ClassB);	// আউটপুট "true"

ইসক্রিপটের দুর্বল টাইপিং বিশ্বে, এটা একটি অত্যন্ত উপযোগী টুল, কিন্তু ওবজেক্ট কোম্পোজিশন ব্যবহার করার সময় এটা ব্যবহার করা যায় না。

প্রটোটাইপ চেইনের দুর্বলতা হল, বহুসূত্রিক উত্তরসূরীকরণকে সমর্থন করতে পারে না। মনে রাখুন, প্রটোটাইপ চেইন ক্লাসের prototype বৈশিষ্ট্যকে আরেকটি ধরনের ওবজেক্টের প্রটোটাইপ বৈশিষ্ট্যকে পরিবর্তন করে।

মিশ্র পদ্ধতি

এই উত্তরসূরীকরণ পদ্ধতিতে ক্লাস নির্মাণকারী ফাংশন ব্যবহার করা হয়, না কোনও প্রটোটাইপ ব্যবহার করা হয়। ওবজেক্ট কোম্পোজিশনের মূল প্রশ্ন হল, নিশ্চিতভাবে কন্সট্রাক্টর পদ্ধতিকে ব্যবহার করা প্রয়োজন, এটা সর্বোত্তম পদ্ধতি নয়। কিন্তু যদি প্রটোটাইপ চেইন ব্যবহার করা হয়, তবে প্রমাণন করা হতে পারবে না। ডেভেলপার কিভাবে বেছে নেবে? উত্তর সহজ, উভয়কেই ব্যবহার করুন。

আগের চাপ্তীতে, আমরা সবচেয়ে ভালোভাবে শ্রেণী তৈরির উপায় হল প্রকার নিয়ে কনস্ট্রাক্টর নির্বাচন, প্রক্রিয়াগুলির জন্য প্রটোটাইপ নির্বাচন। এই উপায়টি পরিবর্তনমূলক প্রক্রিয়ার জন্যও কার্যকরী, প্রকার নিয়ে কনস্ট্রাক্টরের অধিকার উত্তরসূরীতা করা এবং প্রটোটাইপ লিনকের মাধ্যমে প্রটোটাইপ অবজেক্টের প্রক্রিয়াগুলির উত্তরসূরীতা করা। এই দুই উপায়ের মাধ্যমে আগের উদাহরণটি পুনরায় লিখা হয়, কোডটি নিচে দেওয়া হল:}}

function ClassA(sColor) {
    this.color = sColor;
}
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB(sColor, sName) {
    ClassA.call(this, sColor);
    this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
    alert(this.name);
};

এই উদাহরণে, পরিবর্তনমূলক প্রক্রিয়াটি দুই লাল কালো কোডের মাধ্যমে রূপায়িত হয়। প্রথম লাল কালো কোডে, ClassB কনস্ট্রাক্টরে, ClassA শ্রেণীর sColor প্রকার নিয়ে আউটার প্রকার উত্তরসূরীতা করা হয়। দ্বিতীয় লাল কালো কোডে, ClassA শ্রেণীর প্রক্রিয়াগুলির জন্য প্রটোটাইপ লিনক উত্তরসূরীতা করা হয়। এই মিশ্রণযোগের জন্য প্রটোটাইপ লিনক ব্যবহার করা হয়, তাই instanceof অপারেটরও সঠিকভাবে কাজ করে।

নিচের উদাহরণটি এই কোডটির পরীক্ষা করে:

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();	//আউটপুট "blue"
objB.sayColor();	//আউটপুট "red"
objB.sayName();	//আউটপুট "John"

TIY