Javascript_js 객체 지향의 클래스와 클로저

어떤 사람들은 JavaScript도 객체 지향적이라고 말하지만 이는 프로토타입 기반입니다. 물론 이것은 단지 개념적 차이일 뿐입니다. JS가 객체 지향적이라는 점을 논하고 싶지는 않습니다. 클래스는 다른 언어의 클래스와 매우 유사하게 동작하지만 내부 구현 메커니즘은 실제로 일관성이 없습니다. JavaScript의 클래스를 다른 언어의 클래스와 맹목적으로 비교하면 때때로 마음이 혼란스러울 것입니다.

먼저 간단한 코드를 살펴보겠습니다. 일반적으로 교과서에는 다음과 같은 새 클래스를 만드는 방법이 설명되어 있습니다. (물론 더 복잡한 방법도 있지만 본질적으로 동일합니다.)

코드 복사 코드는 다음과 같습니다.

function MyClass(x) {
this.x = x ;
}
var obj = new MyClass('Hello class');
alert(obj.x);

obj에 x가 있다는 것은 의심의 여지가 없습니다. 이때 속성은 현재 값인 Hello 클래스인데, obj란 정확히 무엇일까요? MyClass는 단지 함수이므로 생성자라고 부릅니다. 다른 OO 언어에서는 생성자를 class 키워드 안에 배치해야 합니다. 즉, 클래스를 먼저 선언해야 합니다. 게다가 함수 본문에는 이게 뭔가요? 다른 OO 언어에서는 생성자가 실행되기 전에 클래스를 선언했고 클래스 내부의 일부 필드가 정의되었기 때문에 이에 대한 개념이 매우 명확합니다. 현재 개체입니다.

먼저 설명하겠습니다. JavaScript 함수에서 this 키워드는 호출되는 함수의 범위를 나타냅니다. 범위의 개념은 아래에서 설명하겠습니다. 하지만 단순히 호출 함수의 객체라고 생각하면 됩니다. MyClass 함수를 다시 보면, 그 안에 있는 것은 무엇일까요?

코드를

코드 복사 코드는 다음과 같습니다.

var obj = MyClass('Hello class')

완전히 문법적입니다. 이 코드를 브라우저에서 실행하면 디버깅 후 이것이 window 개체라는 것을 알 수 있습니다. 이는 obj와 아무 관련이 없으며, obj는 아직 정의되지 않았으며, 경고에는 결과가 없습니다. 원래 코드가 작동하는 이유는 new 키워드 때문입니다. new 키워드는 일반 함수를 생성자로 바꿉니다. 즉, MyClass는 여전히 평범한 함수이기 때문에 obj를 생성할 수 있는 것은 기본적으로 new 때문입니다. 함수 앞에 새 키워드가 있으면 JavaScript는 익명 개체를 만들고 현재 함수의 범위를 이 익명 개체로 설정합니다. 그런 다음 해당 함수 내에서 이것이 참조되면 참조되는 익명 개체입니다. 마지막으로 함수가 반환하지 않더라도 익명 개체를 반환합니다. 그러면 obj는 자연스럽게 x 속성을 갖게 됩니다.

이제 MyClass는 일종의 클래스와 비슷합니다. 그러나 이것이 뉴의 작업 전부는 아니다. Javascript는 상속을 쉽게 구현할 수도 있습니다. 프로토타입에 의존하는 것도 결국 기본 유형을 제외하고는 함수를 포함한 모든 것이 객체입니다. 더 중요한 것은 앞서 언급했듯이 JavaScript는 프로토타입 기반이므로 JavaScript에는 클래스라는 개념이 없습니다. 함수가 클래스처럼 동작하는 이유는 프로토타입에 의존하기 때문입니다. 함수를 포함한 속성. 객체를 생성하는 과정에서 이전 단락에서 언급한 new는 해당 함수의 프로토타입에 있는 속성을 객체에 하나씩 복사한 후 최종적으로 익명 객체를 반환합니다. 여기서 복사본은 새로 생성된 개체가 아니라 복사된 참조입니다. 콘텐츠를 복사하는 것은 해당 개체를 생성한 함수의 프로토타입에 대한 참조를 유지하는 것과 같습니다. 일부 교과서에서는 "모든 객체에는 프로토타입 속성이 있습니다"라고 막연하게 말하고 있는데, 이는 내부적으로 프로토타입 속성이 있지만 외부에는 표시되지 않습니다. 함수 객체에만 프로토타입 속성이 있고, 함수 객체의 프로토타입에는 기본적으로 생성자 속성이 있습니다.

