JavaScript_javascript 팁에 있는 이 키워드의 그림

JavaScript는 함수형 프로그래밍, 클로저, 프로토타입 기반 상속과 같은 고급 기능을 지원하는 스크립팅 언어입니다. JavaScript는 처음에는 시작하기 쉬운 것 같지만, 더 깊이 사용할수록 JavaScript는 실제로 마스터하기가 매우 어렵고 일부 기본 개념이 혼란스럽다는 것을 알게 될 것입니다. 그 중에서 JavaScript의 this 키워드는 상대적으로 혼란스러운 개념입니다. 다양한 시나리오에서는 이것이 다른 개체로 변환됩니다. 자바스크립트에서 this 키워드를 정확히 마스터해야만 자바스크립트 언어의 문턱에 들어갈 수 있다는 견해가 있다. 주류 객체지향 언어(예: Java, C# 등)에서 이것의 의미는 명확하고 구체적입니다. 즉, 현재 객체를 가리킵니다. 일반적으로 컴파일 타임에 바인딩됩니다. JavaScript에서 this는 런타임에 바인딩됩니다. 이것이 JavaScript의 this 키워드가 여러 의미를 갖는 근본적인 이유입니다.

런타임 시 JavaScript 바인딩의 특성으로 인해 JavaScript에서는 전역 개체, 현재 개체 또는 모든 개체가 될 수 있습니다. 이는 모두 함수 호출 방식에 따라 다릅니다. JavaScript에서 함수를 호출하는 방법에는 객체 메서드, 함수, 생성자, 적용 또는 호출 등 여러 가지가 있습니다. 말은 말만큼 좋지 않고, 표현은 그림만큼 좋지 않다는 말이 있습니다. 이것이 가리키는 JavaScript가 무엇인지 더 잘 이해하려면? 사진을 사용하여 설명하겠습니다.

저는 위의 그림을 "JavaScript this Decision Tree"(비엄격 모드)라고 부릅니다. 다음은 이 사진이 이를 판단하는 데 어떻게 도움이 되는지 예시를 사용하여 설명합니다.

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 this.x = this.x + x; 
 this.y = this.y + y; 
  } 
 };
 //决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
 //是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
 point.moveTo(1,1); //this 绑定到当前对象,即point对象

"JavaScript this Decision Tree"의 point.moveTo() 함수의 결정 과정은 다음과 같습니다.

1) new를 사용하여 point.moveTo 함수를 호출하나요? 이는 분명히 사실이 아닙니다. "No" 분기로 이동합니다. 즉, dot(.)로 호출되는 함수입니까? ;

2) point.moveTo 함수는 dot(.)을 사용하여 호출됩니다. 즉, "yes" 분기에 들어갑니다. 즉, 여기서는 point.moveTo의 이전 객체 지점을 가리킵니다.

point.moveTo 함수에서 이것이 무엇을 가리키는지 설명하는 분석 다이어그램은 다음과 같습니다.

또 다른 예를 보려면 다음 코드를 살펴보세요.

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
 //决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
 x;//x => 5

　"JavaScript this Decision Tree"에서 func() 함수가 결정을 내리는 과정은 다음과 같습니다.

1) func(5) 함수는 new를 사용하여 호출되나요? 이는 분명히 사실이 아닙니다. "No" 분기로 이동합니다. 즉, dot(.)로 호출되는 함수입니까? ;

2) func(5) 함수는 dot(.)로 호출되지 않습니다. 즉, "No" 분기에 들어갑니다. 즉, 여기서 this는 전역 변수 window를 가리키고, this.x는 실제로 window입니다. .x;

func 함수에서 이것이 무엇을 가리키는지 설명하는 분석 다이어그램은 다음과 같습니다.

함수로서의 직접 호출에 대한 복잡한 예를 살펴보겠습니다.

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 // 内部函数
 var moveX = function(x) { 
 this.x = x;//this 指向什么？window
 }; 
 // 内部函数
 var moveY = function(y) { 
 this.y = y;//this 指向什么？window
 }; 
  moveX(x); 
  moveY(y); 
 } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

point.moveTo(1,1) 함수는 실제로 moveX() 및 moveY() 함수를 내부적으로 호출합니다. moveX() 함수 내부의 this는 "JavaScript this 결정 트리"에서 결정됩니다. 과정은 이렇습니다.

1) moveX(1) 함수는 new를 사용하여 호출되나요? 이는 분명히 사실이 아닙니다. "No" 분기로 이동합니다. 즉, dot(.)로 호출되는 함수입니까? ;

2) moveX(1) 함수는 dot(.)로 호출되지 않습니다. 즉, "No" 분기에 들어갑니다. 즉, 여기서는 전역 변수 창을 가리키고, this.x는 실제로 창입니다. .x;

