এই জাভাস্ক্রিপ্ট আইডিয়ামটি কিসের অন্তর্নিহিত: স্ব স্ব = এটি?


357

আমি ওয়েবকিট এইচটিএমএল 5 এসকিউএল স্টোরেজ নোটস ডেমোর উত্সে নিম্নলিখিতটি দেখেছি :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

লেখক কিছু স্থানে (ফাংশন বডি) এবং এটি অন্য জায়গায় স্ব ব্যবহার করেন ( পদ্ধতিগুলির যুক্তি তালিকায় সংজ্ঞায়িত ফাংশনগুলির সংস্থাগুলি)। কি হচ্ছে? এখন আমি এটি একবার খেয়াল করেছি, আমি কি এটি সর্বত্র দেখতে শুরু করব?


4
এটি একটি জেএস ভাষার বৈশিষ্ট্য যা "লেক্সিকাল ক্লোজার" নামে পরিচিত
সাবজিরো

2
এর সম্ভাব্য সদৃশ: var স্ব = এটি?
ডেভিডআরআর


এই উত্তরের প্রাসঙ্গিক উদাহরণ stackoverflow.com/a/20279485/5610569 (" thisকলব্যাকের অভ্যন্তরে সঠিক কীভাবে অ্যাক্সেস করবেন ?" এই
প্রশ্নে

উত্তর:


431

এই নিবন্ধটি alistapart.com এ দেখুন । (এড: নিবন্ধটি মূলত সংযুক্ত হওয়ার পর থেকে আপডেট হয়েছে)

selfthisপ্রসঙ্গ পরিবর্তিত হওয়ার সাথে সাথে মূলটির সাথে একটি রেফারেন্স বজায় রাখতে ব্যবহৃত হচ্ছে । এটি প্রায়শই ইভেন্ট হ্যান্ডলারগুলিতে ব্যবহৃত হয় (বিশেষত ক্লোজারে)।

সম্পাদনা: নোট করুন যে selfব্যবহারটি এখন window.selfউপস্থিত হিসাবে নিরুৎসাহিত করা হয়েছে এবং আপনি যদি সতর্ক না হন তবে ত্রুটি ঘটানোর সম্ভাবনা রয়েছে।

আপনি যাকে ভেরিয়েবল বলছেন তা বিশেষভাবে গুরুত্বপূর্ণ নয়। var that = this;ঠিক আছে, তবে নামটি নিয়ে কোনও জাদু নেই।

একটি প্রসঙ্গে (যেমন কলব্যাকস, ক্লোজারস) ঘোষিত ফাংশনগুলির একই স্কোপ বা তার উপরে বর্ণিত ভেরিয়েবল / ফাংশনে অ্যাক্সেস থাকবে।

উদাহরণস্বরূপ, একটি সাধারণ ইভেন্ট কলব্যাক:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});


প্রদর্শিত যে নিবন্ধটি ব্যবহার মধ্যে morphedvar that = this;
বব স্টেইন

ধন্যবাদ আমি সেই অনুযায়ী উত্তর আপডেট করব।
জোনাথন ফিংল্যান্ড

96

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

বিভ্রান্তি এবং সম্ভাব্য দ্বন্দ্ব এড়াতে আপনি লিখতে var thiz = thisবা var that = thisপরিবর্তে লিখতে পারেন ।


43
আমি সাধারণত ব্যবহার করি_this
djheru

6
@ ডিজেহেরু +1। " that" এর চেয়ে অনেক সুন্দর (যা আমার মস্তিষ্ক কখনই অভ্যস্ত হবে না)।
o_o_o--

9
আমি "আমি" ব্যবহার শুরু করেছি :)
মোপার্পার্থী রবীন্দ্রনাথ

3
যতক্ষণ না আধুনিক ব্রাউজারগুলি বিশ্বব্যাপী ভেরিয়েবল _ এটি, বা আমি সরবরাহ করতে শুরু করে।
বিজেজর

10
নামটি ব্যবহার করার ক্ষেত্রে একেবারেই কোনও সমস্যা নেই selfযতক্ষণ আপনি এটিকে varঅক্ষম হিসাবে ঘোষণা করেন , এটি বিশ্বব্যাপী ছায়া নেবে। অবশ্যই যদি আপনি এটি ভুলে যান varতবে এটি অন্য কোনও নামের সাথেও কাজ করবে না।
বার্গি

34

হ্যাঁ, আপনি এটি সর্বত্র দেখতে পাবেন। এটি প্রায়শই that = this;

