javascript [repost]_javascript 기술의 객체 상속

1. 자바스크립트의 적용 및 호출 기능에 대하여
prototype.js에서는 적용 및 호출 기능을 많이 사용하고 있어 주의하지 않으면 오해가 생길 수 있습니다.
공식 설명: 객체의 메소드를 적용하여 현재 객체를 다른 객체로 대체합니다.
적용과 호출의 차이점은 두 번째 매개변수입니다. 적용은 배열 또는 인수 객체입니다. 그리고 call은 쉼표로 구분된 모든 유형입니다.

적용 및 호출 방법에서 가장 혼란스러운 부분은 적용 및 호출의 특성이기도 합니다. 하지만 남용하지 않는 것이 가장 좋습니다.
호출 함수의 객체를 변경할 수 있습니다. 다음 예제와 같이 함수에 this 키워드가 사용됩니다. 이때 this는 적용 및 호출 함수의 첫 번째 매개변수를 나타냅니다.






2. 클로저 정보
Prototype.js in Class.create,bind 여기에는 JavaScript의 클로저 기능이 사용됩니다. 그러나 전반적으로 프로토타입.js는 강력한 클로저 기능을 많이 사용하지 않습니다. 클로저에 대해 알아보려면 제가 번역한 기사를 참조하세요.
3. 역겨운 메소드 2가지

(1)
var Class = {
create: function() {
return function() {
this .initialize.apply(this, 인수);
}
}
}
저는 다른 언어 스타일로 자바스크립트를 작성하는 것을 싫어합니다. 이 메서드를 사용하여 사용자 정의 클래스를 생성하는 것은 그다지 편리하지 않습니다. 코드 줄 수를 줄이면 추가 초기화 메서드를 이해하고 정의하기가 어려워질 뿐입니다.
사실 좀 무리한 이야기지만 Object의 프로토타입 객체를 수정하는 것은 좀 무리입니다.
(2) Object.prototype.extend
우선, Java에 익숙한 사람들에게는 확장이라는 이름이 모호함을 줄 수 있습니다. Object의 프로토타입을 수정하는 것은 불합리합니다. 글쓴이가 무슨 생각을 했는지는 모르겠습니다. 루프 내 개체에 대해 문제가 시작됩니다. 누군가 당신에게 무슨 일을 하고 있는지 물을 수도 있습니다. 나는 프로젝트에서 DWR과 프로토타입.js를 모두 사용했습니다. dwr이 반환한 JavaScript 객체에는 모두 특별한 처리가 필요한 추가 exetend 속성이 있습니다. 이전에 dojo와 프로토타입.js의 상속 구현을 비교한 적이 있는데, 이제 사실을 이해하게 되었습니다. 정적 유형 검사 기능이 없고 구문이 느슨한 JavaScript와 같은 언어의 경우 특정 JS 라이브러리를 선택하면 작성자의 JavaScript 작성 스타일에도 적응해야 합니다. 프로토타입.js의 작성자는 확장을 매우 잘 사용합니다. 단순한 속성 복사 기능이 아니라고 생각한다면, 프로토타입.js의 코드에 대해 자세히 읽어보는 것이 좋습니다.
4. 함수 바인딩에 대하여

클래스 라이브러리는 Function.prototype.bind와 Function.prototype.bindAsEventListener라는 두 가지 메서드를 제공합니다. 먼저 이 두 가지 방법 중 하나를 개념적으로 설명합니다.
모든 함수는 이 두 가지 메서드를 호출할 수 있습니다. 매개변수는 JavaScript 객체이거나 웹페이지의 요소 객체입니다. 반환 유형은 함수 객체입니다.
원래는 함수이고, return 함수도 함수입니다. 이 두 함수의 차이점은 무엇인가요? 구현 코드를 보면 여전히 핵심은 Applycall 함수의 코드입니다. 실제로 이는 메서드에서 호출한 개체를 변환한 것일 뿐입니다.



테스트


https://compdoc2cn.dev.java.net/에 나온 예시인데 개인적으로는 안되는군요. 바인드(bindAsEventListener)에 대해 약간 혐오감을 느끼게 됩니다. (Javascript는 이런거인데 구문은 다들 알지만 작성한 코드는 정말 다릅니다) 다음 코드를 보세요:




Test



위 코드에서 볼 수 있듯이, bind/bindAsEventListener는 단지 적용/호출 메소드를 래핑하고 해당 메소드의 호출 객체를 변경합니다. 예를 들어, obj.getName 메소드를 임의의 객체 호출로 변환하고 해당 메소드가 양식 요소에 의해 트리거되도록 할 수 있습니다. (bind와bindAsEventListener의 유일한 차이점은 반환 함수의 매개 변수입니다.)
이 두 메서드는 상속된 메서드와 유사한 개념을 달성하기 위해 개체 간 메서드를 재사용하는 데에도 사용할 수 있습니다. 다음 코드를 보면 실제로는 상당히 지루합니다.






