javascript - ফরম - বায়োডাটা লেখার নিয়ম




কল এবং আবেদন মধ্যে পার্থক্য কি? (14)

call ব্যবহার এবং একটি ফাংশন আহ্বান করতে পার্থক্য কি?

var func = function() {
  alert('hello!');
};

func.apply(); বনাম func.call();

দুই aforementioned পদ্ধতির মধ্যে কর্মক্ষমতা পার্থক্য আছে? apply এবং কলাকৌশল উপর call ব্যবহার করার জন্য এটি সর্বোত্তম?


সারাংশ:

call() এবং apply() উভয় Function.prototype অবস্থিত পদ্ধতিগুলি। সুতরাং তারা প্রোটোটাইপ চেইন মাধ্যমে প্রতিটি ফাংশন বস্তুর উপর উপলব্ধ। উভয় call() এবং apply() this একটি নির্দিষ্ট মান সঙ্গে একটি ফাংশন নির্বাহ করতে পারেন।

call() এবং apply() মধ্যে প্রধান পার্থক্যটি আপনাকে এটির মধ্যে আর্গুমেন্টগুলিতে পাস করার উপায়। উভয় call() এবং apply() আপনি প্রথম যুক্তি হিসাবে প্রেরণ করেন যা আপনি এই মান হিসাবে চান। অন্যান্য আর্গুমেন্ট নিম্নলিখিত ভাবে ভিন্ন:

  • call() আপনাকে সাধারণত আর্গুমেন্টগুলিতে রাখতে হবে (দ্বিতীয় যুক্তি থেকে শুরু করে)
  • apply() আপনি আর্গুমেন্ট অ্যারের মধ্যে পাস করতে হবে।

উদাহরণ:

let obj = {
  val1: 5,
  val2: 10
}

const summation = function (val3, val4) {
  return  this.val1 + this.val2 + val3 + val4;
}

console.log(summation.apply(obj, [2 ,3]));
// first we assign we value of this in the first arg
// with apply we have to pass in an array


console.log(summation.call(obj, 2, 3));
// with call we can pass in each arg individually

কেন আমি এই ফাংশন ব্যবহার করতে হবে?

this মান জাভাস্ক্রিপ্ট কখনও কখনও চতুর হতে পারে। একটি ফাংশন সংজ্ঞায়িত করা হয় না যখন একটি ফাংশন নির্বাহ করা হয় যখন this মান নির্ধারিত। যদি আমাদের ফাংশন একটি অধিকারের উপর নির্ভরশীল হয় তবে this বাঁধাই আমরা call() ব্যবহার করতে এবং apply() এই আচরণ প্রয়োগ করতে পারি। উদাহরণ স্বরূপ:

var name = 'unwantedGlobalName';

const obj =  {
  name: 'Willem',
  sayName () { console.log(this.name);}
}


let copiedMethod = obj.sayName;
// we store the function in the copiedmethod variable



copiedMethod();
// this is now window, unwantedGlobalName gets logged

copiedMethod.call(obj);
// we enforce this to be obj, Willem gets logged


আমরা কল পার্থক্য এবং নীচের পদ্ধতি প্রয়োগ করতে পারেন

কল করুন: যুক্তি সঙ্গে একটি ফাংশন পৃথকভাবে প্রদান। যদি আপনি পাস করা আর্গুমেন্টগুলি জানেন বা পাস করার জন্য কোন যুক্তি নেই তবে আপনি কলটি ব্যবহার করতে পারেন।

প্রয়োগ করুন: একটি অ্যারের হিসাবে প্রদত্ত যুক্তি সহ একটি ফাংশন কল করুন। ফাংশনে পাস করার জন্য কতগুলি যুক্তি চলছে তা আপনি জানেন না যদি আপনি আবেদন ব্যবহার করতে পারেন।

কল উপর আবেদন ব্যবহার করার একটি সুবিধা আছে, আমরা যুক্তি সংখ্যা সংখ্যা পরিবর্তন করতে হবে না শুধুমাত্র আমরা একটি অ্যারে পাস করা যেতে পারে।

