jQuery 소스코드를 통해 자바스크립트 배우기(2)_jquery

영리한 1: 함수

함수는 JavaScript 코드에서 보기 드문 재능입니다.
♥ 코드 세그먼트를 배치하고 상대적으로 독립적인 기능을 캡슐화할 수 있습니다.
♥ 클래스를 구현하고 OOP 아이디어를 주입할 수도 있습니다.
jQuery는 함수입니다. 클래스라고 생각할 수도 있습니다(하하, 그 자체가 클래스입니다).

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

(function(){
var jQuery = function() {
// 함수 본문
}
window.jQuery = window.$ = jQuery
})()
console.log(jQuery) ;

위의 빈 함수는 소위 생성자입니다. 생성자는 객체지향 언어에서 클래스의 기본 메서드입니다.

Clever 2: Extended Prototype

프로토타입 객체란 무엇인가요? http://www.jb51.net/article/32857.htm에 대해 읽어보실 수 있는 블로그 포스팅을 전해드리겠습니다.

JavaScript는 프로토타입 속성을 모든 함수에 바인딩하며 이 속성은 프로토타입 객체를 가리킵니다. 프로토타입 객체에서 클래스의 상속된 속성과 메서드를 정의합니다.

프로토타입 객체는 JavaScript가 상속을 구현하는 기본 메커니즘입니다.

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

(function(){
var jQuery = function () {
// 함수 본문
}
jQuery.fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery
})(); >
(new jQuery()).test();

영리한 방법 3: 팩토리 메소드를 사용하여 인스턴스 생성

위 메소드는 다음을 사용하여 호출해야 합니다. 방법을 사용하므로 많은 객체가 생성되어 메모리 소비가 낭비됩니다.

(new jQuery()).test();
jQuery 소스 코드는 호출 시 친숙한 팩토리 메서드인 매우 부드러운 메서드를 사용합니다.

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

(function(){
var jQuery = function () {
// 함수 본문
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8.3",
init: function() {
return this;
},
test: function() {
console.log('test') ;
}
}
window.jQuery = window.$ = jQuery
})()
jQuery().test();

상상 1: jQuery 함수 본문이 객체를 직접 반환하도록 하세요. 저는 이것을 사용합니다

코드 복사

코드는 다음과 같습니다. (function(){ var jQuery = function() {

return this;

}
jQuery.fn = jQuery.prototype = {
//확장 프로토타입 객체
jquery: "1.8.3",
test: function() {
console.log('test')
}
}
window.jQuery = window.$ = jQuery
})()
console.log(jQuery())



출력결과

여기가 Window 개체를 가리키는 것으로 나타났습니다.

상상 2: jQuery 함수 본문이 클래스의 인스턴스를 직접 반환하도록 하세요.

코드 복사

코드는 다음과 같습니다. (function(){ var jQuery = function() {

return new jQuery();

}
jQuery.fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8. 3",
테스트: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
}) ();
console.log(jQuery())


결과 출력

위 내용은 재귀적 무한 루프이며 메모리 오버플로가 발생한 것을 확인했습니다.

영리함 4: 범위 분리

생각 1: init() 메서드가 반환하는 이 범위는 무엇인가요?


코드 복사

코드는 다음과 같습니다.

(function(){
var jQuery = function() {
// 함수 본문
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0'
return this ;
}
}
window.jQuery = window.$ = jQuery
})()
console.log(jQuery().jquery); (jQuery().init_jquery);

출력 결과


init() 메서드의 이 범위: this 키워드는 init() 함수를 참조합니다. 스코프가 위치한 객체는 상위 객체인 jQuery.fn 객체의 기능에도 접근할 수 있습니다. ——이런 생각은 범위의 독립성을 파괴하고 jQuery 프레임워크에 부정적인 영향을 미칠 가능성이 높습니다.

생각 2: init()에서 이것을 jQuery.fn 객체와 분리하는 방법은 무엇입니까? ——init 초기화 유형을 인스턴스화합니다.

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

(function(){
var jQuery = function () {
// 함수 본문
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0';
return this;
}
}
window. jQuery = window .$ = jQuery;
})();
console.log(jQuery().jquery)
console.log(jQuery().init_jquery);
출력 결과

는 init() 유형을 인스턴스화하고 이를 init() 메서드에서 제한하며 init() 함수 내에서만 활성화되고 외부로 나가는 것을 방지하여 초기화됩니다. 범위.

Ingenious 5: 프로토타입 통과

생각 1: Ingenious 4에서는 init()에서 이것을 jquery.fn 객체와 분리합니다. 그렇다면 "Smart 4"를 보장하고 jQuery 프로토타입 개체에 계속 액세스할 수 있는 방법은 무엇일까요? ——시제품 전송.
jQuery의 프로토타입 객체가 init() 생성자의 프로토타입 객체를 재정의하도록 합니다.

코드 복사 코드는 다음과 같습니다. jQuery.fn.init.prototype = jQuery .fn;

모든 코드:

코드 복사 코드는 다음과 같습니다. (function(){

var jQuery = function() {

// 함수 본문
return new jQuery.fn.init();
}
jQuery. fn = jQuery.prototype = {
// 확장 프로토타입 객체
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0'>return this;
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery
})(); .log(jQuery() .jquery);
console.log(jQuery().init_jquery)


출력 결과

Miaoqi

init() 객체의 프로토타입 포인터가 jQuery.fn을 가리키도록 합니다. ——이런 방식으로 init()의 this는 jQuery.fn 프로토타입 객체에서 정의한 메서드와 속성을 상속합니다.

요약

메시지를 보내주신 블로거님들, 특히 좋은 책을 소개해주신 푸니님께 감사드립니다. 좀 더 추가해 주시면 좋을 것 같습니다.