জাভাস্ক্রিপ্টে প্রোটোটাইপিকাল প্রোগ্রামিং কখন ব্যবহার করবেন

Question

আমি নিম্নলিখিত উপায়ে প্রকল্পগুলির জন্য সহজ উইজেটগুলি বিকাশে বেশ ভাল সময় ব্যয় করেছি:

var project = project || {};

(function() {

  project.elements = {
    prop1: val1,
    prop2: val2
  }

  project.method1 = function(val) {
    // Do this
  }

  project.method2 = function(val) {
    // Do that
  }

  project.init = function() {
    project.method1(project.elements.prop1)
    project.method2(project.elements.prop2)
  }
})()

project.init();

তবে আমি আমার ফর্ম্যাটটি নিম্নলিখিতটিতে পরিবর্তন করতে শুরু করেছি:

function Project() {
  this.elements = {
    prop1: val1,
    prop2: val2
  }

  this.method_one(this.elements.prop1);
  this.method_two(this.elements.prop2);
}

Project.prototype.method_one = function (val) {
  // 
};

Project.prototype.method_two = function (val) {
  //
};

new Project();

মঞ্জুরিপ্রাপ্ত, এগুলি নির্বোধ উদাহরণ, সুতরাং অক্ষের চারপাশে আবৃত না। তবে কার্যকরী পার্থক্য কী এবং কখন আমি একটি বা অন্যটি বেছে নেব?

Comments

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

— আইচ

হ্যাঁ আমি ঘটনাক্রমে projectঘোষণাটি ফাংশনের ভিতরে রেখে দিয়েছি । আপডেট করা হয়েছে।

— JDillon522

একই অবস্থা. প্রথম উদাহরণটি স্থিতিশীল, দ্বিতীয়টি অবজেক্ট ওরিয়েন্টেড।

— আইচ

যদি আপনি কেবলমাত্র একমাত্র বস্তুর উদাহরণ ব্যবহার করেন তবে প্রোটোটাইপাল সংজ্ঞাটি ব্যবহার করার কোনও কারণ নেই। এবং আপনার যা প্রয়োজন বলে মনে হচ্ছে - এটি একটি মডিউল ফর্ম্যাট - এর জন্য প্রচুর বিকল্প রয়েছে, দেখুন: addyosmani.com/writing-modular-js

— c69

সিঙ্গেলটন প্যাটার্নের জন্য প্রথমটি দ্বিতীয় নন-সিঙ্গলটনের জন্য (যখন 1 শ্রেণিতে অনেকগুলি বস্তু থাকতে পারে)

— কোকিজু

Answer 1

প্রথম পার্থক্যটি সংক্ষেপে বলা যেতে পারে: শ্রেণীর ইনস্ট্যান্সকেthis বোঝায় । সংজ্ঞা বোঝায় ।prototype

ধরা যাক আমাদের নিম্নলিখিত ক্লাস আছে:

var Flight = function ( number ) { this.number = number; };

সুতরাং এখানে আমরা this.numberবর্গের প্রতিটি উদাহরণ সংযুক্ত করছি, এবং এটি বোধগম্য কারণ প্রত্যেকের Flightনিজস্ব ফ্লাইট নম্বর থাকা উচিত।

var flightOne = new Flight( "ABC" );
var flightTwo = new Flight( "XYZ" );

বিপরীতে, prototypeএকটি একক সম্পত্তি সংজ্ঞা দেয় যা সমস্ত দৃষ্টান্ত অ্যাক্সেস করতে পারে।

এখন যদি আমরা ফ্লাইট নম্বর পেতে চাই, তবে আমরা কেবল নীচের স্নিপেটটি লিখতে পারি এবং আমাদের সমস্ত উদাহরণ এই নতুন প্রোটোটাইপযুক্ত অবজেক্টের জন্য একটি রেফারেন্স পাবে।

Flight.prototype.getNumber = function () { return this.number; };

