jQuery原理（附带部分new的原理）

文章 jQuery诞生记-原理与机制 读后感

要点总结：

  1. 只要new表达式之后的constructor返回（return）一个引用对象（数组，对象，函数等），都将覆盖new创建的匿名对象（我的理解：this还是那个this，但new以后的返回却不是那个this）;
  2. 如果返回（return）一个原始类型（无return时其实为return原始类型undefined），那么就返回new创建的匿名对象（我的理解：返回的是this）。

关于第1种情况的代码示例：

var o = new function() {return "圆心"};
alert(o); //将返回显示“[object object] ”

关于第2种情况的代码示例：

var o = new function() {return new String("圆心")};
alert(o); //返回的是“圆心”

  • 关于jQuery原理

总体思路：

  1. 原生的获取对象或对对象的处理都太繁琐，用函数将其包装，使其简单化。
  2. 将对元素的处理方法通过原型继承的方式进行定义。

原文中有一段文字表述可能有问题：

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的原型对象，尼玛$.fn.init的prototype原型现在就是个光杆司令啊，哟，正好，$.fn对应的原型方法，除了init没用外，其他hide(), each()就是我们需要的。因此，我们需要加上这么一行：

我觉得应该改为：

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：

好了，现在我们用代码的方式进行演进讲解：

  1. 原生
var button = document.getElementById("button")
var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")

button.onclick = function() {
    image1.style.display = "none";
    image2.style.display = "none";
};
  1. 化繁为简，进行包装
var $ = function(id) {
    return document.getElementById(id);
};

$("button").onclick = function() {
    $("image1").style.display = "none";
    $("image2").style.display = "none";
};
  1. 样式处理还是繁琐，继续简化，封装一个方法到元素对象上去
var $ = function(id) {
    return document.getElementById(id);
};

HTMLElement.prototype.hide = function() {
    this.style.display = "none";
};

$("button").onclick = function() {
    $("image1").hide();
    $("image2").hide();
};
  1. IE6~IE8浏览器不认识HTMLElement，上述方法不通用。改进思路：Function的原型扩展大家都认识，创建一个函数，然后通过new这个函数返回HTML元素，再将hide方法绑定到该函数的原型上。
var F = function(id) {
    return document.getElementById(id);
};
F.prototype.hide = function() {
    this.style.display = "none";
};

new F("button").onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};

  1. 上述方案有问题，原因请参见文章开头关于new的解释：
    new F()返回的不是this对象了，而是DOM对象。其原型对象是构造函数.prototype，而该构造函数已经不是F了。所以new F()的返回值根本访问不到hide方法。

  2. 那就用this来做桥接，new F()还是返回this，DOM对象以属性的方式绑定到this上。原型对象上的hide方法可以通过点的方式访问到DOM对象

var F = function(id) {
    this.element = document.getElementById(id);
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};
new F("button").element.onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};
  1. 上面的方法，元素的获取直接在F方法中，但是，实际情况，考虑到兼容性实现，元素获取可能会相当复杂，同时方法私有，不能重利用。因此，可以把元素获取方法放在原型上，便于管理和重用。代码如下：
var F = function(id) {
    return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
    this.element = document.getElementById(id);
    return this;
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};
new F("button").element.onclick = function() {
    new F("image1").hide();
    new F("image2").hide(); 
};
  1. 能不能不用new
var F = function(id) {
   return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
    this.element = document.getElementById(id);
    return this;
};
F.prototype.hide = function() {
    this.element.style.display = "none";
};

var $ = function(id) {
    return new F(id);
};

$("button").element.onclick = function() {
    $("image1").hide();
    $("image2").hide();    
};
  1. 获取元素不仅仅只用id，还有class等其他方式