দেখুন কীভাবে selfইভেন্টগুলির দ্বারা ডাকা হয় ফাংশনগুলির ভিতরে? এগুলির নিজস্ব প্রসঙ্গ থাকতে পারে, তাই এটি আসার জন্য selfব্যবহৃত thisহয় Note()

কারণগুলি selfএখনও ফাংশনগুলির জন্য উপলব্ধ, যদিও তারা কেবলমাত্র Note()ফাংশনটি সম্পাদন শেষ করার পরে সম্পাদন করতে পারে, এটি হ'ল অভ্যন্তরীণ ফাংশনগুলি বন্ধ হওয়ার কারণে বাইরের ফাংশনের প্রসঙ্গটি পায় ।


12
আমার জন্য জরুরী বিষয়টির selfকোনও বিশেষ অর্থ নেই has আমি ব্যক্তিগতভাবে অন্যরকম নামের কিছু ব্যবহার করা পছন্দ করি না selfকেননা এটি প্রায়শই আমাকে বিভ্রান্ত করে, কারণ আমি 'স্ব' সংরক্ষণের শব্দ হিসাবে প্রত্যাশা করি। সুতরাং আমি আপনার উত্তর পছন্দ। এবং ওপি এর উদাহরণে, আমি পছন্দ var thisNote = thisবা অনুরূপ চাই ।
স্টিভ

@ ধীরে ধীরে সম্মতি জানালেন, যদিও আমি সাধারণভাবে এই / স্ব-রেফারেন্সগুলি ব্যবহার করা এড়াতে চেষ্টা করি কারণ তারা রক্ষণাবেক্ষণের দিক থেকে খুব দৃrit়।
ম্যাটলুমাস

28

এটিও লক্ষ করা উচিত thisযে আপনি যদি কল্পনাটি পছন্দ না করেন তবে কলব্যাকটিতে মূলটির সাথে একটি রেফারেন্স বজায় রাখার জন্য বিকল্প প্রক্সি প্যাটার্ন রয়েছে var self = this

যেহেতু কোনও ফাংশনকে কোনও নির্দিষ্ট প্রসঙ্গে ব্যবহার করে ডাকা যেতে পারে function.applyবা function.call, আপনি একটি মোড়ক লিখতে পারেন যা কোনও ফাংশন ফিরিয়ে দেয় যা আপনার ফাংশনটিকে প্রদত্ত প্রসঙ্গের সাথে applyবা callব্যবহার করে বলে। proxyএই প্যাটার্নটি প্রয়োগের জন্য jQuery এর কার্যকারিতা দেখুন । এটি ব্যবহারের উদাহরণ এখানে:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFuncতারপরে বলা যেতে পারে এবং thisপ্রসঙ্গ হিসাবে এটির সংস্করণ থাকবে ।


10

অন্যদের ব্যাখ্যা, var self = this;একটি কোড পারবেন অবসান পিতা বা মাতা সুযোগ ফিরে পড়ুন।

তবে এটি এখন 2018 এবং ES6 সমস্ত বড় ওয়েব ব্রাউজার দ্বারা ব্যাপকভাবে সমর্থিত। var self = this;বাগ্ধারা বেশ অপরিহার্য যেমন একবার ছিল নয়।

তীর ফাংশনvar self = this; ব্যবহারের মাধ্যমে এখন এড়ানো সম্ভব ।

উদাহরণস্বরূপ যেখানে আমরা ব্যবহার করতাম var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

আমরা এখন ছাড়াই একটি তীর ফাংশন ব্যবহার করতে পারি var self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

তীরের ক্রিয়াকলাপগুলির নিজস্ব নিজস্ব নেই thisএবং কেবল এনক্লোজিংয়ের সুযোগটি ধরে নেওয়া উচিত।


বা - শক, হরর! - আসল প্রাসঙ্গিক জিনিসটি আপনার ফাংশন (সমাপনীকরণের) পক্ষে যুক্তি হিসাবে কেন পাস করবেন না? আপনি কেন স্কোপ স্টেটের বাইরে রেফারেন্স দিচ্ছেন, নরক কেন এমন প্রোগ্রামিং করছে? নেই কখনোই এই কাজ করতে কোনো বাস্তব কারণ। পরিবর্তে .addEventListender("click", (x) => { console.log(x); });আপনি কীভাবে এবং কেন খুব স্পষ্টভাবে ব্যাখ্যা করেছেন এবং আমি তীরের ক্রিয়াকলাপগুলি আরও বোধগম্য করে তা সম্মত করি, তবে এখনও ... এটি কেবল ভয়ঙ্কর, অলস, অগোছালো, প্রোগ্রামিং।
বেনিয়ামিন আর