কর্মক্ষমতা বড় পার্থক্য নেই। কিন্তু আমরা প্রয়োগের তুলনায় কলটিকে একটু দ্রুত বলতে পারি কারণ একটি অ্যারে প্রয়োগ পদ্ধতিতে মূল্যায়ন করতে হবে।


এই পদ্ধতির মধ্যে পার্থক্য হল, আপনি পরামিতি পাস করতে চান কিভাবে।

"একটি অ্যারের জন্য এবং কমা জন্য সি" একটি সহজ মনোমুগ্ধকর।


একটি ফাংশন কার্যকর হলে কল এবং প্রয়োগ উভয় this মান জোরপূর্বক ব্যবহৃত হয়। শুধুমাত্র পার্থক্য হলো call n+1 আর্গুমেন্ট নেয় যেখানে 1 এটি এবং 'n' argumentsapply শুধুমাত্র দুটি আর্গুমেন্ট লাগে, এক অন্য যুক্তি যুক্তিবিজ্ঞান হয়।

call উপর apply সুবিধাটি হল যে আমরা সহজেই কোনও ফাংশন কল ছাড়া অন্য ফাংশনে কল করতে পারি;

function sayHello() {
  console.log(this, arguments);
}

function hello() {
  sayHello.apply(this, arguments);
}

var obj = {name: 'my name'}
hello.call(obj, 'some', 'arguments');

hello কতো সহজে আমরা sayHello call hello call apply ব্যবহার করে, কিন্তু call দিয়ে এটি অর্জন করা খুব কঠিন।


এখানে একটি ভাল স্মারক। একটি Pply একটি Rays ব্যবহার করে এবং একটি লওয়ে এক বা দুই আর্গুমেন্ট লাগে। আপনি যখন সি ব্যবহার করেন তখন আপনাকে অবশ্যই আর্গুমেন্ট সংখ্যা C কে গণনা করতে হবে।


এটি একটি পুরানো বিষয় হলেও, আমি কেবল এটি নির্দেশ করতে চেয়েছিলাম। কলটি .apply তুলনায় সামান্য দ্রুত। আমি ঠিক তোমাকে বলতে পারছি না কেন।

JsPerf দেখুন, http://jsperf.com/test-call-vs-apply/3

[ UPDATE! ]

ডগলাস ক্রকফোর্ড সংক্ষিপ্তভাবে দুটিটির মধ্যে পার্থক্য উল্লেখ করেছেন, যা পারফরম্যান্স পার্থক্য ব্যাখ্যা করতে সহায়তা করতে পারে ... http://youtu.be/ya4UHuXNygM?t=15m52s

অ্যাপ্লিকেশন আর্গুমেন্ট একটি অ্যারে লাগে, কল শূন্য বা আরো পৃথক পরামিতি লাগে যখন! আহ হা!

.apply(this, [...])

.call(this, param1, param2, param3, param4...)


কল () কমা দ্বারা পৃথক আর্গুমেন্ট নেয়, প্রাক্তন:

.call(scope, arg1, arg2, arg3)

এবং প্রয়োগ () আর্গুমেন্টগুলির একটি অ্যারে নেয়, যেমন:

.apply(scope, [arg1, arg2, arg3])

এখানে আরও কয়েকটি ব্যবহার উদাহরণ রয়েছে: http://blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/


কল, আবেদন এবং বাঁধ সঙ্গে আরেকটি উদাহরণ। কল এবং প্রয়োগের মধ্যে পার্থক্য স্পষ্ট, তবে বাইন্ড এইরকম কাজ করে:

  1. বাঁধন ফাংশন একটি উদাহরণ ফেরৎ যে মৃত্যুদন্ড কার্যকর করা যাবে
  2. প্রথম পরামিতি ' এই '
  3. দ্বিতীয় পরামিতি একটি কমা দ্বারা আর্গুমেন্ট পৃথক তালিকা ( কল মত)

}

function Person(name) {
    this.name = name; 
}
Person.prototype.getName = function(a,b) { 
     return this.name + " " + a + " " + b; 
}

var reader = new Person('John Smith');

