[javascript] “this”변수를 쉽게 설정 하시겠습니까?

Program / 글쓴이

“this”변수를 설정하는 좋은 방법을 찾을 수 없다는 점을 제외하고는 Javascript에 대해 잘 알고 있습니다. 치다:

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

마지막 4 줄 없이이 작업을 수행 할 수 있습니까? 오히려 성가시다 … 나는 익명 함수를 바인딩하려고 시도했다. 나는 아름답고 영리하다고 생각했지만 아무 소용이 없다.

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.

분명히, 변수를 myFunction에 전달하는 것은 선택 사항입니다 …하지만 이것이이 질문의 핵심은 아닙니다.

감사.

답변

JavaScript의 모든 함수에 대해 정의 된 두 가지 메소드가 있습니다 ( call()및) apply(). 함수 구문은 다음과 같습니다.

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

이 함수들이하는 것은 그들이 호출 한 함수를 호출하여 object 매개 변수 의 값 을 this에 할당하는 것 입니다.

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

답변

나는 당신이 찾고 있다고 생각합니다 call:

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

myFunction로 this설정하여 호출 합니다 obj.

apply함수 매개 변수를 배열로 취하는 약간 다른 방법도 있습니다 .

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

답변

this나중에 완벽하게 호출 할 수 있도록 값을 함수 에 ‘저장’하려는 경우 (예 : 더 이상 해당 값에 액세스 할 수없는 경우) 다음을 수행 할 수 bind있습니다 (모든 브라우저에서 사용 가능하지는 않음).

var bound = func.bind(someThisValue);

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

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

답변

바인딩하는 방법에 대한 검색으로 this인해 여기에 결과가 게시되었습니다. ‘ECMAScript 2015’에서는 화살표 함수를 사용하여 어휘 적으로 설정할 수도 있습니다.

참조 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

대신에:

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);
}

우리는 지금 할 수 있습니다 :

function Person(){
  this.age = 0;

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

var p = new Person();

답변

this자바 스크립트 에서 키워드 설정

Javascript에는 this키워드를 편리하게 설정하기위한 3 가지 내장 방법이 있습니다. 그것들은 모두 Function.prototype객체 에 위치하여 모든 함수가 사용할 수 있습니다 (모든 함수는 프로토 타입 상속을 통해이 프로토 타입에서 상속되므로). 이러한 기능은 다음과 같습니다.

  1. Function.prototype.call():이 함수는 this첫 번째 인수로 사용할 객체를 가져옵니다 . 그런 다음 나머지 인수는 호출되는 함수의 개별 인수입니다.
  2. Function.prototype.apply():이 함수는 this첫 번째 인수로 사용할 객체를 가져옵니다 . 그런 다음 두 번째 인수는 호출되는 함수의 인수 값을 포함하는 배열입니다 (배열의 첫 번째 요소는 함수의 첫 번째 인수이고 배열의 두 번째 인수는 함수의 두 번째 인수 등입니다).
  3. Function.prototype.bind():이 함수는 값이 다른 새 함수를 반환합니다 this. this첫 번째 인수로 값으로 설정하려는 객체를 가져온 다음 새 함수 객체를 반환합니다.

호출 / 적용과 바인드의 차이점 :

  • call그리고 apply그들이 사실 비슷 즉시 함수를 호출 (소정의 값 this)
  • bind상이한 call및 apply이 기능한다는 사실에 새로운 기능을 리턴 의 결합으로 다른 this값.

예 :

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');

스 니펫 확장

답변