다음 코드를 보세요.

코드를 복사하세요 코드는 다음과 같습니다.

function MyClass(x) {
this.x = x;
}
var proObj = new MyClass('x')
InheritClass.prototype =
MyClass; .prototype.protox = 'xxx';
function InheritClass(y) {
this.y = y
}
var obj = new InheritClass('Hello class')
MyClass .prototype.protox = '변경됨';
proObj.x = '너무 변경됨';
alert(obj.protox);


출력 결과가 변경되고 너무 변경되었습니다. 이 코드는 생성자의 프로토타입에 대한 참조가 객체 내부에 유지된다는 것을 보여줍니다. 생성자의 프로토타입에 대한 참조도 proObj에 유지된다는 점에 유의해야 합니다. 코드를 다음과 같이 변경하는 경우:

코드 복사 코드는 다음과 같습니다.

var obj = new InheritClass( 'Hello class');
proObj.protox = '내가 승자입니다';
MyClass.prototype.protox = '변경됨'
proObj.x = '변경됨' 🎜>alert(obj .protox);
alert(obj.x);

출력은 I am Winner 및 Changed Too입니다. 실제로 이러한 프로토타입은 레이어별로 참조되어 프로토타입 체인을 형성합니다. 객체의 속성을 읽을 때 먼저 자신이 정의한 속성을 찾아보세요. 속성이 없으면 내부 암시적 프로토타입 속성을 레이어별로 찾습니다. 그러나 속성을 작성할 때 해당 참조는 덮어쓰여지며 프로토타입 값에는 영향을 미치지 않습니다.
다시 클로저를 소개하자면, 우선 여기서 클로저는 이산수학에서의 관계의 전이적 클로저와 동일한 개념이 아닌 것으로 생각했는데, 잘 생각해보면 서로 같지 않은 것 같습니다. . 연관성은 없으며 단지 이름이 동일할 뿐입니다. 먼저 정의를 살펴보겠습니다.
클로저
"클로저"는 해당 변수를 바인딩하는(표현식을 "닫는") 환경과 함께 자유 변수를 가질 수 있는 표현식(일반적으로 함수)입니다. >완전히 클로저를 이해하려면 Javascript 기능의 메커니즘을 철저히 이해해야 하며 이 메커니즘은 약간 복잡하여 몇 마디 말로 명확하게 설명할 수 없습니다. 관심 있는 친구는 여기에서 Javascript 클로저에 대해 간략하게 설명할 수 있습니다. .다음 원칙. 일반적인 아이디어는 모든 함수 호출이 실행 컨텍스트(실행 컨텍스트)에서 실행된다는 것입니다. 이 컨텍스트에는 함수의 지역 변수, 매개변수 등을 포함하는 범위 개체가 있습니다. 또한 함수가 내부 함수인 경우 해당 범위에는 외부 함수의 범위가 포함됩니다. 내부 함수가 변수 이름을 만나면 내부 범위에서 시작하여 외부 범위로 계속됩니다. 따라서 내부 함수가 객체를 외부 함수에 객체로 반환하면 외부 함수의 실행이 완료되더라도 내부 함수에는 여전히 이를 가리키는 참조가 있으므로 내부 함수는 해제되지 않습니다. 따라서 외부 함수의 지역 변수는 해제되지 않습니다. 이는 폐쇄를 구성합니다.