생성자 호출의 예를 살펴보겠습니다.

 function Point(x,y){ 
  this.x = x; // this ?
  this.y = y; // this ?
 }
 var np=new Point(1,1);
 np.x;//1
 var p=Point(2,2);
 p.x;//error, p是一个空对象undefined
 window.x;//2

"JavaScript 이 결정 트리"의 var np=new Point(1,1)에서 이를 판단하는 Point(1,1) 함수의 과정은 다음과 같습니다.

1) var np=new Point(1,1)에 대한 호출이 new를 사용하고 있습니까? 이는 분명히 "yes" 분기를 입력하는 것입니다. 즉, np를 가리킵니다.

2) 그러면 this.x=1, 즉 np.x=1;

"

JavaScript 이 결정 트리"의 var p= Point(2,2)에서 Point(2,2) 함수가 이를 결정하는 과정은 다음과 같습니다.

1) var p= Point(2,2)에 대한 호출이 new를 사용하고 있습니까? 이는 분명히 사실이 아닙니다. "No" 분기로 이동합니다. 즉, dot(.)로 호출되는 함수입니까? ;

2) Point(2,2) 함수가 dot(.)로 호출되지 않나요? 판단이 '아니오'이면 "No" 분기로 들어갑니다. 즉, 여기서 this는 전역 변수 window를 가리키고, this.x는 실제로 window.x입니다.

3) this.x=2는 window.x=2를 의미합니다.

마지막으로 call 및 Apply를 사용하여 호출되는 함수의 예를 살펴보겠습니다.

 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.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
 p2.x//10

"JavaScript this Decision Tree"의 p1.moveTo.apply(p2,[10,10]) 함수의 프로세스는 다음과 같습니다.

우리는 apply와 call이라는 두 가지 메서드가 매우 강력하다는 것을 알고 있습니다. 이 두 메서드를 사용하면 함수 실행 컨텍스트, 즉 여기에 바인딩된 개체를 전환할 수 있습니다. p1.moveTo.apply(p2,[10,10])은 실제로 p2.moveTo(10,10)입니다. 그러면 p2.moveTo(10,10)은 다음과 같이 해석될 수 있습니다:

1) p2.moveTo(10,10) 함수가 new를 사용하여 호출됩니까? 이는 분명히 사실이 아닙니다. "No" 분기로 이동합니다. 즉, dot(.)로 호출되는 함수입니까? ;

2) p2.moveTo(10,10) 함수는 dot(.)로 호출됩니다. 즉, "yes" 분기로 들어갑니다. 즉, 여기서는 p2.moveTo(의 이전 객체 p2를 가리킵니다. 10,10), 따라서 p2.x=10;

JavaScript 함수 실행 환경의 과정에 관해서는 IBM Developerworks 문서 라이브러리에 아주 좋은 설명이 있습니다.

　"JavaScript의 함수는 일반적인 함수로 실행될 수도 있고, 객체의 메소드로 실행될 수도 있습니다. 이것이 이토록 풍부한 의미를 갖는 주된 이유입니다. 함수가 실행되면 실행 환경(ExecutionContext)이 생성되고, 함수의 모든 동작은 이 실행 환경에서 발생합니다. 실행 환경을 구축할 때 JavaScript는 먼저 함수 호출 시 전달된 매개변수를 포함하는 인수 변수를 생성한 다음 먼저 범위 체인을 생성합니다. 함수의 형식 매개변수 목록에서 값은 인수 변수에 해당 값이 있으며, 형식 매개변수는 정의되지 않은 함수로 초기화됩니다. 그렇지 않은 경우, 이 함수에 정의된 지역 변수의 경우 이 변수는 현재 정의되지 않은 상태로 초기화되며 실행 환경(ExecutionContext) 이후 함수가 실행될 때까지 해당 할당 작업이 실행되지 않는다는 점에 유의해야 합니다. )이 성공적으로 생성되었습니다. 이는 JavaScript에서 변수의 역할을 이해하는 데 매우 중요합니다. 공간을 고려하여 여기서는 이 변수에 값을 할당하지 않습니다. 위에서 언급했듯이 함수 호출 메서드(지금까지)에 따라 이 전역 개체, 현재 개체 등에 할당됩니다. ExecutionContext)가 성공적으로 생성되고 함수가 한 줄씩 실행되기 시작하며 필요한 변수는 다음과 같습니다. 이전에 구성된 실행 환경(ExecutionContext) ”

에서 읽습니다.

이 문단을 이해하는 것은 자바스크립트 기능을 이해하는 데 큰 도움이 될 것입니다.

위 내용은 JavaScript의 this 키워드에 대한 자세한 소개입니다. 일반적으로 텍스트보다 그림이 모든 사람에게 이해하기 쉽습니다. 이 글이 모든 사람의 학습에 도움이 되기를 바랍니다.