জাভাস্ক্রিপ্ট এ এবং স্ব মধ্যে পার্থক্য


118

প্রত্যেকে thisজাভাস্ক্রিপ্টে সচেতন , তবে selfবন্যের মধ্যেও এর মুখোমুখি হওয়ার উদাহরণ রয়েছে যেমন এখানে

সুতরাং, জাভাস্ক্রিপ্ট মধ্যে thisএবং পার্থক্য কি self?



8
@ অডিস্ট্রয়: একটি আছে: window.self( === window)। যদিও
ওপিটির

2
@ অডিস্ট্রয়: আসলে আমি ভাবিনি যে তিনি আসলেই এটি বোঝাতে পারেন, তবে বিশ্বব্যাপী সুযোগে (এবং একটি ব্রাউজার পরিবেশ) this === selfসত্য :-)
বার্গি

2
সরাইয়া বিষয়ী: এলিয়াসিং thisকরার selfএকটি দুর্দান্ত অনুশীলন আজকাল যখন অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং ফলত, অনেক (ভাল, একটির বেশি খারাপ যথেষ্ঠ) কলব্যাক পাখির মাত্রা সঙ্গে কোড আছে তা সাধারণ নয়। পরিবর্তে আরও বর্ণনামূলক নাম ব্যবহার করুন। উদ্দেশ্যমূলকভাবে thisনিজের নামটি বললে কোনও তথ্য থাকে না এবং এটি কেবল নামের পছন্দ নয়, কারণ শ্রেণীর সংজ্ঞাটির লেজিকাল প্রসঙ্গটি এটি যোগ্যতা অর্জন করে।
মিলিমুজ

2
এটি একটি বৈধ এবং দরকারী প্রশ্ন, এটি আবার খোলা উচিত
ডানজা

উত্তর:


127

যদি না অন্য কোথাও সেট, মান selfহয় windowকারণ জাভাস্ক্রিপ্ট যদি আপনি কোন সম্পত্তি অ্যাক্সেস করতে দেয় xএর windowকেবল হিসাবে xপরিবর্তে window.x। অতএব, selfসত্যিই হয় window.self, যা পৃথক this

window.self === window; // true

আপনি যদি এমন কোনও ফাংশন ব্যবহার করছেন যা বিশ্বব্যাপী সুযোগে কার্যকর করা হয় এবং কঠোর মোডে না থাকে তবে thisডিফল্ট হয় windowএবং তাই

function foo() {
    console.log(
        window.self === window, // is self window?
        window.self === this,   // is self this?
        this === window         // is this window?
    );
}
foo(); // true true true

আপনি যদি অন্য কোনও প্রসঙ্গে কোনও ফাংশন ব্যবহার করে থাকেন thisতবে সেই প্রসঙ্গটি উল্লেখ করা selfহবে , কিন্তু এখনও থাকবে window

// invoke foo with context {}
foo.call({}); // true false false

আপনি খুঁজে পেতে পারেন window.selfসংজ্ঞায়িত জন্য W3C এর 2006 পরিশ্রমী খসড়া উইন্ডো অবজেক্ট এখানে


34
সম্পূর্ণতার জন্য, selfযখন উইন্ডো অ্যাক্সেসযোগ্য না হয় তখন ওয়েব ওয়ার্কারের প্রসঙ্গে কার্যকর ( ডেভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েব / গুয়াইড / পারফরম্যান্স/… )। selfপরিবর্তে ব্যবহার করা windowআপনাকে গ্লোবাল অবজেক্টকে পোর্টেবল উপায়ে অ্যাক্সেস করতে দেয়।
lqc

24

পরিষেবা কর্মীদের প্রসঙ্গে লোকেরা এর মুখোমুখি হতে পারে বলে এর সামান্য সংযোজন, এক্ষেত্রে এর অর্থ কিছুটা আলাদা।

আপনি এটি কোনও পরিষেবা কর্মী মডিউলে দেখতে পাবেন:

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

এখানে স্ব ওয়ার্কর গ্লোবালস্কোপকে বোঝায় এবং ইভেন্ট শ্রোতাদের সেট করার জন্য এটিই আদর্শ পদ্ধতি।

মজিলা ডক্স থেকে :

স্ব ব্যবহার করে আপনি বিশ্বব্যাপী সুযোগটি এমনভাবে উল্লেখ করতে পারেন যা কেবল উইন্ডো প্রসঙ্গে নয় (স্বয়ং উইন্ডো.সেল্ফের সাথে সংশোধন করবে) বরং কর্মী প্রসঙ্গেও (স্বতঃস্ফূর্তভাবে ওয়ার্কারগ্লোব্লস্কোপ.সাইভে সংশোধন করবে) কাজ করবে।


ধন্যবাদ! আমি এই উত্তরটির সন্ধান
করছিলাম

23

