> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 연구 노트 9 프로토타입 캡슐화 상속_기본 지식

자바스크립트 연구 노트 9 프로토타입 캡슐화 상속_기본 지식

WBOY
풀어 주다: 2016-05-16 18:36:41
원래의
868명이 탐색했습니다.

자, 단계별로 빌드해 보겠습니다. 먼저 원래 작성 방법을 살펴보겠습니다.


<script> <br>var Person = function(name, age) { <br>this.name = name; >} <br>Person.prototype.SayHello = function () { <br>alert(this.name "," this.age) <br>} <br>var Programmer = 함수(이름, 나이, 급여) { <br> Person.call(this, 이름, 나이); <br>this.salary = 급여; <br>} <br>Programmer.prototype = new Person() <br>var pro = new Programmer( "kym", 21, 500); <br>pro.SayHello(); <br></script>


실제로 이 단계에 있음을 알 수 있습니다. .prototype=newPerson(). 즉, 프로토타입 체인에 Person을 추가합니다. 이 점은 Javascript Study Note 7 - 프로토타입 체인의 원리에서 자세히 설명되었습니다.
즉, 구현의 핵심은 프로토타입 체인 생성에 있습니다.
위에서는 JSON을 사용하여 프로토타입을 생성했으며 해당 프로토타입 체인은 p.__proto__=Person입니다. 그런 다음 이에 대한 상속을 캡슐화하기를 희망하며 프로토타입 체인은 p.__proto__.__proto__=SuperClass여야 하며 이는 Person.__proto__=SuperClass를 의미합니다. 그러나 위 코드의 상속 방법에 따르면 프로토타입 체인 관계는 Person.__proto__=SuperClass.prototype입니다.
위에서 했던 것과 동일합니다. 보조 함수를 사용하여 원래 함수의 속성을 Encapsulation에 할당하는 것입니다.
자, 이 아이디어에 따라 프로토타입 체인의 상속 관계를 사용하여 캡슐화를 구현해 보겠습니다.


<script> = { <div class="codebody" id="code57425">생성: 함수(className, params) { <br>var temp = function() { <br>className.Create.apply(this, params) <br>temp.prototype = className; <br>var result = new temp(); <br>return result; <br>}, <br>CreateBaseClass: function(baseClass, subClass) { <br>var temp = function() { <br> (subClass의 var 멤버) { <br>this[member] = subClass[member]; <br>temp.prototype = <br>return new temp(); } <br>}; <br>var People = { <br>생성: 함수(이름, 나이) { <br>this.name = 이름 <br>this.age = <br>}, <br>SayHello: function () { <br>alert("안녕하세요, 제 이름은 " this.name "입니다. 저는 " this.age입니다) <br>} <br>} <br>var Temp = { <br>생성: 함수(이름, 나이, 급여) { <br>People.Create.call(this, 이름, 나이) <br>this.salary = 급여 <br>}, <br>소개: 함수() { <br>alert(this.name "$" this.age "$" this.salary) <br>} <br>} <br>var Programmer = Factory.CreateBaseClass(People, Temp) <br> var pro = Factory.Create(Programmer, ["kym", 21, 500]) <br>pro.SayHello() <br></script>


이로 상속이 완료됩니다. 관계의 캡슐화. 물론 별도의 변수를 작성할 필요는 없습니다.




코드를 복사하세요


코드는 다음과 같습니다
var Programmer = Factory.CreateBaseClass(People, { Create: 함수(이름, 나이, 급여) { People.Create.call(this, 이름, 나이); this.salary = 급여 ;
},
소개: function () {
alert(this.name "$" this.age "$" this.salary)
}
});


물론 개인 취향에 따라 다르지만 개인적으로 첫 번째 방법이 더 명확하다고 생각하지만 두 번째 방법이 더 우아합니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