'ভার যেটি = এটি;' জাভাস্ক্রিপ্ট মানে?

Question

একটি জাভাস্ক্রিপ্ট ফাইলে আমি দেখেছি:

function Somefunction(){
   var that = this; 
   ... 
}

এটি এটিকে ঘোষণা করার thatএবং নির্ধারণের উদ্দেশ্য কী this?

Comments

সম্ভাব্য ডাব্লিকেট ভার এর নিজের = এটি?

— বার্গি

তীরের ক্রিয়াকলাপগুলির জন্য "এই" এবং "যে" হ্যাকের প্রয়োজন নেই। তীর ফাংশন সহ "এটি" প্রত্যাশা অনুযায়ী কাজ করে। আরও বিশদে ES6 গভীরতার

— সতীগুরু শ্রীবাস্তব

এখানে এর ধারণাটি ব্যাখ্যা করা হয়েছে scotch.io/@alZami/unders સમજ- এ- জাভাস্ক্রিপ্ট

— আল-জামি

রহস্যজনক এই আচরণ সম্পর্কে একটি দুর্দান্ত ব্যাখ্যা এখানে

— RBT

সর্বশেষ এবং আপডেট হওয়া ব্যাখ্যাটি এখানে

— সুকৃত গুপ্ত 10'19

Answer 1

আমি একটি উত্তর দিয়ে এই উত্তরটি শুরু করতে যাচ্ছি:

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

আমার উত্তরটি মূলত jQuery দিয়ে এটি প্রদর্শিত হয়েছিল, যা কেবল খুব সামান্য ভিন্ন:

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

কারণ thisপ্রায়শই পরিবর্তন হয় যখন আপনি নতুন ফাংশন কল করে সুযোগ পরিবর্তন করেন, আপনি এটি ব্যবহার করে মূল মানটি অ্যাক্সেস করতে পারবেন না। এটিকে সামঞ্জস্য করা thatআপনাকে এখনও এর মূল মানটি অ্যাক্সেস করার অনুমতি দেয় this।

ব্যক্তিগতভাবে, আমি thatউপন্যাস হিসাবে ব্যবহার অপছন্দ করি । এটি কী উল্লেখ করছে এটি খুব কমই স্পষ্ট, বিশেষত যদি ফাংশনগুলি কয়েক লাইনের চেয়ে দীর্ঘ হয়। আমি সবসময় আরও বর্ণনামূলক ওরফে ব্যবহার করি । উপরে আমার উদাহরণ, আমি সম্ভবত ব্যবহার করতে চাই clickedEl।

Comments

আমি সাধারণত সঙ্গে যেতে var self = this;। শব্দটি thatভেরিয়েবলকে বোঝায় বলে মনে হচ্ছে তবে এটিই কিন্তু কিছু নয় this।

— ডেভিড মুরডোক

@ ডেভিড হ্যাঁ আমি ভেবেছি এটি কিছুটা বিভ্রান্তিকর। তবে ক্রোকফোর্ড যেমন বলেছেন যে এটি একটি সম্মেলন, সেই পথে নামাটাই কি বুদ্ধিমানের কাজ? আমি যদিও আপনার সাথে সম্পূর্ণরূপে একমত, আরও বেশি অর্থবোধ করে।

— এল রোনোকো

@ এল রোনোকো, তবে "তিনি ধূসর চুল এবং একটি চটকদার দাড়ি পেয়েছেন এবং তার পদ্ধতিটি এমন এক ক্ষিপ্ত বৃদ্ধের মনে আসে যা বাচ্চাদের কাছ থেকে চিৎকার করে তার লন থেকে নামতে পারে।" - blogging.compendiumblog.com/blog/software-for-humans/0/0/… ;

— ডেভিড

@ এলরননোকো: যদিও এটি কর্তৃপক্ষের কাছে আবেদন। "বিখ্যাত ব্যক্তিরা" আমাদের যা করা উচিত বলে থাকে তা যদি আমরা কেবল কখনও করি তবে আমরা বিপর্যয়ের দিকে যাচ্ছি।

— অরবিট

forEachফাংশন একটি দ্বিতীয় ঐচ্ছিক যুক্তি যা ফাংশনের অবিচল লাগে। colours.forEach(function(){/* 'this' is bound correctly --> */}, this);সুতরাং একটি নোট যুক্ত করা উচিত যা এর সাথে আসলে প্রয়োজন var that = thisহয় না । forEach

— ম্যাট ক্লার্কসন

Answer 2

ক্রকফোর্ড থেকে