যদিও আমি এখানে দেরি করেছি তবে আমি একটি উদাহরণ পেয়েছি যা thisআরও বুঝতে সাহায্য করতে পারে :

var myObject = {
 foo: "bar",
 func: function() {
    var self = this;
    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);
    (function() {
        console.log("inner func:  this.foo = " + this.foo);
        console.log("inner func:  self.foo = " + self.foo);
    }());
  }
};
myObject.func();

O / পি

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

ইসিএমএ 5 এর আগে, thisঅভ্যন্তরীণ ফাংশনটিতে গ্লোবাল উইন্ডো অবজেক্টটি উল্লেখ করা হত; যদিও, ইসিএমএ 5 হিসাবে, thisঅভ্যন্তরীণ ফাংশনটি অপরিজ্ঞাত হবে।


এটি সর্বদা এর প্রসঙ্গে সংজ্ঞায়িত হয়। যা অপরিবর্তিত তা হ'ল এই .ফু। এটি একটি বিশাল পার্থক্য এবং ইসিএমএ 5 এর পূর্বে আপনার উল্লিখিত আচরণটি অর্জনের জন্য, তীর ফাংশনগুলি ব্যবহার করা যেতে পারে বা যেমন আপনি নিজেকে অভ্যন্তরীণ ফাংশনের বাইরে থাকতে এবং নিজের পরিবর্তে অভ্যন্তরের অভ্যন্তরীণ ব্যবহারের জন্য নির্দিষ্ট করেছেন, ততোধিক পরিষ্কার উপায় হ'ল তীর ফাংশন ।
দেজ্জাজম

2

ইসিএমএ 5 এর রেফারেন্সটি স্পষ্ট করা দরকার।

আমি ধরে নিলাম এর ECMA-262 সংস্করণটির অর্থ 5. এটি উল্লেখ্য হওয়া উচিত যে ইসিএমএ-262 (ওরফে ইসসিএমএসক্রিপ্ট বা কম, জাভাস্ক্রিপ্ট) একটি সাধারণ স্ক্রিপ্টিং ভাষা যা ইন্টারনেট ব্রাউজারগুলিতে প্রয়োগ করা হয়েছে । সংস্করণ 5.1 স্ট্যান্ডার্ড থেকে:

নিম্নলিখিত পদক্ষেপগুলি সম্পাদন করা হয় যখন কন্ট্রোল ফাংশন অবজেক্ট এফ তে থাকা ফাংশন কোডের জন্য সম্পাদনা প্রসঙ্গে প্রবেশ করে, একজন কলার এইআরজি সরবরাহ করেছেন এবং কলার সরবরাহকারী আর্গুমেন্ট তালিকা:

  1. যদি ফাংশন কোডটি কঠোর কোড হয় তবে এটিটিকে এইআরজিতে সেট করুন।
  2. অন্যথায় যদি এইআর্গটি নাল বা অপরিজ্ঞাত হয় তবে এটি বিশ্বব্যাপী অবজেক্টে এই বাইন্ডিংটি সেট করুন।
  3. অন্যথায় যদি প্রকার (thisArg) অবজেক্ট না হয় তবে এই বাইন্ডিংটিকে টোঅবজেক্ট (thisArg) এ সেট করুন।
  4. অন্যটি এইআরসকে এই বাঁধাই সেট করে
  5. ... ("এটি" সম্পর্কে নয়)

"গ্লোবাল অবজেক্ট" শব্দটি স্কোপ চেইনের শীর্ষে থাকা যেকোন বস্তুকে বোঝায়। ব্রাউজারগুলির জন্য এটি "উইন্ডো" অবজেক্ট হবে তবে এটি একটি বাস্তবায়ন পছন্দ (উইন্ডোজ স্ক্রিপ্ট হোস্টের একটি অদৃশ্য বৈশ্বিক অবজেক্ট রয়েছে তবে কোনও কঠোর মোড নেই তাই অযোগ্য উল্লেখগুলি এর বৈশিষ্ট্যগুলিতে অ্যাক্সেস করে এবং কোনও বিশ্বব্যাপী "স্ব" নেই)। এছাড়াও, "কঠোর মোড" অবশ্যই স্পষ্টভাবে সক্ষম করতে হবে অন্যথায় এটি সক্রিয় নয় (স্ট্যান্ডার্ডের 14.1 ধারা)। এর মতো, একটি অনির্ধারিত "এটি" এখনও কঠোর মোডটি সক্রিয় না করে "ইসিএমএ 5" তে গ্লোবাল অবজেক্ট (উইন্ডো) এ সমাধান করবে।

সুতরাং প্রশ্নের উত্তরটি হ'ল:

"এটি" সর্বদা ফাংশনটিকে অনুরোধ করা অবজেক্টকে বোঝায়। যদি ফাংশনটি কোনও বস্তুর দ্বারা না ডাকা হয় (যেমন কোনও পদ্ধতি কল নয়) তবে "এটি" (ফাংশনটিতে পাঠানো হিসাবে) "অপরিজ্ঞাত"। তবে, যদি কঠোর মোড ব্যবহার না করা হয় তবে একটি অপরিজ্ঞাত "এটি" বিশ্বব্যাপী অবজেক্টে সেট করা আছে (উপরের নিয়ম 2)।