prototype.js의 확장 프로젝트 코드를 읽어본 적도 없고, 바인드의 모범 사례도 모릅니다.. , 함께 파헤쳐 보자 바. 하지만 바인딩의 의미에서 바인딩/bindAsEventListener를 이해하면 안 되므로 더 혼란스러울 수 있습니다. 신청/호출의 본질을 이해합니다. 현재 개체를 다른 개체로 바꾸려면 개체의 메서드를 적용합니다.

5. 이벤트 등록에 대하여
<script></script><script> <BR> function Obj(){ <BR> this.value="对象！"; <BR> } <BR> var value="global 变量"; <BR> function Fun1(){ <BR> alert(this.value); <BR> } <BR> window.Fun1(); <BR> Fun1.apply(window); <BR> Fun1.apply($('myText')); <BR> Fun1.apply(new Obj()); <BR></script> <script></script><script> <BR> var CheckboxWatcher = Class.create(); <BR> CheckboxWatcher.prototype = { <BR> initialize: function(chkBox, message) { <BR> this.chkBox = $(chkBox); <BR> this.message = message; <BR> this.chkBox.onclick = this.showMessage.bindAsEventListener(this); <BR> }, <BR> showMessage: function(evt) { <BR> alert(this.message + ' (' + evt.type + ')'); <BR> } <BR> }; <BR>new CheckboxWatcher('myChk','message!!!!'); <BR>//$('myChk').onclick=function(){}; <BR></script> 테스트 <script></script><script> <BR>function Class(){ <BR> this.name="class"; <BR>} <BR>Class.prototype.getName=function(){ <BR> alert(this.name); <BR>} <BR>var obj=new Class(); <BR>//$('myChk').onclick=obj.getName; <BR>$('myChk').onclick=obj.getName.bind(obj); <BR>//$('myChk').onclick=obj.getName.bind($('myChk')); <BR></script> <script></script><script> <BR>function Class1(name){ <BR> this.name=name; <BR>} <BR>Class1.prototype.getName=function(){ <BR> alert(this.name); <BR>} <BR>function Class2(name){ <BR> this.name=name; <BR>　　this.getName=Class1.prototype.getName.bind(this); <BR>} <BR>var obj1=new Class2("yql"); <BR>obj1.getName(); <BR>var obj2=new Object(); <BR>obj2.name="zkj"; <BR>obj2.fun=Class1.prototype.getName.bind(obj2); <BR>obj2.fun(); <BR></script>위의 코드를 실행해보시면 이벤트를 이해하실 수 있습니다. 관찰과 바인딩/바인드AsEventListener의 차이점: <script></script> (1) 분명히 Event.observe에는 제한이 있고 간단한 함수만 처리할 수 있으며 함수에는 이와 같은 것이 있을 수 없습니다. <script> <BR>Event.observe(myChk, 'click', showMessage, false); <BR>//$('myChk').onclick=showMessage; <BR>//$('myChk').onclick=showMessage.bind(); <BR>$('myChk').onclick=showMessage.bind($('myChk')); <BR>function showMessage() { <BR> alert(this.value); <BR>} <BR></script> (2) AddEventListener/attachEvent는 Event.observe에서 내부적으로 사용됩니다. 트리거 이벤트(window.onload)에 여러 함수를 추가할 수 있습니다. 바인딩이 재정의되었습니다.

6. 이벤트 모니터링 모범 사례
분명히 Prototype.js에서 제공하는 이벤트 등록 방법은 그다지 완전하지 않습니다. 그렇다면 도장의 시간 등록(중국어 버전)을 살펴보세요. 저처럼 도장에 대해 관망하는 태도를 갖고 있는 사람이 많을 것 같습니다.
클로저에 대한 이전 소개를 읽으셨다면 다음 코드를 보셨을 것입니다.
다음 코드를 보기 전에 웹페이지의 모든 요소에 대해 브라우저가 객체를 생성한다는 점을 강조하고 싶습니다(참조). (제 생각에는) 이러한 개체와 여러분이 만든 JavaScript 개체의 차이점은 이벤트 리스너가 있고 마우스 및 키보드 이벤트에 응답한다는 것입니다. 다음 코드를 사용하면 이벤트 청취 코드를 자바스크립트 코드로 쉽게 변환할 수 있습니다.

function AssociateObjWithEvent(obj, methodName){
return (function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = AssociateObjWithEvent(this, " doOnClick");
el.onmouseover = AssociateObjWithEvent(this, "doMouseOver");
el.onmouseout = AssociateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype .doOnClick = function(event, element){
... // doOnClick 메소드 본문.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
... // doMouseOver 메서드 본문.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
... // doMouseOut 메서드 본문.
}

갖고 싶습니다. time 위의 아이디어를 사용하여 웹 페이지에서 플로팅 박스를 드래그하는 코드를 구현합니다(사실 이미 많이 있습니다). 계속하려면...