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; //==>1
JavaScript에서 생성자를 직접 생성할 때 이를 사용하여 새로 생성된 객체를 가리킬 수 있습니다. 이렇게 하면 함수의 this가 전역 세계를 가리키는 것을 방지할 수 있습니다.
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의 현재 개체가 매개변수입니다.
여기에 한 가지 추가해야 할 점은 차세대 자바스크립트 표준 ES6에서는 화살표 함수이는 함수가 정의될 때 항상 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에서 전역으로 바뀌기 때문에 오류가 발생합니다. 위 코드를 다음과 같이 수정해야 합니다.
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { var _this = this; setTimeout(function() { _this.func(); }, 100); } }; o.test();
미리 외부에 저장해둔 이것을 사용하면 됩니다. 여기서 화살표 함수를 사용할 수 있습니다. 화살표 함수의 this는 항상 this이 아닌 🎜>로 정의됩니다. 따라서 위의 코드를 다음과 같이 수정합니다.
var o = { x : 1, func : function() { console.log(this.x) }, test : function() { setTimeout(() => { this.func() }, 100); } }; o.test();이번에는 o를 가리킬 것입니다. 또한 주의해야 할 점은 호출 및 적용이 가리키는 개체를 변경하지 않는다는 것입니다. 이것을 변경하십시오. 그러나 화살표 기능에서는 유효하지 않습니다.
var x = 1, o = { x : 10, test : () => this.x }; o.test(); // 1 o.test.call(o); // 依然是1이렇게 하면 다양한 상황에서 이 바인딩 개체의 차이점을 이해할 수 있습니다.
위 내용은 JavaScript 이 포인터 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!