jQuery源码部分总结

来源：互联网发布：淘宝店铺视觉设计编辑：程序博客网时间：2024/05/17 02:12

var $$ = ajQuery = function(selector) {    return new ajQuery.fn.init(selector);}ajQuery.fn = ajQuery.prototype = {    name: 'aaron',    init: function(selector) {        this.selector = selector;        return this;    },    constructor: ajQuery,    extend: function() {        var options, src, copy,            target = arguments[0] || {},            i = 1,            length = arguments.length;        //只有一个参数，就是对jQuery自身的扩展处理        //extend,fn.extend        if (i === length) {            target = this; //调用的上下文对象jQuery/或者实例            i--;        }        for (; i < length; i++) {            //从i开始取参数,不为空开始遍历            if ((options = arguments[i]) != null) {                for (name in options) {                    copy = options[name];                    //覆盖拷贝                    target[name] = copy;                }            }        }        return target;    }}ajQuery.fn.init.prototype = ajQuery.fn    //ajQuery.extend = ajQuery.fn.extend = ajQuery.fn.extend({    setName: function(myName) {        this.myName = myName        return this;    },    getName: function() {        $("#aaron").html(this.myName)        return this;    }})$$().setName('慕课网-Aaron').getName();console.log($$().setName('慕课网-Aaron'));

实现的方法同下面类似

var $$ = ajQuery = function(selector) {    return new ajQuery.fn.init(selector);}ajQuery.fn = ajQuery.prototype = {    name: 'aaron',    init: function(selector) {        this.selector = selector;        return this;    },    constructor: ajQuery}ajQuery.fn.init.prototype = ajQuery.fnajQuery.extend = ajQuery.fn.extend = function() {    var options, src, copy,        target = arguments[0] || {},        i = 1,        length = arguments.length;    //只有一个参数，就是对jQuery自身的扩展处理    //extend,fn.extend    if (i === length) {        target = this; //调用的上下文对象jQuery/或者实例        i--;    }    for (; i < length; i++) {        //从i开始取参数,不为空开始遍历        if ((options = arguments[i]) != null) {            for (name in options) {                copy = options[name];                //覆盖拷贝                target[name] = copy;            }        }    }    return target;}ajQuery.fn.extend({    setName: function(myName) {        this.myName = myName        return this;    },    getName: function() {        $("#aaron").html(this.myName)        return this;    }})$$().setName('慕课网-Aaron').getName();

因为extend的this指向ajQuery.prototype这个对象
init的this也指向ajQuery.prototype这个对象
所以extend扩展的方法相当于

ajQuery.fn = ajQuery.prototype = {...setName: function(myName) {},getName: function() {}...}

jQuery既是对象也是函数
jQuery.extend调用的时候上下文指向的是jQuery构造器

jQuery.fn.extend调用的时候上下文指向的是jQuery构造器的实例对象了

$(“.aaron”).each() //作为实例方法存在走的是ajQuery.fn.init.prototype

$.each() //作为静态方法存在走的是ajQuery.prototype
具体可测试

console.log($().jquery); //实例化了的方法console.log($.prototype.jquery); //静态方法

因为ajQuery.fn.init.prototype = ajQuery.fn = ajQuery.prototype实例方法与静态方法共享同一套方法

jQuery的原型对象覆盖了init构造器的原型对象，因为是引用传递所以不需要担心这个循环引用的性能问题。

参考原文：
写的非常好的一篇教程

http://www.imooc.com/learn/222

https://github.com/JsAaron/jQuery

1 0