জাভাস্ক্রিপ্ট: .extend এবং .প্রোটোটাইপ কিসের জন্য ব্যবহৃত হয়?


122

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

উত্তর:


136

জাভাস্ক্রিপ্টের উত্তরাধিকার প্রোটোটাইপ ভিত্তিক, সুতরাং আপনি তারিখ, গণিত এবং এমনকি আপনার নিজস্ব কাস্টমগুলির মতো অবজেক্টগুলির প্রোটোটাইপগুলি প্রসারিত করেন।

Date.prototype.lol = function() {
 alert('hi');
};

( new Date ).lol() // alert message

উপরের স্নিপেটে, আমি সমস্ত তারিখের অবজেক্টের জন্য একটি পদ্ধতি নির্ধারণ করেছি (ইতিমধ্যে বিদ্যমান এবং সমস্ত নতুন)।

extend সাধারণত একটি উচ্চ স্তরের ফাংশন যা আপনি বেস ক্লাস থেকে প্রসারিত করতে চান এমন একটি নতুন সাবক্লাসের প্রোটোটাইপ অনুলিপি করে।

সুতরাং আপনি যেমন কিছু করতে পারেন:

extend( Fighter, Human )

এবং Fighterকনস্ট্রাক্টর / অবজেক্ট এর প্রোটোটাইপের উত্তরাধিকারী হবে Human, সুতরাং আপনি যদি পদ্ধতিগুলি যেমন liveএবং তারপরে সংজ্ঞায়িত dieকরেন Humanতবে Fighterসেগুলিরও উত্তরাধিকারী হবে।

আপডেট স্পষ্টকরণ:

"হাই লেভেল ফাংশন" অর্থ। এক্সটেট অন্তর্নির্মিত নয় তবে প্রায়শই jQuery বা প্রোটোটাইপের মতো লাইব্রেরি দ্বারা সরবরাহ করা হয়।


75
"উচ্চ স্তরের ফাংশন" অর্থ .extendঅন্তর্নির্মিত নয় তবে প্রায়শই jQuery বা প্রোটোটাইপের মতো লাইব্রেরি দ্বারা সরবরাহ করা হয়।
দৃশ্যমান

13
আমি যোগ করব এটি
জেএসে

1
@ মিডার - আপনার উত্তরে ভিজ্যুম মন্তব্য যুক্ত করা উচিত। :)
মণীশ গুপ্ত 11

9
আধুনিক জাভাস্ক্রিপ্ট প্রোগ্রামিংয়ে, গ্লোবালগুলি এবং সরকারী বাথরুমের উপাদানগুলির মতো দেশীয় বস্তুগুলির চিকিত্সার প্রথাগত; আপনি সেখানে যেতে এড়াতে পারবেন না, তবে আপনার পৃষ্ঠের সাথে যোগাযোগকে ছোট করার চেষ্টা করা উচিত। এটি changing the native objects can break other developer's assumptions of these objects,জাভাস্ক্রিপ্ট বাগের দিকে পরিচালিত করে যা প্রায়শই ট্র্যাক ডাউন করতে অনেক ঘন্টা ব্যয় করতে পারে। এই উত্তরের শীর্ষস্থানীয় বাক্যটি মনে হয় এই মূল্যবান জাভাস্ক্রিপ্ট অনুশীলনটিকে ভুলভাবে বর্ণনা করেছে।
নিনজাক্সর

24

.extend()অনেকগুলি তৃতীয় পক্ষের লাইব্রেরি যুক্ত করা হয় যাতে অন্যান্য অবজেক্ট থেকে বস্তু তৈরি করা সহজ হয়। কিছু উদাহরণের জন্য http://api.jquery.com/jQuery.extend/ বা http://www.prototypejs.org/api/object/extend দেখুন ।

.prototype কোনও অবজেক্টের "টেমপ্লেট" (যদি আপনি এটি বলতে চান) বোঝায়, সুতরাং কোনও বস্তুর প্রোটোটাইপের সাথে পদ্ধতি যুক্ত করে (আপনি স্ট্রিং, তারিখ, গণিত বা এমনকি ফাংশনে যোগ করার জন্য গ্রন্থাগারে এটি প্রচুর দেখতে পান) সেই পদ্ধতিগুলি object বস্তুর প্রতিটি নতুন উদাহরণে যুক্ত করা হয়।


19

extendউদাহরণ জন্য পদ্ধতি jQuery এর বা PrototypeJS , কপি গন্তব্য বস্তু উৎস থেকে সব বৈশিষ্ট্য।

