首页 > 代码库 > jQuery源码笔记——二

jQuery源码笔记——二

2024-07-31 14:31:42   219人阅读

jQuery选择这样返回对象

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );//从jQuery.fn里调用的方法};jQuery.fn = jQuery.prototype = { //这里jQuery.prototype，目前可以删除。    init: function(){        console.log("初始化完成");        return this;    }
　　//功能方法}jQuery.fn.init.prototype = jQuery.fn //让所有实例化jQuery.fn.init都继承这个原型中的方法。console.log(jQuery());//{...}

这里有一个重要的知识点,new 到底做了什么：new 构造函数jQuery.fn.init，将返回一个对象，这个对象会继承构造函数的原型jQuery.fn.init.prototype,而这个原型被我所们改写，指向jQuery.fn，也就是一个对象，对象里拥有init和所有的功能方法。这就实现了我们想返回一个拥有所有功能方法的对象。

我们也可以这样

var jquery = function(){    if(!(this instanceof jquery)) return new jquery();    console.log("初始化完成");}jquery.fn = jquery.prototype = {    //功能方法}console.log(jQuery());//{...}

其实，根本要解决的问题是返回一个对象，这个对象默认要拥有功能方法。为了最大效率，两个例子都选择不把功能方法写在对象里，而是通过对原型的改写，让实例化默认继承。

链式调用

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    init: function(){        console.log("初始化完成");        return this;    },    add:function(){        console.log("add完成")        return this;    }}jQuery.fn.init.prototype = jQuery.fnconsole.log(jQuery().add().add());

javascript中，函数中的this指向调用它的对象。本例，jQuery()实例化了一个对象，这个对象调用了add()方法,输出add，然后返回this，这个this实际就是调用它的对象jQuery()，因此无论执行了多少方法，只要返回this,那之前的结果都是最初的对象，都可以继续使用最初这个对象里功能方法。

向对象里添加方法的函数

var object = {    name: "winderby"}object.extend = function(obj){    for (var key in obj)        this[key] = obj[key];    return this;}object.extend({    getName:function(){        console.log(this.name);    }})object.getName();

合并对象

function extend() {    for (var i = 1; i < arguments.length;i++){        for(var key in arguments[i]){            arguments[0][key] = arguments[i][key]        }    }}var student = {    name:"winderby",    age: "18"}var arrangement = {    name:"winderby",    lesson:"english"}extend(student,arrangement);console.log(student)

jQuery的extend

var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    init: function(){        return this;    }}jQuery.fn.init.prototype = jQuery.fnjQuery.fn.extend = jQuery.extend = function(){//指向同一个方法    var i = 1;    var target = arguments[0];    var length = arguments.length;    if(length === 1){ //1个参数时        target = this;        i--;    }    for (; i < arguments.length;i++){ //主要功能体，遍历，赋值        for(var key in arguments[i]){            target[key] = arguments[i][key]        }    }}//jQuery.extend合并对象测试var student = {    name:"winderby",    age: "18"}var arrangement = {    name:"winderby",    lesson:"english"}jQuery.extend(student,arrangement);console.log(student);//jQuery.fn.extend添加jQuery方法测试jQuery.fn.extend({    setName: function(myName) {        this.myName = myName        return this;    },    getName: function() {        console.log(this.myName)        return this;    }})jQuery().setName("winderby").getName();

将前面两个功能合并到一个jQuery函数里就成了jQuery的extend。目前这个extend可以通过jQuery.extend合并对象，也可以通过jQuery.fn.extend，向jQuery.fn添加方法。

至于第三种用法jQuery(true,{..})，也很简单，就不赘述了。

jQuery源码笔记——二


联系
我们