이번에는 뉴프리 시공에 대한 자세한 설명을 가져오겠습니다. 뉴프리 시공시 주의사항은 무엇인가요?
머리말
객체를 생성하려는 경우 새 메서드를 사용하여 객체를 생성할 수 있습니다. jquery도 객체이므로 new jquery()를 사용하여 빌드 jquery 객체를 생성하기 위해 new jquery()
를 사용하고 $(ele)와 유사한 메서드를 직접 사용하는 것은 어떨까요? code> jquery 객체를 빌드하려면? 실제로 new는 여전히 내부적으로 빌드하는 데 사용되지만 jquery는 내부적으로 빌드합니다. 아래 코드를 참조하세요. <code>new jquery()
来构建呀为什么我们创建jquery对象不用new jquery()
而是直接使用类似$(ele)
的方式去构建出来一个jquery对象呢?其实内部还是使用了new来构建的,只是jquery内部帮我们构建了而已,请看下面代码
function Jquery(selector, context) { return new Jquery(selector, context); } Jquery.prototype = { version:'1.01' }
直接这样内部使用new来构建Jquery,很明显是有问题的,这样的话就形成了死循环。为了解决死循环的问题,请看下面代码:
function Jquery(selector, context) { return Jquery.prototype.init(selector, context); } Jquery.prototype = { version:'1.01', init: function () { this.name = "lin"; return this; } } var a = Jquery(); var b = Jquery(); console.log(a.version); //1.01 console.log(a.name); //lin a.name = "na"; console.log(b.name); //na
死循环的问题确实解决了,但是又发现了新的问题,可以看到a和b两个对象的属性是公用的,我修改a.name
属性为na,b.name
属性也跟着变为了na,其原因就是this都是指向Jquery的
为了解决这个问题,我们可以每次调用Jquery()
的时候都构建一个新的对象,改进代码如下:
function Jquery(selector, context) { return new Jquery.prototype.init(selector, context); //注意看,这里多了个new } Jquery.prototype = { version:'1.01', init: function () { this.name = "lin"; console.log(this); return this; } } var a = Jquery(); var b = Jquery(); console.log(a.version); //undefined console.log(a.name); //lin a.name = "na"; console.log(b.name); //na
这样处理之后,属性共享的问题已经解决了,每个对象都有各自的属性,可以自由修改,每个对象互不影响,但是又又又发现了新的问题,可以看到我们控制台打印a.version这个属性的时候是读取不到这个属性的,原因就在于此时Jquery.prototype
和Jquery.prototype.init.prototype
是互不相干的,我们创建的是Jquery.prototype.init
对象,所以只能读到Jquery.prototype.init.prototype
上的属性而读取不到Jquery.prototype
上的属性的(该例指version这个属性),解决办法很简单,就是把Jquery.prototype
赋值给Jquery.prototype.init.prototype
,这样就相当于把Jquery原型上的属性全部赋值到了Jquery.init
的原型上,请看下面代码:
function Jquery(selector, context) { return new Jquery.prototype.init(selector, context); } Jquery.prototype = { version:'1.01', init: function () { this.name = "lin"; return this; } } Jquery.prototype.init.prototype = Jquery.prototype; //画龙点睛之笔 var a = Jquery(); var b = Jquery(); console.log(a.version); //1.01 console.log(a.name); //lin a.name = "na"; console.log(b.name); //na
可以看到,我们控制台打印a对象的version属性,已经可以读取并且打印出来了。
至此,已经完成了Jquery的无new构建。
ps:jQuery.fn其实就是jQuery的prototype,jquery源码可以看到该条语句:jQuery.fn = jQuery.prototype = {};
$()和jquery()其实是一样的,jquery源码可以看到该条语句: window.jQuery = window.$ = jQuery;
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.getInfo = function(){ console.log(this.name + " is " + this.age + " years old"); }; //调用 var will = new Person("Will", 28); will.getInfo();//"Will is 28 years old"이렇게 내부적으로 new를 사용하여 Jquery를 빌드하면 분명히 문제가 발생합니다. 무한 루프. 무한 루프 문제를 해결하기 위해 다음 코드를 살펴보시기 바랍니다.
rrreee 무한 루프 문제는 실제로 해결되었지만, 두 개체의 속성이 새로운 문제로 발견된 것을 볼 수 있습니다. a와 b는 공통입니다. a.name
속성이 na로 변경되었고, b.name
속성도 na로 변경되었습니다. 이유는 이것이 Jquery를 가리키기 때문입니다. 이 문제를 해결하기 위해 Jquery()
시 새로운 객체가 생성될 때마다 호출하면 됩니다. 개선된 코드는 다음과 같습니다. rrreee
Jquery .prototype
과 Jquery.prototype.init.prototype
이 서로 관련이 없기 때문에 이 속성을 읽을 수 없습니다. Jquery.prototype.init 객체이므로 읽기만 가능합니다. Jquery.prototype.init.prototype
의 속성을 읽을 수 없지만 Jquery.prototype를 읽을 수 없습니다(이 예는 버전 속성을 나타냄). 해결 방법은 매우 간단합니다. <code>Jquery.prototype
을 Jquery.prototype.init.prototype
에 할당하면 됩니다. 이는 Jquery 프로토타입의 모든 속성을 Jquery.init
에 할당하는 것과 동일합니다. 코드의 프로토타입>에서 다음 코드를 살펴보십시오. rrreee 콘솔에서 다음의 버전 속성을 인쇄하는 것을 볼 수 있습니다. 읽고 인쇄할 수 있는 객체입니다.
이 시점에서 Jquery의 새로운 무료 구축이 완료되었습니다.ps: jQuery.fn은 실제로 jQuery의 프로토타입입니다. jquery 소스 코드에서 다음 문을 볼 수 있습니다. jQuery.fn = jQuery.prototype = {};
$()와 jquery()는 실제로 동일합니다. jquery 소스 코드에서 다음 문을 볼 수 있습니다. window.jQuery = window.$ = jQuery;
프로토타입 프로토타입
프로토타입이 무엇인지 이해하시나요? JavaScript에서 객체의 속성은 프로토타입
Inheritance을 통해 실현될 수 있습니다. JavaScript 객체에는 모두 "[[Prototype]]" 내부 속성이 포함되어 있습니다. 객체의 프로토타입.
"prototype"과 "proto" 두 속성은 "Person.prototype"과 "Person.proto"가 완전히 다른 경우가 있습니다.
다음은 "prototype"과 "proto"에 대한 간략한 소개입니다:
모든 객체에는 객체의 프로토타입에 해당하는 proto 속성이 있습니다.
jackson이 json 문자열을 구문 분석할 때 자동으로 대문자와 소문자를 변환하는 방법
위 내용은 신설 없이 공사에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!