prototypeসম্পত্তি সম্পর্কে এখন এটি ফাংশন অবজেক্টের একটি সদস্য, এটি ভাষা মূল অংশ part

যে কোনও ফাংশন নতুন অবজেক্টের উদাহরণ তৈরি করতে কনস্ট্রাক্টর হিসাবে ব্যবহার করা যেতে পারে । সমস্ত ফাংশন এই prototypeসম্পত্তি আছে।

আপনি যখন newকোনও ফাংশন অবজেক্টের সাথে অপারেটরটি ব্যবহার করবেন তখন একটি নতুন অবজেক্ট তৈরি হবে এবং এটি তার নির্মাণকারীর কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হবে prototype

উদাহরণ স্বরূপ:

function Foo () {
}
Foo.prototype.bar = true;

var foo = new Foo();

foo.bar; // true
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

18

জাভাস্ক্রিপ্ট উত্তরাধিকার সর্বত্র একটি মুক্ত বিতর্ক মত মনে হচ্ছে। এটিকে "জাভাস্ক্রিপ্ট ভাষার কৌতূহলী ক্ষেত্রে" বলা যেতে পারে।

ধারণাটি হল যে এখানে একটি বেস ক্লাস রয়েছে এবং তারপরে আপনি উত্তরাধিকারের মতো বৈশিষ্ট্য পেতে সম্পূর্ণ বর্গকে প্রসারিত করুন (সম্পূর্ণ নয়, তবে এখনও)।

পুরো ধারণাটি হ'ল প্রোটোটাইপটির অর্থ কী। জন রেসিগের কোডটি (যা jQuery.extendকরে তার কাছাকাছি) একটি কোড অংশ লিখেছিল যতক্ষণ না আমি এটি পেয়েছিলাম না এবং তিনি দাবি করেন যে বেস 2 এবং প্রোটোটাইপ লাইব্রেরি অনুপ্রেরণার উত্স ছিল।

কোডটি এখানে।

    /* Simple JavaScript Inheritance
     * By John Resig http://ejohn.org/
     * MIT Licensed.
     */  
     // Inspired by base2 and Prototype
    (function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

তিনটি অংশ রয়েছে যা কাজ করছে। প্রথমে আপনি বৈশিষ্ট্যগুলি লুপ করে এগুলি দৃষ্টান্তে যুক্ত করুন। এর পরে, আপনি পরবর্তীতে অবজেক্টে যুক্ত হওয়ার জন্য একটি কনস্ট্রাক্টর তৈরি করেন ow এখন, মূল লাইনগুলি হ'ল:

// Populate our constructed prototype object
Class.prototype = prototype;

// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;

আপনি প্রথমে Class.prototypeপছন্দসই প্রোটোটাইপটি নির্দেশ করুন । এখন, পুরো অবজেক্টটির অর্থ পরিবর্তিত হয়েছে যে আপনাকে লেআউটটিকে তার নিজের কাছে ফিরিয়ে দিতে হবে।

এবং ব্যবহারের উদাহরণ:

var Car = Class.Extend({
  setColor: function(clr){
    color = clr;
  }
});

var volvo = Car.Extend({
   getColor: function () {
      return color;
   }
});

জন রেসিগের পোস্ট দ্বারা জাভাস্ক্রিপ্ট উত্তরাধিকারে এটি সম্পর্কে আরও পড়ুন ।


2

extendতৃতীয় পক্ষের লাইব্রেরিতে কিছু ফাংশন অন্যদের চেয়ে জটিল। Knockout.js উদাহরণস্বরূপ ন্যূনতমরূপে সহজ যে এক চেক jQuery এর মধ্যে আছে যে কিছু নেই রয়েছে:

function extend(target, source) {
    if (source) {
        for(var prop in source) {
            if(source.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
    }
    return target;
}

2
  • .extends() একটি ক্লাস তৈরি করুন যা অন্য শ্রেণির একটি শিশু।
    পর্দার পিছনে Child.prototype.__proto__তার মান সেট করে Parent.prototype
    যাতে পদ্ধতিগুলি উত্তরাধিকার সূত্রে প্রাপ্ত হয়।
  • .prototype একে অপরের বৈশিষ্ট্য উত্তরাধিকারী।
  • .__proto__ প্রোটোটাইপের জন্য গিটার / সেটটার।

এই .extend করা উচিত হবে না () এবং না .extends ()?
এসজেহউ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.