JavaScript에 대한 자세한 소개: 이것이 정확히 무엇을 가리키는가? (사진과 텍스트)

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

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

위 그림을 "JavaScript this Decision Tree"(비엄격 모드)라고 부릅니다. 다음은 이 다이어그램이 이를 판단하는 데 어떻게 도움이 될 수 있는지 보여주는 예입니다. "

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)函数不是new进行调用，进入否决策，
//是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
point.moveTo(1,1); //this 绑定到当前对象,即point对象

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

func( ) "

JavaScript this Decision Tree"에서 함수 결정 과정은 다음과 같습니다.

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

2) func(5) 함수는 dot(.)로 호출되지 않습니다. 즉, "No" 분기로 들어갑니다. 즉, 여기서 this는 전역 변수 창을 가리킨 다음 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() 함수를 내부적으로 호출합니다. "

JavaScript에서 이 결정 트리"판단 과정은 다음과 같습니다.

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

2) moveX(1) 함수는 dot(.)로 호출되지 않습니다. 즉, "No" 분기로 들어갑니다. 즉, 여기서는 전역 변수 창을 가리키고 다음은 this를 가리킵니다. x는 실제로 window.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

Point(1,1) 함수 in var np=new Point(1,1) this in "

이 결정 트리 ""의 JavaScript 판단 과정은 다음과 같습니다.

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

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

JavaScript this Decision Tree

"의 var p= 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

p1.moveTo.apply(p2,[10,10] ) 함수는 "

JavaScript에 있습니다. "

" 트리에서 결정하는 과정은 다음과 같습니다.

우리는 적용과 호출 두 가지 방법이 매우 강력하다는 것을 알고 있습니다. 전환을 허용합니다. 이 객체에 의해 바인딩되는 함수 실행의 컨텍스트입니다. 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(10을 가리킵니다. ,10) 이전 객체 p2이므로 p2.x=10;

JavaScript 함수 실행 환경의 프로세스에 대해 IBM Developerworks 문서 라이브러리에 아주 기분 좋은 설명이 있습니다.

"JavaScript의 함수는 일반 함수로 실행될 수도 있고 객체의 메서드로 실행될 수도 있습니다. 이것이 이토록 풍부한 의미를 갖는 주된 이유입니다. 함수가 실행되면 실행이 발생합니다. 함수의 모든 작업은 이 실행 환경에서 발생합니다. 이 실행 환경을 구축할 때 JavaScript는 먼저 함수 호출 시 전달된 매개 변수를 포함하는 arguments 변수를 생성합니다. 그리고 함수를 먼저 초기화합니다. arguments 변수에 해당 값이 있으면 함수에 내부 함수가 포함되어 있으면 형식 매개변수가 arguments로 초기화됩니다. , 이러한 내부 함수는 초기화됩니다. 그렇지 않은 경우 함수에 정의된 로컬 변수를 계속 초기화합니다. 이때 이러한 변수는 undefined으로 초기화되며 함수가 완료될 때까지 해당 할당 작업이 실행되지 않습니다. 실행 환경(ExecutionContext)이 성공적으로 생성된 후에 실행됩니다. JavaScript의 변수 범위를 이해하는 것은 매우 중요합니다. 마지막으로 여기서는 이 주제에 대해 논의하지 않겠습니다. 위에서 언급한 바와 같이 함수 호출 방식, 현재 객체 등에 따라 undefined 전역 객체에 할당됩니다. 이 시점에서 함수의 실행 환경(ExecutionContext)은 성공적입니다. 생성되고 함수가 한 줄씩 실행되기 시작하며, 앞서 구축한 실행 환경(ExecutionContext)에서 필요한 변수를 읽어옵니다. "thisthis

이 문단을 이해하면 자바스크립트 함수를 이해하는 데 큰 도움이 됩니다. .

위 내용은 JavaScript에 대한 자세한 소개: 이것이 정확히 무엇을 가리키는가? (사진과 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!