“This” değişkeni kolayca ayarlanabiliyor mu?

Ben "bu" değişkeni ayarlamak için güzel bir yol anlayamıyorum dışında, Javascript oldukça iyi bir anlayış var. Düşünmek:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body; //using body as example object
someObj.foo_variable = "hi"; //set foo_variable so it alerts

var old_fn = someObj.fn;   //store old value
someObj.fn = myFunction;   //bind to someObj so "this" keyword works
someObj.fn();              
someObj.fn = old_fn;       //restore old value

Son 4 satır olmadan bunu yapmanın bir yolu var mı? Oldukça sinir bozucu ... Güzel ve zeki olduğunu düşündüğüm anonim bir işlevi bağlamayı denedim, ancak boşuna:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body;        //using body as example object
someObj.foo_variable = "hi";        //set foo_variable so it alerts
someObj.(function(){ fn(); })();    //fail.

Açıkçası, değişkeni myFunction'a geçirmek bir seçenektir ... ama bu sorunun amacı bu değildir.

Teşekkürler.

JavaScript call(), ve içindeki tüm işlevler için iki yöntem tanımlanmıştır apply(). İşlev sözdizimi şuna benzer:

call( /* object */, /* arguments... */ );
apply(/* object */, /* arguments[] */);

Ne bu işlevler yapmak değerini atayarak, onlar üzerinde çağrılan edildi işlevini çağırmak olduğunu nesne için parametre bu .

var myFunction = function(){
    alert(this.foo_variable);
}
myFunction.call( document.body );

Ben aradığınız düşünüyorum call:

myFunction.call(obj, arg1, arg2, ...);

Bu, myFunctionile thisayarlanmış olarak çağırır obj.

applyİşlev parametrelerini bir dizi olarak alan biraz farklı bir yöntem de vardır :

myFunction.apply(obj, [arg1, arg2, ...]);

Daha thissonra sorunsuz olarak çağırabilmeniz için (örneğin, bu değere artık erişemediğinizde) değeri bir işleve 'depolamak' istiyorsanız, bunu yapabilirsiniz bind(ancak tüm tarayıcılarda mevcut değildir):

var bound = func.bind(someThisValue);

// ... later on, where someThisValue is not available anymore

bound(); // will call with someThisValue as 'this'

Nasıl bağlanacağım konusundaki araştırmam thisbeni buraya getirdi, böylece bulgularımı gönderiyorum: 'ECMAScript 2015' de ok işlevlerini kullanarak bu sözcükleri sözlü olarak ayarlayabiliriz.

Bkz. Https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Onun yerine:

function Person() {
  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    this.age++;
  }.bind(this), 1000);
}

Şimdi yapabiliriz:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

thisJavascript'te anahtar kelimeyi ayarlama .

Javascript, thisanahtar kelimeyi uygun şekilde ayarlamak için 3 yerleşik yöntem içerir . Hepsi Function.prototypenesnenin üzerinde bulunurlar, böylece her işlev bunları kullanabilir (çünkü her işlev prototip miras yoluyla bu prototipten miras alır). Bu işlevler şunlardır:

1. Function.prototype.call(): Bu işlev, thisilk bağımsız değişken olarak kullanmak istediğiniz nesneyi alır . Daha sonra argümanların geri kalanı, çağrılan işlevin ilgili argümanlarıdır.
2. Function.prototype.apply(): Bu işlev, thisilk bağımsız değişken olarak kullanmak istediğiniz nesneyi alır . Daha sonra ikinci argüman, çağrılan işlevin bağımsız değişkenlerinin değerlerini içeren bir dizidir (dizinin ilk öğesi işlevin ilk bağımsız değişkeni, dizinin ikinci bağımsız değişkeni işlevin ikinci bağımsız değişkeni vb.).
3. Function.prototype.bind(): Bu işlev, değeri farklı olan yeni bir işlev döndürür this. thisİlk bağımsız değişken olarak değer olarak ayarlamak istediğiniz nesneyi alır ve sonra yeni bir işlev nesnesi döndürür.

Çağrı / uygulama ve bağlama arasındaki fark:

• callve işlevi hemen çağırmalarıapply gerçeğine benzer (önceden tanımlanmış bir değerle )this
• bindfarklıdır callve applybu işlev aslında yeni bir fonksiyon döner bağlanması farklı bir ile thisdeğer.

Örnekler:

const thisObj = {
  prop1: 1,
  prop2: 2,
};

function myFunc(arg1, arg2) {
  console.log(this.prop1, this.prop2);
  console.log(arg1, arg2);
}

// first arg this obj, other arguments are the  
// respective arguments of the function
myFunc.call(thisObj, 'Call_arg1', 'Call_arg2');

// first arg this obj, other argument is an array which  
// are the respective arguments of the function
myFunc.apply(thisObj, ['Apply_arg1', 'Apply_arg2']);


// the bind method returns a new function with a different
// this context which is stored in the newMyFunc variable
const newMyFunc = myFunc.bind(thisObj);

// now we can call the function like a normal function 
newMyFunc('first', 'second');