Laoyu는 javascript 객체지향 프로그래밍_js 객체지향에 대해 간략하게 이야기합니다.

느낌표는 심각한 분위기를 해소하고 오늘 이야기할 주제인 "자바스크립트 객체지향 프로그래밍"으로 이어지도록 하기 위한 것입니다. 다음으로 객체지향의 몇 가지 주요 키워드인 캡슐화, 상속, 다형성에 초점을 맞춰 보겠습니다.
Encapsulation : 자바스크립트에서 객체를 생성하는 모드에서는 개인적으로 클로저가 진짜 캡슐화라고 생각하는데, 먼저 클로저에 대해 간단히 소개하고 다음 예를 살펴보겠습니다.

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

🎜>

위 예제의 코딩 스타일은 ext yui에서 비교적 일반적이며 공개 및 비공개 구분이 한눈에 명확합니다. 클로저를 통해 외부에서 직접 접근하고 싶지 않은 것들을 쉽게 숨길 수 있습니다. 함수 내에 정의된 변수에 접근하려면 특정 메소드를 통해서만 접근할 수 있습니다. .. 못찾고 쓰다가 너무 지쳐서 결국 다시 찾아왔습니다. ㅎㅎ...
위 예시를 JQ 스타일로 변환하면 다음 예시와 같이 작성해야 합니다. 이런 캡슐화 모드는 오픈 도어 모드에 속하며, 여기에 정의된 변수는 외부에서 접근 가능합니다. 다음 예에서는 먼저 개체를 인스턴스화한 다음 함수 외부에서 개체의 이름이나 나이 속성에 액세스하는 경우 팀 개발 구성원이 어떤 변수가 비공개인지 이해할 수 있도록 몇 가지 "숨겨진 규칙"을 설정할 수 있습니다. , 일반적으로 경고 신호를 표시하기 위해 개인 변수 및 메소드 앞에 밑줄 "_"을 인위적으로 추가합니다! 따라서 "캡슐화"를 달성합니다!

코드 복사 코드는 다음과 같습니다.
어떤 사람들은 어떤 모드가 더 좋냐고 물을 수도 있습니다. 이것을 어떻게 말합니까? 두 가지 방법 모두 장단점이 있으므로 함께 사용해보세요! 간단히 말해서, 외부 개체가 직접 접근할 수 없는 항목이 있으면 클로저를 사용하여 캡슐화하는 것이 원칙입니다. "확실히 확실히"라는 네 단어는 매우 심오하며 지속적인 연습을 통해서만 진정한 의미를 깨달을 수 있습니다!
상속: 이에 대해 언급할 때 한 가지 더 추가하고 싶습니다. 클로저 캡슐화의 단점은 서브클래스 파생에 도움이 되지 않으므로 클로저는 위험하므로 캡슐화는 주의해야 합니다! 직관을 위해 다음 예제에서 객체를 생성하는 방법은 "열린 문" 모드를 채택합니다.
JavaScript의 상속은 일반적으로 "클래스 상속", "프로토타입 상속", "메타 클래스"의 세 가지 방식으로 나뉩니다. 다음은 세 가지 상속 방법의 원리를 간략하게 소개합니다.
A. 클래스 상속: 이는 주류 프레임워크에서 일반적으로 사용되는 상속 방법입니다. 다음 예를 참조하세요.

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

위 서브클래스 Fish에는 getName 메소드가 정의되어 있지 않지만 Fish 서브클래스의 인스턴스 객체 ioldFish는 이 메소드를 계속 호출합니다. 이는 하위 클래스 Fish가 상위 클래스 Name에 정의된 getName 메소드를 상속하기 때문입니다. 설명하자면, 여기서 Fish 서브클래스의 프로토타입은 슈퍼 클래스의 인스턴스를 가리키고 있지만, 서브클래스 Fish에서는 getName 메소드가 선언되지 않았지만 프로토타입 체인 원리에 따라 프로토타입이 가리키는 상위 객체를 검색하게 됩니다. 그러한 메소드가 있는지 확인하기 위해 메소드가 발견되지 않으면 원래 프로토타입 객체가 검색됩니다. 이것이 바로 상속의 원리입니다. 여기에 Fish.prototype.constructor = Fish;라는 특별한 설명이 있습니다. 기본 하위 클래스의 프로토타입은 자신을 가리켜야 하지만 프로토타입은 이전에 슈퍼 클래스의 인스턴스 객체를 가리켰으므로 여기에서 다시 설정해야 하기 때문입니다. . 물론, Disguise Extension 기능을 통해 관련 코드를 정리할 수 있습니다. 여기서는 자세히 설명하지 않겠습니다. 다음 블로그 게시물을 참고하세요...

B. 메모리 성능 측면에서는 클래스보다 낫습니다. .

코드 복사 코드는 다음과 같습니다. >
분명히 프로토타입 상속의 핵심은 프로토타입 체인의 원리이기도 한 복제 기능입니다. 차이점은 슈퍼 클래스를 직접 복제한다는 점입니다. 이 경우 하위 클래스는 슈퍼 클래스의 모든 속성과 메소드를 상속받습니다. 특히, 이러한 유형의 상속은 생성자를 만들 필요가 없으며 객체 단어 변수를 만들고 해당 속성과 메서드를 정의한 다음 하위 클래스에서 참조하기만 하면 됩니다. 점 "." 기호를 통한 속성 및 메서드
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 디자인 패턴에 대해 논의해 보겠습니다. 계속 지켜봐 주시기 바랍니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.