reader.getName = function() {
   // Apply and Call executes the function and returns value

   // Also notice the different ways of extracting 'getName' prototype
   var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
   console.log("Apply: " + baseName);

   var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy"); 
   console.log("Call: " + baseName);

   // Bind returns function which can be invoked
   var baseName = Person.prototype.getName.bind(this, "is a", "boy"); 
   console.log("Bind: " + baseName());
}

reader.getName();
/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy
*/

তথাপি call এবং apply একই জিনিস apply , আমি মনে করি অন্তত একটি জায়গা যেখানে আপনি call ব্যবহার করতে পারবেন না কিন্তু apply করতে apply । আপনি উত্তরাধিকার সমর্থন করতে চান এবং কন্সট্রাকটর কল করতে চান যখন যে হয়।

এখানে একটি ফাংশন আপনাকে এমন ক্লাস তৈরি করতে দেয় যা অন্যান্য ক্লাস প্রসারিত করে ক্লাস তৈরি করতে সহায়তা করে।

function makeClass( properties ) {
    var ctor = properties['constructor'] || function(){}
    var Super = properties['extends'];
    var Class = function () {
                 // Here 'call' cannot work, only 'apply' can!!!
                 if(Super)
                    Super.apply(this,arguments);  
                 ctor.apply(this,arguments);
                }
     if(Super){
        Class.prototype = Object.create( Super.prototype );
        Class.prototype.constructor = Class;
     }
     Object.keys(properties).forEach( function(prop) {
           if(prop!=='constructor' && prop!=='extends')
            Class.prototype[prop] = properties[prop];
     });
   return Class; 
}

//Usage
var Car = makeClass({
             constructor: function(name){
                         this.name=name;
                        },
             yourName: function() {
                     return this.name;
                   }
          });
//We have a Car class now
 var carInstance=new Car('Fiat');
carInstance.youName();// ReturnsFiat

var SuperCar = makeClass({
               constructor: function(ignore,power){
                     this.power=power;
                  },
               extends:Car,
               yourPower: function() {
                    return this.power;
                  }
              });
//We have a SuperCar class now, which is subclass of Car
var superCar=new SuperCar('BMW xy',2.6);
superCar.yourName();//Returns BMW xy
superCar.yourPower();// Returns 2.6

পার্থক্য হল যে call() আলাদাভাবে ফাংশন আর্গুমেন্টগুলি নেয় এবং apply() একটি অ্যারে ফাংশন আর্গুমেন্টগুলি নেয়।


প্রতিটি ফাংশন কখন ব্যবহার করবেন সে সম্পর্কে অংশটির উত্তর দিতে, যদি আপনি কোনও আর্গুমেন্টের সংখ্যা অতিক্রম করতে না পারেন তবে এটি কোনও অ্যারে বা অ্যারে-এর মতো বস্তুর (যেমন আপনার নিজস্ব ফরোয়ার্ডের arguments অবজেক্টের মতো) আর্গুমেন্ট। অন্যথায় call ব্যবহার করুন, যেহেতু একটি অ্যারের মধ্যে আর্গুমেন্ট মোড়ানো প্রয়োজন নেই।

f.call(thisObject, a, b, c); // Fixed number of arguments

f.apply(thisObject, arguments); // Forward this function's arguments

var args = [];
while (...) {
    args.push(some_value());
}
f.apply(thisObject, args); // Unknown number of arguments

যখন আমি কোনও আর্গুমেন্ট (যেমন আপনার উদাহরণ) পাস করছি না, আমি ফাংশন call পরে call পছন্দ করি। apply হবে আপনি ফাংশন প্রয়োগ করা হবে (অস্তিত্ব) আর্গুমেন্ট।

কোনও পারফরম্যান্সের পার্থক্য থাকা উচিত নয়, যদি আপনি apply এবং অ্যারেতে আর্গুমেন্ট মোড়ানো (উদাহরণস্বরূপ f.apply(thisObject, [a, b, c]) পরিবর্তে f.call(thisObject, a, b, c) )। আমি এটি পরীক্ষা করে নিচ্ছি, তাই পার্থক্য থাকতে পারে, তবে এটি খুব ব্রাউজার নির্দিষ্ট হবে। call যদি ইতিমধ্যে একটি অ্যারের মধ্যে আর্গুমেন্ট না থাকে এবং যদি আপনি দ্রুত তা apply হয়, তাহলে কল দ্রুত হয়।


