느낌표는 심각한 분위기를 해소하고 오늘 이야기할 주제인 "자바스크립트 객체지향 프로그래밍"으로 이어지도록 하기 위한 것입니다. 다음으로 객체지향의 몇 가지 주요 키워드인 캡슐화, 상속, 다형성에 초점을 맞춰 보겠습니다.
Encapsulation : 자바스크립트에서 객체를 생성하는 모드에서는 개인적으로 클로저가 진짜 캡슐화라고 생각하는데, 먼저 클로저에 대해 간단히 소개하고 다음 예를 살펴보겠습니다.
낯익은 것 같은데? 맞습니다. 이것은 실제로 간단한 클로저 애플리케이션입니다. 간략한 설명: 위의 myInfo 함수에 정의된 변수는 내장 함수 showInfo에서 액세스할 수 있지만(이해하기 쉽습니다), 이 내장 함수의 반환 참조를 oldFish 변수에 할당하면 이 함수는 showInfo는 myInfo 함수 본문 외부에서 호출되지만 함수 본문에 정의된 변수에도 액세스할 수 있습니다. 아, 그래!
클로저의 원칙을 요약해 보겠습니다. 함수는 호출되는 범위가 아닌 정의된 범위에서 실행됩니다. 실제로 인라인 함수를 반환하는 것은 클로저를 생성하는 가장 일반적인 방법이기도 합니다!
위의 설명이 너무 추상적이라고 생각된다면 위의 함수를 함께 재구성하여 좀 더 계층적인지 살펴보겠습니다.
코드 복사
코드는 다음과 같습니다.
위의 예는 ext yui에서 더 흔하며, 퍼블릭과 프라이빗이 한눈에 확연히 구분됩니다. 클로저를 통해 외부에서 직접 접근하고 싶지 않은 것들을 쉽게 숨길 수 있습니다. 함수 내에 정의된 변수에 접근하려면 특정 메소드를 통해서만 접근할 수 있습니다. .. 못찾고 쓰다가 너무 지쳐서 결국 다시 찾아왔습니다. ㅎㅎ...
위 예시를 JQ 스타일로 변환하면 다음 예시와 같이 작성해야 합니다. 이런 캡슐화 모드는 오픈 도어 모드에 속하며, 여기에 정의된 변수는 외부에서 접근 가능합니다. 다음 예에서는 먼저 개체를 인스턴스화한 다음 함수 외부에서 개체의 이름이나 나이 속성에 액세스하는 경우 팀 개발 구성원이 어떤 변수가 비공개인지 이해할 수 있도록 몇 가지 "숨겨진 규칙"을 설정할 수 있습니다. , 일반적으로 경고 신호를 표시하기 위해 개인 변수 및 메소드 앞에 밑줄 "_"을 인위적으로 추가합니다! 따라서 "캡슐화"를 달성합니다!
코드 복사
코드는 다음과 같습니다.
어떤 사람들은 어떤 모드가 더 좋냐고 물을 수도 있습니다. 이것을 어떻게 말합니까? 두 가지 방법 모두 장단점이 있으므로 함께 사용해보세요! 간단히 말해서, 외부 개체가 직접 접근할 수 없는 항목이 있으면 클로저를 사용하여 캡슐화하는 것이 원칙입니다. "확실히 확실히"라는 네 단어는 매우 심오하며 지속적인 연습을 통해서만 진정한 의미를 깨달을 수 있습니다!
상속: 이에 대해 언급할 때 한 가지 더 추가하고 싶습니다. 클로저 캡슐화의 단점은 서브클래스 파생에 도움이 되지 않으므로 클로저는 위험하므로 캡슐화는 주의해야 합니다! 직관을 위해 다음 예제에서 객체를 생성하는 방법은 "열린 문" 모드를 채택합니다.
JavaScript의 상속은 일반적으로 "클래스 상속", "프로토타입 상속", "메타 클래스"의 세 가지 방식으로 나뉩니다. 다음은 세 가지 상속 방법의 원리를 간략하게 소개합니다.
A. 클래스 상속: 이는 주류 프레임워크에서 일반적으로 사용되는 상속 방법입니다. 다음 예를 참조하세요.
분명히 프로토타입 상속의 핵심입니다. 프로토타입 체인과 동일한 원리이지만 차이점은 슈퍼 클래스를 직접 복제하므로 하위 클래스가 슈퍼 클래스의 모든 속성과 메서드를 상속한다는 것입니다. 특히 이러한 유형의 상속에는 생성자 생성, 객체 단어 변수만 해당 속성과 메서드를 정의한 다음 하위 클래스에서 속성과 메서드를 참조하려면 점 "."만 사용하면 됩니다.
C. 일반적으로 사용되는 일부 메서드를 더욱 다양하게 만듭니다. 메서드는 함수에 균일하게 캡슐화되고 다음 함수를 통해 이러한 메서드를 사용하는 클래스로 전달됩니다. 다양한 클래스에 필요한 메서드를 선택적으로 전달할 수도 있습니다.
코드 복사
코드는 다음과 같습니다.
다형성: 개인적으로는 상대적으로 추상적이고 말로 설명하기 어려운 부분이라 오버로딩과 덮어쓰기의 두 가지 측면에서 간략하게 설명하겠습니다.
오버로딩: 위의 예에서 agument 함수는 처음에 두 개의 매개변수를 사용하지만 후속 호출에서는 agument(Fish,Name,"sayLove")도 임의 개수의 매개변수를 사용할 수 있습니다. 인수 속성을 조작하여 함수의 사용자.
재정의: 이는 매우 간단합니다. 하위 클래스에 정의된 메서드가 슈퍼클래스에서 상속된 메서드와 동일한 이름을 갖는 경우 이 메서드를 덮어씁니다(여기에서는 슈퍼클래스의 메서드를 재정의하는 것이 아닙니다). 더 이상 번거롭지 않습니다!
마지막으로 이것과 실행 컨텍스트에 집중해 보겠습니다. 이전 캡슐화 예에서는 이것이 위치한 클래스의 인스턴스화 객체 자체를 나타내지만, 이는 HTML 속성을 통해 정의됩니다. 이벤트 처리 코드는 다음 코드를 참조하세요.
위의 예에서 버튼, 팝업 상자가 없습니다. 인스턴스 개체의 속성이 표시됩니다. 이는 해당 개체의 실행 컨텍스트가 변경되었기 때문입니다. 현재 있는 컨텍스트는 입력 HTML 태그여야 하는데 태그에 getName이 없습니다. 속성이므로 당연히 이 속성의 속성 값을 출력할 수 없습니다. 이 예에서 실행 컨텍스트는 실행 중에 결정되고 언제든지 변경될 수 있음을 쉽게 알 수 있습니다.
물론 위에서 주석 처리한 코드를 제거하고 getName 메서드를 얻기 위한 호출을 통해 이 코드의 실행 컨텍스트를 변경할 수 있습니다. Apply 메소드는 실행 컨텍스트를 변경하는 기능도 구현할 수 있지만 프로토타입 프레임워크에서 더 아름다운 구현 메소드인 바인드를 찾았습니다. 이 방법의 구현을 한번 살펴보겠습니다. 우리 조상들의 위대함에 감탄해야겠습니다...
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply (obj, 인수);
} ;
}
명확하게 이해할 수 있다면 이미 이러한 지식을 활용하여 간단한 스크립트 프레임워크를 작성할 수 있다고 믿습니다. 그리고 나는 당신이 가까운 미래에 마스터로 업그레이드할 수 있을 것이라고 믿습니다! 이해가 안 되더라도 걱정하지 마세요. 객체 지향은 본질적으로 좀 더 연습하면 괜찮을 것입니다.
지금은 이 글을 쓰겠습니다. 다음 기사에서는 javascript 디자인 패턴에 대해 논의해 보겠습니다. 계속 지켜봐 주시기 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