"স্ব" এর কোনও বিশেষ সিনট্যাকটিক অর্থ নেই, এটি কেবল একটি সনাক্তকারী। ব্রাউজারগুলি উইন্ডো.সাইফ (বিশ্বব্যাপী উইন্ডো অবজেক্টের কেবলমাত্র একটি সম্পত্তি) = উইন্ডো সংজ্ঞায়িত করে। "স্ব" এর সাথে "উইন্ডো" UNLESS "স্ব" এর সমতুল্য হওয়ার অযোগ্য উল্লেখগুলির ফলাফলগুলির ফলে একটি ঘেরের সুযোগের মধ্যে পুনরায় সংজ্ঞায়িত করা হয়েছে (যেমন উপরে "var স্ব = এটি;" উপরে Good শুভেচ্ছা "এটি" পুনরায় সংজ্ঞায়িত করে))

সুতরাং উপরের উদাহরণটির সম্পূর্ণ ব্যাখ্যা হ'ল:

outer func:  this.foo = bar
// "this" refers to the invoking object "myObject"
outer func:  self.foo = bar
// "self" resolves to the variable in the local scope which has been set to "this" so it is also "myObject"
inner func:  this.foo = undefined
// "this" refers to the invoking object (none) and so is replaced by the global object (strict mode must be off). "window" has no foo property so its "value" is undefined.
inner func:  self.foo = bar
// self resolves to the variable in the enclosing scope which is still "myObject"

উদাহরণের একটি আকর্ষণীয় প্রকরণটি অভ্যন্তরীণ ফাংশনটির একটি রেফারেন্স ফিরিয়ে একটি ক্লোজার তৈরি করে।

var myObject = {
 foo: "bar",
 func: function() {
    var self = this;
    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);
    return function() {
        console.log("inner func:  this.foo = " + this.foo);
        console.log("inner func:  self.foo = " + self.foo);
    };
  }
};
var yourObject = {
 foo: "blat",
 func: myObject.func() // function call not function object
};
console.log("----");
yourObject.func();

আবহ

outer func:  this.foo = bar
outer func:  self.foo = bar
----
inner func:  this.foo = blat
inner func:  self.foo = bar

আপনার অবজেক্ট দ্বারা চালিত না হওয়া পর্যন্ত অভ্যন্তরীণ ফাংশনটি কীভাবে ডাকা হবে না তা নোট করুন। সুতরাং এটি.ফু এখন আপনারঅবজেক্ট.ফু তবে স্ব এখনও আবদ্ধ স্কোপটিতে পরিবর্তনশীলটির সাথে সংশোধন করে, যা অভ্যন্তরীণ ফাংশনটি প্রত্যাবর্তনের সময়, (এবং ফলস্বরূপ বন্ধে এখনও মাইওজেক্ট) ছিল। সুতরাং, অভ্যন্তরীণ ফাংশনের মধ্যে, "এটি" আভ্যন্তরীণ ফাংশনকে ডেকে আনা বস্তুকে বোঝায় যখন "স্ব" সেই বস্তুকে বোঝায় যা অভ্যন্তরীণ ফাংশনের রেফারেন্স তৈরি করতে বাহ্যিক ফাংশন বলে called

সংক্ষিপ্তসার সংক্ষিপ্তসার হিসাবে, "এটি" ভাষা মান দ্বারা সংজ্ঞায়িত করা হয়, "স্ব" সংজ্ঞায়িত হয় যিনি এটি সংজ্ঞায়িত করেন (রানটাইম প্রয়োগকারী বা শেষ প্রোগ্রামার)।


0

'উইন্ডো', 'স্ব' এবং 'এটি' কনসোল আউটপুটগুলির কয়েকটি সংযুক্তির নীচে বিশ্বব্যাপী স্কোপ (ব্রাউজার এনভায়রনমেন্ট) যেখানে এটি উল্লেখ করছে তা দেখতে সন্ধান করুন।

console.log( window ); // Window {…}
console.log( self );   // Window {…}
console.log( this );   // Window {…}

console.log( window.window ); // Window {…}
console.log( window.self );   // Window {…}
console.log( window.this );   // undefined  

console.log( self.self );     // Window {…}
console.log( self.window );   // Window {…}
console.log( self.this );     // undefined

console.log( this.this );     // undefined
console.log( this.window );   // Window {…}
console.log( this.self );     // Window {…}

console.log( window.window.window );    // Window {…}
console.log( self.self.self );          // Window {…}
console.log( window.self.window.self ); // Window {…}
console.log( self.window.self.window ); // Window {…}
console.log( this.this );               // undefined
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.