런타임 바인딩 기능으로 인해 JavaScript에서 this의 의미는 훨씬 더 풍부해졌습니다. 전역 개체, 현재 개체 또는 모든 개체가 될 수 있으며 모두 함수가 호출되는 방식에 따라 다릅니다. JavaScript에서 함수를 호출하는 방법에는 객체 메서드, 함수, 생성자, 적용 또는 호출 등 여러 가지가 있습니다. 아래에서는 다양한 호출 방법에 따라 각각의 의미를 논의합니다.
자바스크립트에서는 함수도 객체이므로 함수를 객체의 속성으로 사용할 수 있습니다. 이때 함수를 객체의 메서드라고 합니다. 이는 자연스럽게 객체에 바인딩됩니다.
|
1
2
3
4
5
6
7
8 9
10
|
var point = { var point = {
x : 0, y : 0, moveTo : function(x, y) { this.x = this.x + x;
this.y = this.y + y;
}
}; point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象 |
函数也可以直接被调用，此时 this 绑定到全局对象。在浏览器中，window 就是该全局对象。比如下面的例子：函数被调用时，this 被绑定到全局对象，接下来执行赋值语句，相当于隐式的声明了一个全局变量，这显然不是调用者希望的。
|
1
2
3
4
5
6
|
function makeNoSense(x) { this.x = x; } makeNoSense(5); x;// x 已经成为一个值为 5 的全局变量x : 0,
|
this.x = this.x + x; 🎜🎜 this.y = this.y + y ; 🎜🎜 } 🎜🎜} ; >🎜🎜 🎜🎜<code class="htmlscript plain">point.moveTo(1, 1)//이것은 현재 개체, 즉 포인트 개체에 바인딩됩니다.🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜 함수로 호출하는 🎜🎜 함수를 직접 호출할 수도 있으며, 이 경우 전역 개체에 바인딩됩니다. 브라우저에서 window는 전역 개체입니다. 예를 들어, 다음 예에서는 함수가 호출되면 this가 전역 개체에 바인딩된 다음 할당 문이 실행됩니다. 이는 암시적으로 호출자가 원하는 것이 아닌 전역 변수를 선언하는 것과 같습니다. 🎜🎜목록 3. nonsense.js🎜🎜🎜🎜🎜🎜🎜🎜🎜1🎜🎜2🎜🎜3🎜🎜4🎜🎜5🎜🎜6🎜🎜🎜🎜🎜함수 makeNoSense ( x) { 🎜🎜this.x = x 🎜🎜} 🎜🎜 🎜🎜makeNoSense(5); 🎜🎜x;// x는 값이 5인 전역 변수가 되었습니다🎜🎜🎜 🎜🎜 🎜내부 함수, 즉 다른 함수의 본문에 선언된 함수의 경우 전역 객체에 바인딩하는 방식은 또 다른 문제를 야기하게 됩니다. 앞서 언급한 점 개체를 예로 들어 이번에는 moveTo 메서드에서 x 및 y 좌표를 각각 변환하는 두 개의 함수를 정의하려고 합니다. 결과는 예상치 못한 것일 수 있습니다. 점 개체가 이동하지 않을 뿐만 아니라 전역 변수 x와 y가 두 개 더 있습니다.
|
1
2
3
4
5
6
7
8 9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var point = { <code class="htmlscript plain">var point = { x : 0, y : 0, moveTo : function(x, y) { // 内部函数
var moveX = function(x) {
this.x = x;//this 绑定到了哪里？
};
// 内部函数
var moveY = function(y) {
this.y = y;//this 绑定到了哪里？
};
moveX(x);
moveY(y);
}
}; point.moveTo(1, 1); point.x; //==>0 point.y; //==>0 x; //==>1 y; //==>1x : 0,
|
// 내부 함수🎜🎜 var moveX = function(x) { 🎜🎜 this.x = x;//이것은 어디에 바인딩됩니까? 🎜🎜 } 🎜🎜 // 내부 함수🎜🎜 var moveY = function(y) { code><code class="htmlscript plain">var moveY = function(y) { code>🎜🎜 이것 .y = y;//이것은 어디에 바인딩됩니까? 🎜🎜 } 🎜🎜 🎜🎜 moveX(x) 🎜🎜 moveY(y) code> 코드>🎜🎜 } 🎜🎜} 🎜🎜 point.moveTo(1, 1) 🎜🎜point.x; //==>0 🎜🎜 point.y; //==>0 🎜🎜x //==>1 🎜🎜 y //==>1🎜🎜🎜🎜🎜🎜
이것은 JavaScript의 설계 결함입니다. 올바른 설계 방법은 이러한 설계 결함을 피하기 위해 내부 함수의 이 객체를 바인딩해야 한다는 것입니다. 똑똑한 JavaScript 프로그래머는 변수를 생각해 냈습니다. 대체 방법은 일반적으로 변수 이름을 지정합니다.
|
1
2
3
4
5
6
7
8 9
10
11
12
13
14
15
16
17
18
19
20
|
plainvar point = { var point = {
x : 0, y : 0, moveTo : function(x, y) { var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
}; point.moveTo(1, 1); point.x; //==>1 point.y; //==>1 |
var that = this 🎜🎜 // 내부 함수🎜🎜 var moveX = function(x) { 🎜🎜 that.x = x 🎜🎜 }; 🎜🎜 // 내부 함수🎜🎜 var moveY = function(y) { 🎜🎜 that.y = y; 🎜🎜 } 🎜🎜 moveX(x) 🎜🎜 <code class="htmlscript plain">moveY(y) 🎜🎜 } 🎜 🎜} 🎜🎜point.moveTo(1, 1) 🎜🎜point.x; //==>1 🎜🎜 //==>1🎜🎜🎜🎜🎜🎜
JavaScript는 객체지향 프로그래밍을 지원합니다. 주류 객체지향 프로그래밍 언어와 달리 JavaScript는 클래스 개념이 없고 프로토타입 기반 상속을 사용합니다. 그에 따라 JavaScript의 생성자도 매우 특별합니다. new로 호출되지 않으면 일반 함수와 동일합니다. 또 다른 규칙으로 생성자는 호출자에게 올바른 방식으로 호출하도록 상기시키기 위해 대문자로 시작합니다. 올바르게 호출되면 새로 생성된 객체에 바인딩됩니다.
|
1
2
3
4
|
함수 Point(x, y){ <code class="htmlscript plain">function Point(x, y){ this.x = x;
this.y = y;
} |
让我们再一次重申，在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Point(x, y){ this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
} var p1 = new Point(0, 0); var p2 = {x: 0, y: 0}; p1.moveTo(1, 1); p1.moveTo.apply(p2, [10, 10]); this.x = x
|
함수 점(x, y){ 🎜🎜 this.x = x; 🎜🎜 this.y = 🎜🎜 this.moveTo = 함수(x, y){ 🎜 this.x = x 🎜 <code class="htmlscript plain">this.y = 🎜 } 🎜} 🎜var p1 = new Point(0, 0) 🎜var p2 = {x: 0, y: 0} 🎜p1.moveTo(1 , 1); 🎜p1.moveTo.apply(p2, [10, 10]);🎜🎜 🎜 🎜🎜🎜🎜🎜🎜🎜위의 예에서는 생성자를 사용하여 moveTo 메서드도 포함하는 개체 p1을 생성했습니다. 개체 리터럴을 사용하여 다른 개체 p2를 만들면 적용을 사용하여 p1을 이동할 수 있음을 알 수 있습니다. 이때 이것은 p2 객체에도 바인딩됩니다. 또 다른 메소드 호출에도 동일한 기능이 있지만 차이점은 마지막 매개변수가 배열로 균일하게 전달되지 않고 별도로 전달된다는 점입니다. 🎜위 내용은 이에 대한 자세한 설명은 js에서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
