JavaScript에서 이것은 매우 풍부한 의미를 가지고 있습니다. 전역 개체, 현재 개체 또는 모든 개체가 될 수 있으며 모두 함수가 호출되는 방식에 따라 다릅니다. 함수는 객체 메서드, 함수, 생성자, 적용 또는 호출과 같은 방법으로 호출할 수 있습니다.
객체 메소드로 호출되면 객체에 바인딩됩니다.
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의 포인터가 변경됩니다. 예를 들어 보겠습니다.
var a = {
aa : 0,
bb : 0,
fun : function(x,y){
this.aa = this.aa + x;
this.bb = this.bb + y;
}
};
var aa = 1;
var b = {
aa:0,
bb:0,
fun : function(){return this.aa;}
}
a.fun(3,2);
document.write(a.aa);//3，this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数，而不是函数执行的结果
var c = aa();
document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window
})(b.fun);그렇습니다. 이곳은 혼란스러운 곳이 될 수 있습니다.
함수는 직접 호출할 수도 있습니다. 이때 전역 개체에 바인딩됩니다.
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0그러나 이는 몇 가지 문제를 일으킬 것입니다. 즉, 함수 내부에 정의된 함수의 경우 이것은 또한 우리가 원하는 것과 정확히 반대되는 전역 세계를 가리킬 것입니다. 코드는 다음과 같습니다.
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; //==>1우리가 원하는 이동 효과가 완료되지 않았을 뿐만 아니라 전역 변수가 두 개 더 있다는 것을 알 수 있습니다. 그렇다면 어떻게 해결해야 할까요? 함수 안에 함수를 입력할 때 이것을 변수에 저장한 후, 그 변수를 사용하면 됩니다. 코드는 다음과 같습니다:
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; //==>1JavaScript에서 생성자를 직접 생성할 때 이를 사용하여 새로 생성된 개체를 가리킬 수 있습니다. 이렇게 하면 전역
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2을 가리키는 함수에서 이를 방지할 수 있습니다. 이 두 메서드는 함수 실행 컨텍스트를 전환할 수 있습니다. 즉, 이에 바인딩된 개체를 변경할 수 있습니다. 적용과 호출은 유사합니다. 차이점은 매개변수를 전달할 때 한 가지 요구사항은 배열이고 다른 요구사항은 별도로 전달된다는 것입니다. 그럼 Apply를 예로 들어보겠습니다.
<pre name="code" class="html">var name = "window";
var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
};
var other = {
name: "Tom"
};
someone.showName(); //Bob
someone.showName.apply(); //window
someone.showName.apply(other); //Tom객체의 메소드에 정상적으로 접근하면 this가 객체를 가리키는 것을 볼 수 있습니다. Apply를 사용한 후 Apply에 매개변수가 없으면 this의 현재 개체는 전역 개체입니다. Apply에 매개변수가 있으면 this의 현재 개체가 매개변수입니다.
여기에 추가할 점은 차세대 JavaScript 표준 ES6에서 arrow 함수의 this는 함수가 정의될 때가 아니라 항상 this을 가리킨다는 것입니다. 실행됩니다. 예제를 통해 이해해보자
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
}, 100);
}
};
o.test(); // TypeError : this.func is not a function위 코드는 this의 포인터가 o에서 global로 바뀌기 때문에 에러가 발생한다. 위 코드를 다음과 같이 수정해야 합니다.
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, 100);
}
};
o.test();通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();这回this就指向o了，我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test(); // 1
o.test.call(o); // 依然是1这样就可以明白各种情况下this绑定对象的区别了。
위 내용은 js에서 이 함수를 호출하는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