দ্বিতীয় পার্থক্যটি হল জাভাস্ক্রিপ্ট যেভাবে কোনও কোনও সামগ্রীর সম্পত্তি অনুসন্ধান করে। আপনি যখন সন্ধান করছেন Object.whatever, জাভাস্ক্রিপ্ট মূল পর্যন্ত সমস্ত দিকে যায় অবজেক্ট অবজেক্ট (সমস্ত কিছু যা উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছে) পর্যন্ত চলে গেছে এবং কোনও মিল খুঁজে পাওয়ার সাথে সাথে এটি ফিরে আসবে বা কল করবে।

তবে এটি কেবল প্রোটোটাইপযুক্ত বৈশিষ্ট্যের জন্যই ঘটে। সুতরাং আপনি যদি উচ্চ স্তর মধ্যে কোথাও আছেthis.whatever জাভাস্ক্রিপ্ট এটিকে ম্যাচ হিসাবে বিবেচনা করবে না এবং অনুসন্ধান চালিয়ে যাবে।

আসুন দেখা যাক বাস্তবে এটি কীভাবে ঘটে।

প্রথম নোট করুন [প্রায়] সবকিছু জাভাস্ক্রিপ্টে অবজেক্ট । এটা চেষ্টা কর:

typeof null

এখন আসুন দেখে নেওয়া যাক Objectকোনটির ভিতরে কী রয়েছে (বড় হাতের অক্ষরটি Oএবং .শেষে নোট করুন )। গুগল ক্রোমের বিকাশকারী সরঞ্জামগুলিতে আপনি প্রবেশ করার সময় আপনি .সেই নির্দিষ্ট বস্তুর অভ্যন্তরে উপলব্ধ বৈশিষ্ট্যগুলির একটি তালিকা পাবেন।

Object.

এখন একই কাজটি করুন Function:

Function.

আপনি nameপদ্ধতি লক্ষ্য করতে পারেন । শুধু যান এবং এটি জ্বালিয়ে দিন এবং দেখুন কি ঘটে:

Object.name
Function.name

এখন একটি ফাংশন তৈরি করা যাক:

var myFunc = function () {};

এবং আসুন আমরা nameএখানে পদ্ধতিটি পেয়েছি কিনা তা দেখুন :

myFunc.name

আপনার খালি স্ট্রিং পাওয়া উচিত, তবে এটি ঠিক আছে। আপনার কোনও ত্রুটি বা ব্যতিক্রম হওয়া উচিত নয়।

এখন আসুন godশ্বরের মতো কিছু যুক্ত করুন Objectএবং দেখুন যে আমরা এটি অন্য জায়গায়ও পেয়েছি কিনা?

Object.prototype.test = "Okay!";

এবং সেখানে আপনি যান:

Object.prototype.test
Function.prototype.test
myFunc.prototype.test

সব ক্ষেত্রে আপনার দেখা উচিত "Okay!"।

প্রতিটি পদ্ধতির উপকারিতা এবং বিপরীতে আপনি প্রোটোটাইপিংকে কাজগুলি করার "একটি আরও দক্ষ" উপায় হিসাবে বিবেচনা করতে পারেন, কারণ এটি প্রতিটি বস্তুর মধ্যে পুরো সম্পত্তি অনুলিপি করার পরিবর্তে প্রতিটি ক্ষেত্রে একটি রেফারেন্স রাখে। অন্যদিকে এটি টাইটলি কাপলিংয়ের উদাহরণ যা আপনি কারণটির সত্যতা প্রমাণ করতে না এটি একটি বড় নম্বর। thisএটি প্রসঙ্গের সাথে প্রাসঙ্গিক হওয়ায় এটি আরও জটিল। ইন্টারনেটে আপনি নিখরচায় প্রচুর ভাল সংস্থান পেতে পারেন।

এগুলি সবই বলেছে যে, দুটি উপায়ই কেবলমাত্র ভাষা সরঞ্জাম এবং এটি আপনার এবং যে সমস্যার সমাধান করতে চাইছেন তার থেকে আরও ভাল pick

আপনার যদি কোনও শ্রেণীর প্রতিটি দৃষ্টান্তের সাথে সম্পর্কিত হতে একটি সম্পত্তি থাকতে হয়, তবে ব্যবহার করুন this। আপনার যদি প্রতিটি মুহুর্তে একই কাজ করার জন্য কোনও সম্পত্তি থাকা প্রয়োজন, তবে ব্যবহার করুন prototype।