কনভেনশন দ্বারা, আমরা একটি বেসরকারী যে পরিবর্তনশীল। এটি ব্যক্তিগত পদ্ধতিতে অবজেক্টটি উপলব্ধ করতে ব্যবহৃত হয়। এটি ECMAScript ভাষা নির্দিষ্টকরণের জন্য একটি ত্রুটির জন্য কাজ করে যা এটি অভ্যন্তরীণ ফাংশনগুলির জন্য এটি ভুলভাবে সেট করে দেয়।

জেএস ফিডল

function usesThis(name) {
    this.myName = name;

    function returnMe() {
        return this;        //scope is lost because of the inner function
    }

    return {
        returnMe : returnMe
    }
}

function usesThat(name) {
    var that = this;
    this.myName = name;

    function returnMe() {
        return that;            //scope is baked in with 'that' to the "class"
    }

    return {
        returnMe : returnMe
    }
}

var usesthat = new usesThat('Dave');
var usesthis = new usesThis('John');
alert("UsesThat thinks it's called " + usesthat.returnMe().myName + '\r\n' +
      "UsesThis thinks it's called " + usesthis.returnMe().myName);

এই সতর্কতাগুলি ...

ইউজস এটি মনে করে একে ডেভ বলা হয়

ব্যবহারসমূহ এটি মনে করে এটিকে অপরিজ্ঞাত বলা হয়

Comments

ধন্যবাদ, এটি যথেষ্ট পরিমাণে আমার পক্ষে যথেষ্ট

— ক্রিস

আমি এটি পড়েছি, বুঝতে পারি নি কারণ এর কোনও বিবরণ ছিল না, গুগলে অনুসন্ধান করা হয়েছে, এই পৃষ্ঠাটি খুঁজে পেয়েছি। যেখানে আমি আবার একই বাক্যটির দিকে ইঙ্গিত করছি। সুতরাং ডাউনভোট।

— আদিত্য এমপি

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

— এল রোনোকো

আমি কোন অপরাধ গ্রহণ করি না। ডাউনওয়েটিংয়ের সময় এমন কাউকে মন্তব্য করা ভাল লাগল!

— এল রোনোকো

ক্রকফোর্ডের উত্তরের সমস্যাটি হ'ল thatতার উদাহরণটি ভেরিয়েবল মোটেও ব্যবহৃত হয় না। এটি এটিকে দেখতে thisএমনভাবে দেখায় যে কেবল একটি ভেরিয়েবল হোল্ডিং তৈরি করা কোডের বাকী কিছু কাজ করে।

— r3m0t

Answer 3

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

var car = {};
car.starter = {};

car.start = function(){
    var that = this;

    // you can access car.starter inside this method with 'this'
    this.starter.active = false;

    var activateStarter = function(){
        // 'this' now points to the global scope
        // 'this.starter' is undefined, so we use 'that' instead.
        that.starter.active = true;

        // you could also use car.starter, but using 'that' gives
        // us more consistency and flexibility
    };

    activateStarter();

};

এটি বিশেষত সমস্যা যখন আপনি কোনও অবজেক্টের পদ্ধতি হিসাবে car.startউদাহরণ তৈরি করেন ( উদাহরণস্বরূপ) তারপরে সেই পদ্ধতির অভ্যন্তরে কোনও ফাংশন তৈরি করুন (যেমন activateStarter)। শীর্ষ স্তরের পদ্ধতিতে thisবস্তুটির দিকে নির্দেশ করে এটি একটি পদ্ধতি (এই ক্ষেত্রে, car) তবে অভ্যন্তরীণ কার্যক্রমে thisএখন বৈশ্বিক সুযোগকে নির্দেশ করে। এটি একটি ব্যথা।

উভয় স্কোপে কনভেনশন দ্বারা ব্যবহারের জন্য একটি ভেরিয়েবল তৈরি করা জাভাস্ক্রিপ্টের সাথে এই খুব সাধারণ সমস্যার সমাধান (যদিও এটি jquery ফাংশনেও কার্যকর)। এই কারণেই খুব সাধারণ শোনার নাম thatব্যবহৃত হয়। এটি ভাষার কোনও অভাবকে কাটিয়ে ওঠার জন্য একটি সহজেই স্বীকৃত কনভেনশন।

ডগলাস ক্রকফোর্ডে এল রোনোকোর ইঙ্গিতের মতো এটিও একটি ভাল ধারণা।

Comments

আমি মনে করি এটি গৃহীত উত্তরগুলির চেয়ে আরও কার্যকর উত্তর। কারণ এটি ক্রকফোর্ড কেন "যে" আবিষ্কার করেছে তার কারণটি স্পষ্ট করে যখন jQuery সম্পর্কে উত্তর দেয় না।