প্রধান পার্থক্য হচ্ছে কল ব্যবহার করে, আমরা সুযোগটি পরিবর্তন করতে এবং স্বাভাবিক হিসাবে আর্গুমেন্টগুলি পাস করতে পারি তবে প্রয়োগ করুন আপনাকে এটি অ্যারে হিসাবে আর্গুমেন্ট ব্যবহার করে কল করতে দেয় (তাদের অ্যারে হিসাবে পাস করুন)। কিন্তু তারা আপনার কোডে কি করতে হবে সে বিষয়ে তারা বেশ অনুরূপ।

যদিও এই ফাংশনটির সিনট্যাক্স প্রয়োগযোগ্য () এর সাথে প্রায় একই রকম, তবে মৌলিক পার্থক্যটি হল কল () প্রয়োগ করার সময় একটি যুক্তি তালিকা গ্রহণ করে () আর্গুমেন্টগুলির একক অ্যারে গ্রহণ করে।

সুতরাং আপনি দেখতে হিসাবে, একটি বড় পার্থক্য নেই, তবে এখনও কল () বা প্রয়োগ () ব্যবহার করে আমরা পছন্দ করি। উদাহরণস্বরূপ, নিচের কোডটি দেখুন, যা এমডিএন থেকে একটি অ্যারের ক্ষুদ্রতম এবং বৃহত্তম সংখ্যা প্রয়োগ পদ্ধতি ব্যবহার করে:

// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers)

সুতরাং মূল পার্থক্যটি হল আমরা আর্গুমেন্টগুলি পাস করার উপায়:

কল করুন:

function.call(thisArg, arg1, arg2, ...);

প্রয়োগ করুন:

function.apply(thisArg, [argsArray]);

বন্ধ থেকে একটি নির্যাস অনুসরণ : মাইকেল Bolin দ্বারা সংজ্ঞামূলক গাইড । এটি একটি বিট লম্বা চেহারা হতে পারে, কিন্তু এটি অন্তর্দৃষ্টি অনেক সঙ্গে সম্পৃক্ত করা হয়। "পরিশিষ্ট বি। থেকে প্রায়শই জাভাস্ক্রিপ্ট ধারণাগুলি ভুল বুঝায়":

একটি ফাংশন আহ্বান করা হয় যখন this উল্লেখ করে

ফর্ম foo.bar.baz() ফাংশন কল করার সময়, বস্তু foo.bar.baz() রিসিভার হিসাবে উল্লেখ করা হয়। যখন ফাংশন বলা হয়, এটি প্রাপক যা এর জন্য মান হিসাবে ব্যবহৃত হয়:

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.
obj.addValues(20);

একটি ফাংশন বলা হয় যখন কোন স্পষ্ট রিসিভার নেই, তাহলে বিশ্বব্যাপী বস্তু প্রাপক হয়ে ওঠে। পৃষ্ঠা 47 তে "goog.global" এ ব্যাখ্যা করা হয়েছে, যখন একটি ওয়েব ব্রাউজারে জাভাস্ক্রিপ্টটি কার্যকর হয় তখন উইন্ডোটি গ্লোবাল অবজেক্ট। এই কিছু বিস্ময়কর আচরণ বাড়ে:

var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
f(20);
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN

যদিও obj.addValues এবং f একই ফাংশনের উল্লেখ করে, তথাকথিত তারা ভিন্নভাবে আচরণ করে কারণ প্রতিটি কলটিতে প্রাপকের মান ভিন্ন। এই কারণে, যখন এটি উল্লেখ করা একটি ফাংশন কল করা হয়, এটি নিশ্চিত করা গুরুত্বপূর্ণ যে এটি যখন এটি বলা হয় তখন সঠিক মান থাকবে। স্পষ্ট হতে, যদি ফাংশন শরীরের মধ্যে উল্লেখ করা হয় না, তাহলে f(20) এবং obj.addValues(20) আচরণ একই হবে।

