자바 스크립트 this
간단한 함수 호출
다음 기능을 고려하십시오.
function foo() {
console.log("bar");
console.log(this);
}
foo(); // calling the function
우리는 이것을 일반 모드에서 실행하고 있습니다. 즉, 엄격 모드는 사용되지 않습니다.
브라우저에서 실행할 때의 값 this은로 기록됩니다 window. 이 때문입니다window 웹 브라우저 범위의 전역 변수 입니다.
node.js와 같은 환경에서 동일한 코드를 실행하면 this 앱의 전역 변수를 참조합니다.
이제 "use strict";함수 선언의 시작 부분에 명령문 을 추가하여 엄격 모드에서 이것을 실행하면 this더 이상 환경 중 하나에서 전역 변수를 참조하지 않습니다. 엄격 모드에서 혼동을 피하기 위해 수행됩니다. this이 경우에는 그냥 로그undefined 입니다. 그것이 정의 된 것이 아니기 때문입니다.
다음과 같은 경우에 우리는 this 있습니다.
객체에서 함수 호출
이를 수행하는 다른 방법이 있습니다. forEachand와 같은 Javascript에서 원시 메소드를 호출 한 경우, 해당 경우 변수가 해당 함수를 호출 한 것을 참조한다는 slice것을 이미 알고 있어야 합니다 (javascript에서는 거의 모든 것이 s 및 s를 포함하여 ). 예를 들어 다음 코드를 사용하십시오.thisObjectObjectArrayFunction
var myObj = {key: "Obj"};
myObj.logThis = function () {
// I am a method
console.log(this);
}
myObj.logThis(); // myObj is logged
Object에 속성이 포함 된 속성이 포함되어 있으면 속성을 Function메소드라고합니다. 이 메소드는 호출 될 때 항상 연관된 this변수로 설정됩니다 Object. 이는 엄격 및 비 엄격 모드 모두에 해당됩니다.
메소드가 다른 변수에 저장되거나 복사되는 경우 참조 this는 더 이상 새 변수에 유지되지 않습니다. 예를 들면 다음과 같습니다.
// continuing with the previous code snippet
var myVar = myObj.logThis;
myVar();
// logs either of window/global/undefined based on mode of operation
보다 일반적으로 실용적인 시나리오를 고려하십시오.
var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself
new키워드
Javascript에서 생성자 함수를 고려하십시오.
function Person (name) {
this.name = name;
this.sayHello = function () {
console.log ("Hello", this);
}
}
var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`
어떻게 작동합니까? new키워드를 사용할 때 어떤 일이 발생하는지 봅시다 .
new키워드로 함수를 호출하면 Object의 유형 이 즉시 초기화 Person됩니다.- 이 생성자는
Object생성자를로 설정했습니다 Person. 또한 typeof awal반환 Object만합니다.
- 이 새로운 것에
Object는의 프로토 타입이 할당됩니다 Person.prototype. Person이는를 Person포함하여의 모든 인스턴스 에서 프로토 타입의 모든 메소드 또는 속성을 사용할 수 있음을 의미합니다 awal.
- 함수
Person자체가 이제 호출됩니다. this새롭게 구성된 객체에 대한 참조 awal입니다.
아주 간단합니까?
공식 ECMAScript 사양에는 이러한 유형의 기능이 실제 constructor기능 이라고 명시되어 있지 않습니다. 그것들은 단지 정상적인 기능이며 new모든 기능에서 사용될 수 있습니다. 단지 우리가 그것들을 그대로 사용하는 것 뿐이므로, 그것들을 그렇게 만 부릅니다.
함수에서 함수 호출 : call 및apply
그래서 그래, 이후 function의도 있습니다Objects (그리고 실제로 Javascript의 첫 번째 클래스 변수이기 때문에) 함수조차도 함수 자체가 있습니다.
모든 기능은 세계에서 상속 Function, 그 많은 방법이 있습니다 call와 apply, 둘 다의 값을 조작하는 데 사용할 수있는 this가 호출되는 함수를.
function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);
사용하는 일반적인 예입니다 call. 기본적으로 첫 번째 매개 변수 this를 사용하고 함수 foo에 대한 참조로 설정 thisArg합니다. 전달 된 다른 모든 매개 변수는 인수로 call함수에 전달됩니다 foo.
따라서 위의 코드는 {myObj: "is cool"}, [1, 2, 3]콘솔에 로그인 합니다. 가치를 바꾸는 아주 좋은 방법this모든 함수에서 입니다.
applycall두 개의 매개 변수 만 사용한다는 점 과 거의 동일 thisArg합니다. 함수에 전달할 인수가 포함 된 배열입니다. 따라서 위의 call호출은 다음 apply과 같이 번역 될 수 있습니다 .
foo.apply(thisArg, [1,2,3])
그 주 call와 apply의 값을 대체 할 수 있습니다this 우리 번째 탄환에서 설명한 도트 메소드 호출에 의해 설정한다. 충분히 간단하다 :)
발표 .... bind !
bind의 형제 call와 apply. 또한 FunctionJavascript 의 전역 생성자에서 모든 함수에 의해 상속되는 메소드 입니다. 차이 bind및 call/ apply그 모두 인 call및 apply것 실제로 기능을 호출한다. bind반면에는 thisArg및 arguments사전 설정을 사용하여 새 함수를 반환합니다 . 이것을 더 잘 이해하기 위해 예를 들어 봅시다.
function foo (a, b) {
console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */
bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`
세 가지의 차이점을 보시겠습니까? 미묘하지만 다르게 사용됩니다. 같이 call하고 apply, bind또한 값 오버 탈 것 this도트 메소드 호출에 의해 설정합니다.
또한이 세 기능 중 어느 것도 원래 기능을 변경하지 않습니다. call그리고 apply갓 건설 기능에서 값을 반환하면서bind 준비가 갓 건설 기능 자체가, 호출 할 돌아갑니다.
추가 물건, 이것을 복사
때로는 this범위, 특히 중첩 범위에 따라 변경 되는 사실이 마음에 들지 않습니다 . 다음 예를 살펴보십시오.
var myObj = {
hello: function () {
return "world"
},
myMethod: function () {
// copy this, variable names are case-sensitive
var that = this;
// callbacks ftw \o/
foo.bar("args", function () {
// I want to call `hello` here
this.hello(); // error
// but `this` references to `foo` damn!
// oh wait we have a backup \o/
that.hello(); // "world"
});
}
};
위의 코드 this에서 중첩 범위로 값이 변경 되었음을 알지만 this원래 범위에서 값을 원했습니다 . 우리가 '복사'그래서 this에 that사용 된 대신의 복사this . 영리한가?
인덱스:
- 개최 내용
this기본적으로 됩니까?
- 객체 점 표기법을 사용하여 함수를 함수로 호출하면 어떻게됩니까?
- 우리가
new키워드를 어떻게 되나요?
- 우리는 어떻게 조작 할
this로 call와 apply?
- 사용
bind.
this중첩 된 범위 문제를 해결하기위한 복사
