수필:심혈을 기울여 jQuery의 구조 함수 이해
사실 제가 처음에 jQuery 원본을 봤을 때도 이런 의문이 있었습니다. 다음은 jQuery 구조 함수의 핵심 코드입니다.
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
}
init = jQuery.fn.init = function( selector, context ) {
return jQuery.makeArray( selector, this );
}
짧은 몇 줄에 불과하지만 구조 함수와 원형 체인을 이해하지 못하는 어린이신발은 이런 몇 가지 의문이 생기기 쉽다.
return new jQuery.fn.init( selector, context );가 아니라 return this 또는 생략fn와prototype는 무슨 관계인데 fnconstructor: jQuery 뭐 하는 거야init 함수에서 되돌아오는 것은 무엇입니까People = function() {
return this;//
}
그중
return this에 있든 없든 상관없다.JS에서 new 키워드로 작성된 객체는 다음과 같은 규칙을 준수합니다.return this그리고 우리는
jQuery의 구조 함수를 다시 본다.jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
},
여기에 하나의 대상이 되돌아왔기 때문에 우리는
new 키워드를 사용하지 않아도 똑같고 최종적으로 얻은 것은 모두 new jQuery.fn.init( selector, context ); 실례이다.맞아요!이것이 바로 이 이상한 구조 함수 쓰기의 목적이다. 우리가
jQuery 대상을 만들 때 new 키워드를 생략할 수 있도록 하기 위해서다.a = $(“a”);
그러나 이렇게 하는 부작용은
a이 사실jQuery의 실례가 아니라jQuery.fn.init의 실례라는 것이다.그래서 수정이 필요합니다constructor:jQuery.fn = jQuery.prototype = {
constructor: jQuery,
}
이렇게 하면 우리가
a instanceof jQuery를 사용할 때 돌아오지 않을 것이다false:a instanceof jQuery; //true
a instanceof jQuery.fn.init; //true
그럼 그 이상한
fn는 뭐하는 거야?사실fn은 prototype의 별명일 뿐이다. prototype의 이름이 너무 길어서 쓰기가 번거롭고 특수 속성이 코드를 압축할 때 압축되지 않기 때문에 그들은 완전히 등가이다.이렇게 해서 앞의 세 문제에 대해 우리는 모두 답을 얻었는데, 마지막 문제
return jQuery.makeArray( selector, this );에 대해 되돌아오는 것은 무엇입니까?makeArray의 코드를 보면 알 수 있는데, 사실 되돌아온 것은 this이다.그러니까 요약하자면, jQuery의 구조 함수는 왜 이렇게 이상하게 썼지?결국 이유는 간단하다. 대상을 만들 때
jQuery 키워드를 생략하기 위해서다.모두가 시원하게 쓸 수 있도록 정말 고심하고 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