কারন ফাংশনগুলি জাভাস্ক্রিপ্টে প্রথম-শ্রেণীর বস্তুগুলির কারণে, তাদের নিজস্ব পদ্ধতি থাকতে পারে। সমস্ত ফাংশনে পদ্ধতি call() এবং apply() যা ফাংশন call() করার সময় প্রাপককে পুনরায় সংজ্ঞায়িত করা (অর্থাত্ যে বস্তুটি নির্দেশ করে) সক্ষম করে। পদ্ধতি স্বাক্ষর নিম্নরূপ:

/**
* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
*/
Function.prototype.call;
/**
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function
*/
Function.prototype.apply;

উল্লেখ্য যে call() এবং apply() মধ্যে একমাত্র পার্থক্য হল যে call() পৃথক আর্গুমেন্ট হিসাবে ফাংশন প্যারামিটারগুলি গ্রহণ করে, যখন apply() তাদের একক অ্যারে হিসাবে গ্রহণ করে:

// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

নিম্নলিখিত কলগুলি সমতুল্য, যেমন f এবং obj.addValues একই ফাংশনটি উল্লেখ করে:

obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

যাইহোক, যেহেতু এটি অনির্দিষ্ট না হওয়ার পরে প্রাপক যুক্তিটির জন্য বিকল্প হিসাবে call() নাও apply() তার নিজস্ব প্রাপকের মানটি ব্যবহার করে, নিম্নলিখিতগুলি কাজ করবে না:

// Both statements evaluate to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

একটি ফাংশন বলা হয় যখন this মান null বা undefined হতে পারে না। যখন null বা undefined call() বা apply() করার জন্য সরবরাহকারী হিসাবে সরবরাহ করা হয়, গ্লোবাল অবজেক্টটি তার পরিবর্তে রিসিভারের মান হিসাবে ব্যবহার করা হয়। অতএব, পূর্ববর্তী কোডটি গ্লোবাল অবজেক্টের value নামে একটি সম্পত্তি যোগ করার একই অবাঞ্ছিত পার্শ্ব প্রতিক্রিয়া রয়েছে।

কোনও ভেরিয়েবলের কোন জ্ঞান না থাকার কারণে এটি কোনও ফাংশনের কথা চিন্তা করা সহায়ক হতে পারে। এটি এই ধারণাটি শক্তিশালী করতে সহায়তা করে যে যখন এটি সংজ্ঞায়িত হওয়ার পরিবর্তে ফাংশন বলা হয় তখন এর মান আবদ্ধ হবে।

নিষ্কাশন শেষ।


Function.prototype.apply এ MDN ডক্স থেকে () :

প্রয়োগ () পদ্ধতিটি একটি প্রদত্ত this মান এবং একটি অ্যারের (অথবা একটি অ্যারের মতো বস্তু) প্রদান করা আর্গুমেন্টগুলির সাথে একটি ফাংশনকে কল করে।

বাক্য গঠন

fun.apply(thisArg, [argsArray])

Function.prototype.call () এ MDN ডক্স থেকে:

কল () পদ্ধতি একটি প্রদত্ত this মান এবং আর্গুমেন্ট পৃথকভাবে প্রদান করে একটি ফাংশন কল করে।

বাক্য গঠন

fun.call(thisArg[, arg1[, arg2[, ...]]])

জাভাস্ক্রিপ্ট Function.apply এবং Function.call থেকে:

আবেদনটি () পদ্ধতিটি কল () এর মতো হয়, প্রয়োগ ব্যতীত () কে অন্য প্যারামিটার হিসাবে একটি অ্যারের প্রয়োজন। অ্যারে লক্ষ্য পদ্ধতির জন্য আর্গুমেন্ট প্রতিনিধিত্ব করে।

কোড উদাহরণ:

var doSomething = function() {
    var arr = [];
    for(i in arguments) {
        if(typeof this[arguments[i]] !== 'undefined') {
            arr.push(this[arguments[i]]);
        }
    }
    return arr;
}

var output = function(position, obj) {
    document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>';
}

output(1, doSomething(
    'one',
    'two',
    'two',
    'one'
));

output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [
    'one',
    'two',
    'two',
    'one'
]));

output(3, doSomething.call({one : 'Steven', two : 'Jane'},
    'one',
    'two',
    'two',
    'one'
));

এই Fiddle দেখুন





dynamic