“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
객체 에 위치하여 모든 함수가 사용할 수 있습니다 (모든 함수는 프로토 타입 상속을 통해이 프로토 타입에서 상속되므로). 이러한 기능은 다음과 같습니다.
Function.prototype.call()
:이 함수는this
첫 번째 인수로 사용할 객체를 가져옵니다 . 그런 다음 나머지 인수는 호출되는 함수의 개별 인수입니다.Function.prototype.apply()
:이 함수는this
첫 번째 인수로 사용할 객체를 가져옵니다 . 그런 다음 두 번째 인수는 호출되는 함수의 인수 값을 포함하는 배열입니다 (배열의 첫 번째 요소는 함수의 첫 번째 인수이고 배열의 두 번째 인수는 함수의 두 번째 인수 등입니다).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');