JavaScript (1)_javascript 기술에서 이것이 정확히 무엇입니까?

1년 내내 C, C#, Java 및 기타 객체 지향 언어를 사용하는 프로그래머의 경우 거의 매일 이러한 문제를 처리합니다. 이러한 언어에서 이것의 의미는 매우 명확합니다. 즉, 현재 객체 인스턴스를 가리키므로 안심하고 사용할 수 있습니다. 하지만 동적언어인 자바스크립트에서는 이것의 작성방식은 변하지 않았지만 그 의미는 크게 다릅니다. 다음은 브라우저 Firefox14.0.1을 사용한 예입니다.

먼저 Hello World o(^▽^)o

유연한 프로그래밍 언어인 JavaScript를 처음으로 스스로 학습하기 시작한 지 1년이 넘었습니다.

1년이 넘는 기간 동안 이 언어는 나에게 높은 취업 수익을 안겨주었을 뿐만 아니라 예상치 못한 많은 놀라움을 가져다 주었고 미술을 전공하는 학생인 나에게 프로그래밍의 매력을 인식하게 해주었습니다.

오늘부터 매주 월요일 블로그를 업데이트하여 공유뿐만 아니라 격려도 하려고 합니다.

자, 오늘의 주제로 들어가겠습니다. 오늘은 자바스크립트의 특별한 객체인 this
에 대해 이야기하겠습니다.

다른 객체지향 프로그래밍 언어(예: java, C, C 등)에 노출된 친구라면 이 내용이 매우 익숙할 것입니다.

그런데 왜 자바스크립트에서 이것이 종종 우리에게 많은 문제를 야기하는 걸까요?

먼저 다른 프로그래밍 언어와의 차이점에 대해 이야기해 보겠습니다

JavaScript에서 이는 다른 프로그래밍 언어와 달리 인스턴스에 저장된 값이며 이 인스턴스를 직접 가리키는 특수 개체입니다.

그러나 별도의 포인터로서 서로 다른 상황에서 서로 다른 위치를 가리키는 것이 바로 우리가 혼동하는 이유입니다.

상황에 따라 어떤 형태로 나타나는지 살펴보겠습니다

1. 전역 범위에 있는 경우:

이것은 가장 잘 이해됩니다. 즉, 전역 범위에서 this는 window를 가리킵니다. 즉, 전역 범위에서 this와 window는 동일합니다.

console.log(this === window); //true

또한, 이때는 window와 동일하므로 전역 범위에서 선언하는 변수도 다음을 가리킵니다.

var x = 1;
console.log(this.x);//1
console.log(window.x);//1

물론 변수를 선언하는 다른 방법도 있습니다.

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1

var나 let을 사용하지 않고 변수를 선언하는 것은 global this의 속성값을 추가하거나 변경하는 것과 같습니다

아주 간단한 것 같은데, 그냥 window에 해당하는 객체 아닌가요?

물론 그게 전부라면 굳이 존재할 필요도 없을지도 모릅니다.

이때 가장 문제가 되는 부분은 범위에 따라 모양이 전혀 다르다는 점입니다

2. 함수에 있을 때:

여기에 도착할 즈음에는 이 함정이 점차 드러나기 시작했습니다

여기서는 로컬 범위가 아닌 함수에 있다고 말하는 이유는 무엇입니까? 이에 대해 이야기하려면 먼저 함수가 무엇인지 이해해야 합니다

자바스크립트에서 function은 js의 특수 객체입니다: function은 다양한 형태를 가지고 있습니다.

우리가 흔히 보는 것:

function set(){
  var x = 0;
};

이 형식에서 내부 this는 전역 범위와 동일하며 창을 직접 가리키므로 형식은 여전히 ​​창과 동일합니다.

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1

여기서는 종종 실수하기 쉽습니다. 많은 사람들은 이것이 이미 함수에 있을 때 현재 위치가 현재 로컬 범위이므로 이 함수를 가리켜야 한다고 생각합니다.

그러나 이 함수(새)를 인스턴스화하면 이 함수는 완전히 새로운 환경을 생성하고 이 인스턴스에서도 그에 따라 변경되며 해당 함수가 위치한 인스턴스를 가리킵니다.

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1

이것은 인스턴스화 후에 이 함수가 인스턴스 객체가 되고, 내부의 this가 자연스럽게 이 인스턴스 객체를 가리키기 때문입니다.
의

또한 자바스크립트를 작성할 때 일반적으로 함수를 호출하는 방법이 있는데, 이는 fn에서 필요한 경우 버튼.addEventListener('click', fn, false) 등과 같은 요소에 이벤트를 바인딩하는 것입니다. 이것이 사용된다면 이는 버튼
인 이벤트 처리 요소를 가리킵니다.

참고: 이는 키워드이므로 덮어쓸 수 없습니다.

무의식적으로 훨씬 더 잘 작성했습니다. 사실 HTML, DOM 이벤트 핸들러 등의 형식이 더 많기 때문에 다음에는 여기서 계속하지 않겠습니다. 프로토타입에서
이에 대해 이야기하겠습니다.

제가 이해한 바에 따르면 이것은 포인터이고 그에 따라 프로토타입 체인에서 더 중요한 위치를 차지하게 될 것이지만 오늘은 우리 범위에 포함되지 않으므로 지금은 너무 많이 설명하지 않겠습니다

앞으로는 기본적으로 매주 월요일마다 업데이트할 예정입니다. 또한, 제가 작성한 내용이 더 많은 분들과 공유될 수 있기를 바라며, 여러분의 생각을 더 많은 경험담으로 정리하고자 합니다!

이것이 정확히 JavaScript에 무엇인지 (1) 매주 월요일에 업데이트할 예정입니다. JavaScript 초보자로서 제가 작성한 내용이 주변 친구들과 공유될 수 있기를 바라며, 각각의 학습 경험을 교류하고 싶습니다. 다른. 감사해요!