JavaScript_javascript 팁에서 이 키워드를 사용하는 방법 요약

JavaScript에서 이는 반드시 객체 메서드의 컨텍스트에서만 발견되는 것은 아닙니다. 전역 함수 호출 및 기타 여러 컨텍스트에도 이 참조가 있습니다.
전역 개체, 현재 개체 또는 모든 개체가 될 수 있으며 모두 함수가 호출되는 방식에 따라 다릅니다. JavaScript에서 함수를 호출하는 방법에는 객체 메서드, 함수, 생성자, 적용 또는 호출 등 여러 가지가 있습니다.

1. 객체 메소드로 호출

자바스크립트에서는 함수도 객체이므로 함수를 객체의 속성으로 사용할 수 있습니다. 이때 함수를 객체의 메소드라고 부르게 되면 자연스럽게 객체에 바인딩됩니다.

코드 복사 코드는 다음과 같습니다.

var 포인트 = {
x : 0,
y : 0,
moveTo : 함수(x, y) {
이.x = 이.x
이.y = 이.y
}
}; point.moveTo(1, 1)//현재 객체, 즉 포인트 객체에 바인딩됩니다

2. 함수 호출

함수를 직접 호출할 수도 있으며, 이 경우 전역 개체에 바인딩됩니다. 브라우저에서 window는 전역 개체입니다. 예를 들어, 다음 예에서는 함수가 호출되면 this가 전역 개체에 바인딩된 다음 할당 문이 실행됩니다. 이는 암시적으로 호출자가 원하는 것이 아닌 전역 변수를 선언하는 것과 같습니다.

코드 복사 코드는 다음과 같습니다.

함수 makeNoSense(x) {
this.x = x; }
makeNoSense(5)
x;// x는 값이 5인 전역 변수가 되었습니다

내부 함수, 즉 다른 함수 몸체에 선언된 함수의 경우 전역 객체에 바인딩하는 방식은 또 다른 문제를 야기합니다. 앞서 언급한 점 개체를 예로 들어 이번에는 moveTo 메서드에서 x 및 y 좌표를 각각 변환하는 두 개의 함수를 정의하려고 합니다. 결과는 예상치 못한 것일 수 있습니다. 점 개체가 이동하지 않을 뿐만 아니라 전역 변수 x와 y가 두 개 더 있습니다.

코드 복사 코드는 다음과 같습니다.

var 포인트 = {

x : 0,
y : 0,
moveTo : 함수(x, y) {
// 내부함수
var moveX = 함수(x) {
This.x = x;//이것은 어디에 바인딩됩니까?
}; // 내부함수
var moveY = 함수(y) {
This.y = y;//이것은 어디에 바인딩됩니까?
};

moveX(x)
이동Y(y) }

}; point.moveTo(1, 1)
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1



이것은 JavaScript의 설계 결함입니다. 올바른 설계 방법은 내부 함수의 this가 외부 함수에 해당하는 개체에 바인딩되어야 한다는 것입니다. 이 설계 결함을 피하기 위해 똑똑한 JavaScript 프로그래머는 변수 대체를 생각해 냈습니다. . 메서드는 관례에 따라 일반적으로 변수 이름이 지정됩니다.

코드 복사

코드는 다음과 같습니다. var 포인트 = { x : 0,

y : 0,

moveTo : 함수(x, y) {
var = 이것
// 내부함수
var moveX = 함수(x) {
그.x = x
}; // 내부함수
var moveY = 함수(y) {
그게.y = y
}  
MoveX(x)
이동Y(y)
}  
}; point.moveTo(1, 1)
point.x; //==>1
point.y; //==>1

생성자로 호출

JavaScript는 객체지향 프로그래밍을 지원합니다. 주류 객체지향 프로그래밍 언어와 달리 JavaScript에는 클래스 개념이 없으며 프로토타입 기반 상속을 사용합니다. 그에 따라 JavaScript의 생성자도 매우 특별합니다. new로 호출되지 않으면 일반 함수와 동일합니다. 또 다른 규칙으로 생성자는 호출자에게 올바른 방식으로 호출하도록 상기시키기 위해 대문자로 시작합니다. 올바르게 호출되면 새로 생성된 객체에 바인딩됩니다.

코드 복사 코드는 다음과 같습니다.

함수 포인트(x, y){
이.x = x; 이.y = y
}

신청 또는 전화문의

자바스크립트에서는 함수도 객체이고, 객체에는 Apply와 Call이 함수 객체의 메소드라는 점을 다시 한 번 강조하겠습니다. 이 두 가지 방법은 함수가 실행되는 컨텍스트, 즉 이것이 바인딩되는 개체를 전환하는 데 매우 강력합니다. JavaScript의 많은 기술과 라이브러리가 이 방법을 사용합니다. 구체적인 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 포인트(x, y){
이.x = x; 이.y = y; This.moveTo = 함수(x, y){
이.x = x; 이.y = y
}
}

var p1 = 새 포인트(0, 0)
var p2 = {x: 0, y: 0}
p1.moveTo(1, 1) p1.moveTo.apply(p2, [10, 10])

위의 예에서는 생성자를 사용하여 moveTo 메소드가 있는 객체 p1을 생성합니다. 객체 리터럴을 사용하여 다른 객체 p2를 생성하고 Apply를 사용하면 p1의 메소드를 p2에 적용할 수 있음을 알 수 있습니다. , 이번에는 객체 p2에도 바인딩됩니다. 또 다른 메소드 호출에도 동일한 기능이 있지만 차이점은 마지막 매개변수가 배열로 균일하게 전달되지 않고 별도로 전달된다는 점입니다.

코드 복사

코드는 다음과 같습니다. 함수 Foo(){ //1.여기서 참조하는 생성자는 인수.callee

에서 참조하는 객체입니다. //설명은 new 연산자를 통해 실행되는 생성자입니다

if(this.constructor==arguments.callee){
Alert('객체 생성됨');
}
//2.이것은 창이고, 그 다음은 전역 호출입니다
if(this==창){
Alert('일반 통화');
}
else{//3. 그렇지 않으면 다른 객체의 메소드로 호출됩니다
Alert('this.constructor에 의해 호출됨);
}
}
Foo();//전역 함수 호출
Foo.call(new Object());//객체 객체의 멤버 메소드로 호출
new Foo();//객체 생성을 수행하기 위해 new 연산자에 의해 호출됩니다