— কনস্ট্যান্টিন স্মোলিয়ানিন

এটি আসলে উত্তম উদাহরণ তাহলে গ্রহণযোগ্য উত্তর। এটি এটি "ECMAScript ভাষা নির্দিষ্টকরণে একটি ত্রুটি বলে যার ফলে এটি অভ্যন্তরীণ ফাংশনগুলির জন্য এটি ভুলভাবে সেট করার কারণ হয়ে থাকে" হিসাবে ব্যাখ্যা করে ডগলাস বলেছিলেন।

— কাকাচি

আপনি যদিও এটি ব্যাকরণ সঠিক করতে চাইবেন। আমি জানি এটি আরও টাইপোর মতো, তবে এটি জাভাস্ক্রিপ্টের সূচনাপ্রাপ্তদেরকে বিভ্রান্ত করতে পারে কারণ এই প্রশ্নটি আরও প্রাথমিকের মতো। আমার অর্থ এটি হওয়া উচিত: var car = {}; car.starter = {}; car.start = ফাংশন () {...}

— kacacii

@ কাকাচি ধন্যবাদ এখনই স্থির।

— ওয়েলন ফ্লিন 15

Answer 4

ব্যবহারের thatসত্যিই প্রয়োজনীয় যদি আপনি ব্যবহার একটি ওয়ার্কঅ্যারাউন্ড করা নয় call()বা apply():

var car = {};
car.starter = {};

car.start = function(){
    this.starter.active = false;

    var activateStarter = function(){
        // 'this' now points to our main object
        this.starter.active = true;
    };

    activateStarter.apply(this);
};

Answer 5

কখনও কখনও thisঅন্য স্কোপ এবং অন্য কিছু উল্লেখ করতে পারে, উদাহরণস্বরূপ ধরুন আপনি কোনও ডিওএম ইভেন্টের ভিতরে কনস্ট্রাক্টর পদ্ধতিটি কল করতে চান, এই ক্ষেত্রে thisDOM উপাদানটিকে তৈরি করা অবজেক্ট নয় refer

এইচটিএমএল

<button id="button">Alert Name</button>

জাতীয়

var Person = function(name) {
  this.name = name;
  var that = this;
  this.sayHi = function() {
    alert(that.name);
  };
};

var ahmad = new Person('Ahmad');
var element = document.getElementById('button');
element.addEventListener('click', ahmad.sayHi); // => Ahmad

ডেমো

ইচ্ছা অ্যাসিং উপরে সমাধান thisকরতে thatতারপর আমরা করতে পারেন এবং ভিতরে নাম সম্পত্তি এক্সেস sayHiথেকে পদ্ধতি that, এই এত করে DOM কল ভিতরে বিষয় ছাড়া বলা যায় না।

আরেকটি সমাধান হ'ল একটি ফাঁকা thatবস্তু বরাদ্দ করা এবং এতে বৈশিষ্ট্য এবং পদ্ধতি যুক্ত করা এবং তারপরে এটি ফেরত দেওয়া। কিন্তু এই সমাধানের সাহায্যে আপনি prototypeকনস্ট্রাক্টরের হারিয়েছেন ।

var Person = function(name) {
  var that = {};
  that.name = name;
  that.sayHi = function() {
    alert(that.name);
  };
  return that;
};

Answer 6

এখানে একটি উদাহরণ `

$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();

            var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                    var imgAlt = $(this).find('img').attr('alt'); //Here value of "this" is '.our-work-single-page'. 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });`

সুতরাং আপনি দেখতে পাচ্ছেন যে ডিওএম এলিমেন্টটি আপনি লক্ষ্য করে তার উপর নির্ভর করে এর মান দুটি পৃথক মান রয়েছে তবে আপনি উপরের কোডটিতে "যে" যুক্ত করার পরে আপনি "এই" এর লক্ষ্য পরিবর্তন করছেন change

`$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();
            var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                var that = this;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                   ***$(that).css("background-color", "#ffe700");*** //Here value of "that" is ".our-work-group > p > a"....
                    var imgAlt = $(this).find('img').attr('alt'); 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });`

..... $ (যে) .সিএসএস ("পটভূমির রঙ", "# ffe700"); // এখানে "যে" এর মান ".আর-কর্ম-গোষ্ঠী> পি> এ" কারণ ভের মান = এটি; সুতরাং যদিও আমরা "এই" = '। আমাদের কর্ম-একক পৃষ্ঠায়' আছি, তবুও আমরা "ডিওএমটি" ব্যবহার করতে পারি আগের ডিওএম উপাদানটি ব্যবহার করার জন্য ulate