无new构建详解

这次给大家带来无new构建详解，使用无new构建的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

当我们想要创建一个对象，我们可能使用new方法去构建一个对象，那按道理jquery也是一个对象，应该也是用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;

原型 prototype

认识一下什么是原型？

在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个" [[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。

对于"prototype"和"proto"这两个属性有的时候可能会弄混，"Person.prototype"和"Person.proto"是完全不同的。

在这里对"prototype"和"proto"进行简单的介绍：

对于所有的对象，都有proto属性，这个属性对应该对象的原型

对于函数对象，除了proto属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的proto属性）

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"

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

两个zTree怎样互相联动

怎样用webpack写jquery的环境配置

jackson解析json串时大小写自动转换的方法

jQuery EasyUI 折叠面板的使用

Atas ialah kandungan terperinci 无new构建详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!