>웹 프론트엔드 >JS 튜토리얼 >신설 없이 공사에 대한 자세한 설명

신설 없이 공사에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-03-15 16:04:141526검색

이번에는 뉴프리 시공에 대한 자세한 설명을 가져오겠습니다. 뉴프리 시공시 주의사항은 무엇인가요?

머리말

객체를 생성하려는 경우 새 메서드를 사용하여 객체를 생성할 수 있습니다. 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.prototypeJquery.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

이렇게 처리한 후 문제는 속성 공유 문제가 해결되었습니다. 각 개체는 고유한 속성을 가지며 자유롭게 수정할 수 있습니다. 각 개체는 서로 영향을 미치지 않지만 콘솔에 a.version 속성을 인쇄하면 새로운 문제가 발견됩니다. , Jquery .prototypeJquery.prototype.init.prototype이 서로 관련이 없기 때문에 이 속성을 읽을 수 없습니다. Jquery.prototype.init 객체이므로 읽기만 가능합니다. Jquery.prototype.init.prototype의 속성을 읽을 수 없지만 Jquery.prototype를 읽을 수 없습니다(이 예는 버전 속성을 나타냄). 해결 방법은 매우 간단합니다. <code>Jquery.prototypeJquery.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 속성이 있습니다.

🎜함수 객체의 경우 proto 속성 외에 , 프로토타입 속성도 있습니다. 함수를 🎜생성자🎜로 사용하여 인스턴스를 생성하면 해당 함수의 프로토타입 속성 값이 모든 객체 인스턴스에 프로토타입으로 할당됩니다(즉, 의 proto 속성을 설정합니다. 예) 🎜rrreee🎜 읽어본 것 같습니다. 이 기사의 경우 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜두 개의 zTree가 서로 상호 작용하는 방법🎜🎜🎜🎜🎜webpack을 사용하여 jquery 환경 구성을 작성하는 방법🎜🎜🎜

jackson이 json 문자열을 구문 분석할 때 자동으로 대문자와 소문자를 변환하는 방법

jQuery EasyUI 접이식 패널 사용

위 내용은 신설 없이 공사에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.