2
জাভাস্ক্রিপ্টে, পিতামাতার স্কোপটি উল্লেখ করা খুব সাধারণ এবং প্রয়োজনীয়। এটি ভাষার একটি মৌলিক অংশ। ইভেন্ট হ্যান্ডলারটি হিসাবে আর্গুমেন্ট হিসাবে প্যারেন্ট স্কোপে পাস করার আপনার পরামর্শটি আসলে সম্ভব নয়। এছাড়াও, ES6 এ, তীর ফাংশনগুলি লেজিকাল স্কোপিং ব্যবহার করে - 'এটি' এটি বর্তমানের চারপাশের স্কোপকে বোঝায় এবং আরও কিছু নয় - এটি "স্কোপ স্টেটের বাইরে উল্লেখ করা" বা এর মতো কিছু নয় anything
এলিয়ট বি।

9

ভেরিয়েবলটি পদ্ধতিতে সংজ্ঞায়িত ইনলাইন ফাংশন দ্বারা ক্যাপচার করা হয়। thisফাংশনটি অন্য একটি বস্তুর উল্লেখ করবে। এইভাবে, আপনি ফাংশনটি thisবাইরের স্কোপটিতে একটি রেফারেন্স ধরে রাখতে পারেন ।


9

এটি একটি জাভাস্ক্রিপ্ট স্নিগ্ধ। যখন একটি ফাংশন একটি বস্তুর একটি সম্পত্তি, আরো যথাযোগ্যভাবে একটি পদ্ধতি বলা হয়, এই বস্তু বোঝায়। ইভেন্ট হ্যান্ডলারের উদাহরণে, উপাদানটি হ'ল উপাদান যা ইভেন্টকে ট্রিগার করে। যখন একটি প্রমিত ফাংশন প্রার্থনা করা হয়, এই বৈশ্বিক বস্তুর পড়ুন হবে। আপনি আপনার উদাহরণ হিসাবে নেস্টেড ফাংশন আছে, এই সব সময়ে বাইরের ফাংশন প্রেক্ষাপটে সঙ্গে সম্পর্কযুক্ত নয়। ইনার ফাংশন, ধারণকারী ফাংশন ভাগ সুযোগ না তাই ডেভেলপারদের বৈচিত্র ব্যবহার করবে var that = this, যাতে সংরক্ষণ করা এই তারা ভেতরের ফাংশনে প্রয়োজন।


5

প্রকৃতপক্ষে স্বয়ং উইন্ডোটির একটি রেফারেন্স ( window.self) অতএব যখন আপনি var self = 'something'নিজেকে উইন্ডো রেফারেন্সটি নিজের থেকে ওভাররাইড করেন - কারণ উইন্ডো অবজেক্টে স্ব বিদ্যমান থাকে।

এজন্য বেশিরভাগ বিকাশকারীই var that = thisবেশি পছন্দ করেনvar self = this;

যাই হোক; var that = this;ভাল অনুশীলনের সাথে সঙ্গতিপূর্ণ নয় ... ধরে নেওয়া যায় যে আপনার কোডটি পরে অন্য বিকাশকারীদের দ্বারা সংশোধন / সংশোধন করা হবে আপনার বিকাশকারী সম্প্রদায়ের সাথে সম্মতিতে সবচেয়ে সাধারণ প্রোগ্রামিং মান ব্যবহার করা উচিত

সুতরাং আপনার oldThis/ var oThis/ ইত্যাদি ইত্যাদির মতো কিছু ব্যবহার করা উচিত - আপনার ক্ষেত্রের মধ্যে পরিষ্কার হতে // ..এটি বেশি নয় তবে কয়েক সেকেন্ড এবং কিছু মস্তিষ্কের চক্র সাশ্রয় করবে


2
@ প্রিয়ার আমি মনে করি এটি শেষ অনুচ্ছেদ পর্যন্ত এটি উপলব্ধি করে।
মিফ

0

উপরে বেশ কয়েকবার উল্লিখিত হিসাবে, 'স্ব' কেবল মজাদার প্রবেশের আগে 'এটির' একটি রেফারেন্স রাখতে ব্যবহৃত হয়। একবার 'এই' ফাংশনে অন্য কিছু বোঝায়।


@JohnPaul ... এই করে একটি উত্তর প্রদান। এটি সঠিক উত্তর নাও হতে পারে তবে আপনি কীভাবে বলতে পারেন যে "" এটি অভ্যস্ত ছিল ... "" তিনি কেন এমন করলেন "এর কোনও উত্তর নয়?
গ্রিনআসজেড

-1
function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);


1
কোডটির সাথে আপনার কিছু ব্যাখ্যা যুক্ত করা উচিত যা আপনি বিশেষ করেছেন।
ফারহানা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.