私が見たJavaScriptファイルで:
function Somefunction(){
var that = this;
...
}
これを宣言してthat
それに割り当てる目的は何this
ですか?
私が見たJavaScriptファイルで:
function Somefunction(){
var that = this;
...
}
これを宣言してthat
それに割り当てる目的は何this
ですか?
回答:
私はこの答えをイラストから始めます:
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
。
var self = this;
ます。単語that
は変数が何かが何かを意味するようthis
です。
forEach
関数は、関数の結合された第二オプション引数ISを取ります。colours.forEach(function(){/* 'this' is bound correctly --> */}, this);
したがって、実際にはで必要とされvar that = this
ないメモを追加する必要があります。forEach
クロックフォードから
慣例により、私たちはその 変数をプライベートにします。これは、オブジェクトをプライベートメソッドで使用できるようにするために使用されます。これが原因の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);
このアラート...
それはデイブと呼ばれていると思います
これは未定義と呼ばれていると考えています
that
変数が彼の例ではまったく使用されていないことです。変数を保持する変数を作成するだけthis
で、コードの残りの部分に何らかの効果があるように見えます。
これは、内部関数(他の関数の内部で定義された関数)を本来のように機能させるためのハックです。JavaScriptでは、ある関数を別の関数内で定義する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
はグローバルスコープを指します。これは苦痛です。
両方のスコープで慣例に従って使用する変数を作成することは、JavaScriptに関するこの非常に一般的な問題の解決策です(jquery関数でも役立ちます)。これが、非常に一般的なサウンド名that
が使用される理由です。これは、言語の欠点を克服するための簡単に認識できる規則です。
El Ronnocoのように、Douglas Crockfordでのヒントは、これは良いアイデアだと考えています。
this
別のスコープを参照したり、別のスコープを参照したりできる場合もあります。たとえば、DOMイベント内でコンストラクターメソッドを呼び出したい場合、この場合this
、作成されたオブジェクトではなくDOM要素を参照します。
HTML
<button id="button">Alert Name</button>
JS
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
ASSING意志上記の溶液this
にthat
、我々はできるし、内部アクセスnameプロパティをsayHi
からの方法that
このように、DOMコールの内部問題なく呼び出すことができます。
別の解決策は、空のthat
オブジェクトを割り当て、それにプロパティとメソッドを追加して、それを返すことです。しかし、このソリューションprototype
では、コンストラクターを失いました。
var Person = function(name) {
var that = {};
that.name = name;
that.sayHi = function() {
alert(that.name);
};
return that;
};
ここに例があります `
$(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();
}
});
}
});
});`
したがって、この値はターゲットとするDOM要素に応じて2つの異なる値であることがわかりますが、上のコードに「それ」を追加すると、ターゲットとする「これ」の値が変更されます。
`$(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();
}
});
}
});
});`
..... $(that).css( "background-color"、 "#ffe700"); //ここでは、「that」の値は「.our-work-group> p> a」です。varthat = this; したがって、「this」= '.our-work-single-page'にいても、「that」を使用して以前のDOM要素を操作できます。