> 웹 프론트엔드 > JS 튜토리얼 > Javascript 생성자 및 생성자 attribute_javascript 팁

Javascript 생성자 및 생성자 attribute_javascript 팁

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

예를 들어 Chrome에서 다음 프로그램을 디버깅하면 이를 명확하게 알 수 있습니다.

image

그러나 상황은 그리 간단하지 않습니다. 다음 코드를 다시 살펴보세요.

image
분명히 현재 obj의 생성자는 더 이상 obj를 생성한 함수가 아닙니다. 생성자를 수정합니다. 생성자가 생성한 개체에 영향을 주지 않습니다. 실제 이유는 객체의 생성자가 해당 생성자의 프로토타입 생성자이고 각 함수에 프로토타입이 있기 때문입니다. 기본적으로 이 프로토타입에는 자신을 가리키는 생성자 속성이 있습니다. 나는 Javascript의 원래 디자인이 각 객체의 생성자가 자신의 생성자를 가리키도록 하는 것이라고 생각합니다. 그러나 위와 같은 예는 이것을 파괴할 수 있습니다. 게다가 이 디자인은 실제로 완벽하지 않습니다. 큰 문제는 상속할 때 생성자의 포인터를 주의 깊게 유지해야 한다는 것입니다. 가장 간단한 상속에서는 하위 클래스 생성자의 프로토타입을 상위 클래스의 인스턴스로 설정하고 상위 클래스 인스턴스의 생성자가 상위 클래스의 생성자가 되므로 하위 클래스의 프로토타입 생성자는 하위 클래스는 상위 클래스의 생성자입니다. 이는 하위 클래스의 각 객체 생성자가 상위 클래스의 생성자가 되도록 합니다. 이는 쉽게 혼란을 야기할 수 있습니다.

마지막으로 이전 기사에서 남은 문제로 돌아가서 위에서 언급한 Extjs 공식 웹사이트에서 제공하는 Observable 상속의 예를 살펴보겠습니다.

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

Employee = Ext.extend(Ext.util.Observable, {
constructor: function(config){
this.name = config.name;
this.addEvents({
"fired" : true,
"quit" : true

// 기본 클래스의
// 생성자가 이를 추가하도록 구성된 리스너를 * this* 객체에 복사합니다.
this.listeners = config.listeners;// 생성 프로세스를 완료하려면 슈퍼클래스 생성자를 호출하세요. .
Employee .superclass.constructor.call(config)
}
})


이 예는 상위 클래스의 생성자 속성을 재정의할 수 있다는 착각을 불러일으킵니다. 하위 클래스 생성자의 동작 효과를 변경합니다. 이는 Javascript에 익숙하지 않은 사람들에게는 오해의 소지가 있습니다. Ext.extend의 ​​소스 코드를 자세히 살펴보겠습니다.


코드 복사 코드는 다음과 같습니다. 확장 : function(){
// 인라인 재정의
var io = function(o){
for(var m in o){
this[m] = o [m];
}
};
var oc = Object.prototype.constructor;

return function(sb, sp, overrides){
if(Ext.isObject( sp)){
overrides = sp;
sp = sb;
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, 인수);} / /여기 참고}
//다음은 생략합니다...}(), 주석처리한 줄에 주목해주세요. Extension이 overrides 매개변수에 생성자 속성이 있음을 감지하면, 즉 하위 클래스가 상위 클래스 프로토타입의 생성자를 덮어쓰려고 할 때 하위 클래스를 이 함수로 직접 설정합니다! 이것은 효과를 달성합니다. 그러나 나는 이 탐지가 이 if 문 블록, 즉 2개의 매개변수 버전의 확장에만 있다는 것을 즉시 발견했습니다. 따라서 다른 3개의 매개변수 버전의 확장을 사용하는 것은 유효하지 않아야 합니다. 테스트할 코드를 작성하세요:







두 가지 방법으로 작성하는데, 연산 결과 첫 번째는 정의되지 않고 두 번째는 OK입니다. 글쎄, 같은 이름을 가진 함수는 매개변수에 대한 쓰기 방법만 다를 뿐 실행 효과가 다릅니다. 이는 다소 예상치 못한 일입니다. 그리고 Extjs의 공식 문서에서는 이에 대해 아무 말도 하지 않습니다. 앞으로는 모든 사람이 매개변수 2개 버전을 사용하도록 노력해야 합니다.
마지막으로 몇 가지 표현식을 살펴보겠습니다.
image
첫 번째는 함수의 프로토타입 생성자가 자신이라는 것입니다. , 문제가 없습니다. 두 번째는 함수도 객체이고 이해하기 쉬운 Function 생성자의 객체라는 것입니다. Function 생성자의 객체는 실제로 다음과 동일합니다. 세 번째 등가물은 Function 객체의 생성자가 그 자체라는 것입니다... Function이 스스로를 어떻게 구성하는지 정말 이해가 안 가나요? 닭이 알을 낳고, 달걀이 닭을 낳는다? 더 나아가고 싶다면 Javascript 언어의 특정 구현이 포함되어야 하므로 여기서 멈추겠습니다.

아직 자바스크립트 언어 자체가 좀 복잡하네요. XMLHttpObject를 그토록 유명하게 만든 것이 아니었다면 여전히 어두운 구석에서 은밀하게 울고 있을 것입니다.

애플리케이션 개발자로서 우리는 자체 프로그램을 작성할 때 이러한 하위 수준 기능을 사용하지 않을 수 있습니다. 그러나 JS 프레임워크는 이러한 고급 기능을 많이 사용하므로 문서가 아무리 상세하더라도 마찬가지입니다. 불가능합니다. 이러한 방법의 기능과 영향에 대해 하나씩 이야기해 봅시다. 따라서 개발자는 무슨 일이 일어났는지 모르고 죽지 않도록 이러한 것들을 이해하기 위해 최선을 다해야 합니다. 위의 Ext.extend 함수는 예시입니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