হালনাগাদ

আপনার স্যাম্পল স্নিপেটগুলি সম্পর্কে, প্রথমটি সিঙ্গলটনের একটি উদাহরণ , সুতরাং এটি thisবস্তুর শরীরে ব্যবহার করা বোধগম্য । আপনি নিজের উদাহরণটিকে এটিকে মডুলার করেও উন্নত করতে পারেন (এবং আপনার সর্বদা thisপাশাপাশি ব্যবহার করার প্রয়োজন নেই )।

/* Assuming it will run in a web browser */
(function (window) {
    window.myApp = {
        ...
    }
})( window );

/* And in other pages ... */
(function (myApp) {
    myApp.Module = {
        ...
    }
})( myApp );

/* And if you prefer Encapsulation */
(function (myApp) {
    myApp.Module = {
         "foo": "Foo",
         "bar": function ( string ) {
             return string;
         },
         return {
             "foor": foo,
             "bar": bar
         }
    }
})( myApp );

আপনার দ্বিতীয় স্নিপেটটি এতটা অর্থবোধ করে না কারণ প্রথমে আপনি ব্যবহার করছেন thisএবং পরে আপনি এটি দিয়ে হ্যাক করার চেষ্টা করছেন prototypeযা কার্যকর হয় না কারণ thisঅগ্রাধিকার গ্রহণের প্রয়োজন হয় prototype। আমি নিশ্চিত নই যে কোডটির এই অংশটি থেকে আপনার প্রত্যাশা কী ছিল এবং এটি কীভাবে কাজ করছে তবে আমি আপনাকে এটির পুনঃঅ্যাক্টর করার জন্য সুপারিশ করছি।

হালনাগাদ

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

উদাহরণটি খুব সহজ:

var myClass = function () { this.foo = "Foo"; };
myClass.prototype.foo = "nice try!";
myClass.prototype.bar = "Bar";

var obj = new myClass;
obj.foo;     // Still contains "Foo" ...
obj.bar;     // Contains "Bar" as expected

ব্যাখ্যাটি যেমনটি আমরা জানি, thisপ্রসঙ্গে প্রাসঙ্গিক। সুতরাং প্রসঙ্গ প্রস্তুত না হওয়া পর্যন্ত এটি অস্তিত্ব লাভ করবে না। প্রসঙ্গ প্রস্তুত? নতুন ঘটনা যখন তৈরি হচ্ছে! আপনার এখনই অনুমান করা উচিত! এর অর্থ এটি একটি prototypeসংজ্ঞা থাকলেও তবুও thisপ্রাধান্য নিতে আরও বোধগম্য হয় কারণ এই মুহুর্তে নতুন ঘটনাটি তৈরি হওয়া সম্পর্কে।

Comments

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

— জেডিলন 522

@ JDillon522 শুনে খুশি। আমি পরের ঘন্টা এটি আপডেট করার চেষ্টা করব!

— 53777A

@ জডিলন ৫২২ মাত্র একটি দ্রুত আপডেট করেছেন। আশা করি এবার আরও পরিষ্কার হবে।

— 53777 এ

@ জডিলন ৫২২ আপনার নমুনার স্নিপেটগুলি সম্পর্কে আরও কিছুটা ...

— 53777A

চমৎকার একক উদাহরণ। তাই আমি thisনিরীহ প্রোটোটাইপ উদাহরণ ব্যবহার করেছি কারণ thisএর নিজস্ব বৈশিষ্ট্যগুলি সহ এর পদ্ধতিগুলি উল্লেখ করে। কোড সম্পর্কে পড়া থেকে আমি সেরাটি শিখি না, তবে কোড দেখার চেয়ে আরও বেশি। (এতে এমডিএন এর বিট , অবজেক্ট প্লেগ্রাউন্ড (আশ্চর্যজনক) এবং আরও কয়েকটি)। আপনি কি এমন কিছুতে ইঙ্গিত করতে পারেন যা " thisঅগ্রাধিকার নেয়াকে " বোঝায় তার অর্থ কী prototype? আমি এটি আরও সন্ধান করতে চাই

— JDillon522