var F = function(selector, context) {
    return this.getNodeList(selector, context);
};
/**
替换掉特殊的getElementById，使用通用的获取list的方式
*/
F.prototype.getNodeList = function(selector, context) {
    context = context || document;
    this.element = context.querySelectorAll(selector);
    return this;
};
var $ = function(selector, context) {
    return new F(selector, context);
};
/**
以下代码有些问题，因为现在是操作list了。不过可以用来理解流程。
*/
$("button").element.onclick = function() {
    $("image1").hide();
    $("image2").hide();    
};
  1. 解决上面提出的问题，遍历list
var F = function(selector, context) {
    return this.getNodeList(selector, context);
};
F.prototype.getNodeList = function(selector, context) {
    context = context || document;
    this.element = context.querySelectorAll(selector);
    return this;
};
F.prototype.each = function(fn) {
    var i=0, length = this.element.length;
    for (; i<length; i+=1) {
        fn.call(this.element[i], i, this.element[i]);
    }
    return this;
};
F.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new F(selector, context);
};
$("button").element[0].onclick = function() {
    $("img").hide();  
};
  1. $("button").element[0] 看上去不爽
var F = function(selector, context) {
    return this.init(selector, context);
};
//这个方法已经不是获取list了，应该将名字getNodeList换成更准确的init
F.prototype.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        /**
          每一个DOM对象都以 属性：对象 的方式保存在了this中;
          这个属性名=nodeList中每个DOM对象的索引值
        */
        this[i] = nodeList[i];
    }
    return this;
};
F.prototype.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
F.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new F(selector, context);
};
//这时可以不用$("button").element[0]了
$("button")[0].onclick = function() {
    $("img").hide();  
};
  1. F名字看着不爽，能不能换一个：F → $.fn
var $.fn = function(selector, context) {
    return this.init(selector, context);
};
$.fn.prototype.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.prototype.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.prototype.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
var $ = function(selector, context) {
    return new $.fn(selector, context);
};
$("button")[0].onclick = function() {
    $("img").hide();  
};
  1. 每次扩展新方法，都要 $.fn.prototype.functionName=function(){} 吗？作为插件，每次扩展方法都要访问高级属性prototype好吗？插件应该把这一类难的高级的帮我们隐藏掉，那我们给他们重新起个名字吧，就让 $.fn = F.prototype 吧
var F = function(selector, context) {
    return this.init(selector, context);
};
var $ = function(selector, context) {
    return new F(selector, context);
};
$.fn = F.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};
  1. 我们看这段代码
var F = function(selector, context) {
    return this.init(selector, context);
};
var $ = function(selector, context) {
    return new F(selector, context);
};

明显可以合并简化

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};

然后我们再重新审视整段代码发现，除了在其他地方用到了 F.prototype，F在其他地方没有任何使用，也就是说F可以随便定义，那我们可以用把F.prototype改成$.prototype，然后把原来的F定义删除，于是代码变成了

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];
    }
    return this;
};
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};
  1. 但是这个时候我们发现
var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};

这段代码是有问题的，问题解释请看我这篇文章开始处这段文字

上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：

那怎么办呢？在指回去不就得了 $.fn.init.prototype = $.fn

于是整段代码变成了现在这样

var $ = function(selector, context) {
    return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
    var nodeList = (context || document).querySelectorAll(selector);
    this.length = nodeList.length;
    for (var i=0; i<this.length; i+=1) {
        this[i] = nodeList[i];    
    }
    return this;
};
$.fn.init.prototype = $.fn;
$.fn.each = function(fn) {
    var i=0, length = this.length;
    for (; i<length; i+=1) {
        fn.call(this[i], i, this[i]);
    }
    return this;
};
$.fn.hide = function() {
    this.each(function() {
       this.style.display = "none";
    });
};
$("button")[0].onclick = function() {
    $("img").hide();  
};
  1. 在init方法中，判断第一个参数，如果是节点，直接 this[0] = this_node
  2. 每个扩展方法都要 $.fn.functionName, 太繁琐
$.fn.extend({
    css: function() {},
    attr: function() {},
    data: function() {},
    // ...
});

over!

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容