文章标题

最新推荐文章于 2022-05-12 11:32:07 发布

abcPHP

最新推荐文章于 2022-05-12 11:32:07 发布

阅读量306

点赞数

分类专栏： JS、jQuery

本文链接：https://blog.csdn.net/t_1007/article/details/53068397

版权

JS、jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、静态方法、原型方法、对象方法

1、静态方法

var BaseClass = function() {};  // 或var BaseClass=new Function(); 或 function BaseClass(){};

BaseClass.f1 = function(){  //定义静态方法  
     console.log('method ');  
}  
BaseClass.f1();//This is a static method  
var instance1 = new BaseClass();  
instance1.f1();//instance1.f1 is not a function

静态方法类似于php的静态方法，直接由方法调用，不能被实例对象调用。

2、原型方法

给原型添加方法的方式有两种：

function fn(){}  
fn.prototype.foo=function foo(){  
  console.log("klass");  
}

function fn2(){}  
fn2.prototype={  
  constructor:fn,  
  foo:function(){  
    console.log("fn2");  
  }  
}

调用：①类名.prototype.foo(…); ②实例对象.foo(…);

3、实例方法

function fn(){}  
var obj=new fn();  
obj.foo=function(id){  
  this.id=id;  
  console.log(this.id);  
}  
obj.foo("myobj");//myobj

var obj2=new fn();
//obj2.foo('obj2'); // ... is not a function
//fn.foo('klass');   // ... is not a function

调有方法：该实例对象.foo(…)，实例方法只属于该实例对象，其他实例、原型、类均无法调用。

二、jQuery插件开发

jQuery插件开发分为两种：

1、类级别：

类级别你可以理解为拓展jquery类，最明显的例子是 $.ajax(…)，相当于静态方法、扩展函数。开发扩展其方法时使用$ .extend方法，即jQuery.extend(object);

$.extend({
    addNew:function(a,b){return a+b;} ,
    minusNew:function(a,b){return a-b;}
});

var i = $.addNew(3,2);
var j = $.minusNew(3,2);
console.log(i,j);

2、对象级别：

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);

<body>
<input type='checkbox' name='checkbox1'>
<input type='checkbox' name='checkbox1'>
</body>

$.fn.extend({
    check:function(){
        this.each(function(){
            this.checked=true;
        });
    },
    uncheck:function(){
        this.each(function(){
            this.checked=false;
        });
    }
});

$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();

三、`$.extend`和`$.fn.extend`区别

（jQuery、jQuery.fn、jQuery.prototype、jQuery.fn.init）

1、jQuery源码摘录如下：

(function( window, undefined ) {
    var //。。。。n行之后
    // 构建jQuery对象
    jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    }

    // jQuery对象原型
    jQuery.fn = jQuery.prototype = {
        jquery: core_version,
        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {
            //返回一个类数组对象，jQuery.fn实例（ return new jQuery.fn.init()，this指向jQuery.fn ）
            return this;
            return jQuery.makeArray( selector, this );
        }
        selector: "",
        length: 0,
        toArray: function(){
            //...
        }
        get: function(){
            //...
        }
        /*
        pushStack、each、ready、slice、first、last、eq、map等等
        */
    };

    // Give the init function the jQuery prototype for later instantiation
    jQuery.fn.init.prototype = jQuery.fn;

    //定义extend 函数
    // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
    jQuery.extend = jQuery.fn.extend = function() {
        //。。。

        // extend jQuery itself if only one argument is passed
        if ( length === i ) {
            target = this;
            --i;
        }
        //。。。
    };
    // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象实例的扩展

    // 在jQuery上扩展静态方法
    jQuery.extend({
        // something to do
        //expando、noConflict、ready、isFunction、isArray、parseHTML、parseJSON、parseXML、each、merge等等
    });

    //赋值给window
    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }
})(window);

2、分析

这里我们可以看到：

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

那么jQuery.fn.init()返回的又是什么呢，返回一个类数组对象，jQuery.fn实例（ return new jQuery.fn.init() ），jquery中jQuery.fn.init()方法中的this指向？

    jQuery.fn = jQuery.prototype = {
        jquery: core_version,
        constructor: jQuery,
        init: function( selector, context, rootjQuery ) {
            return this;
            return jQuery.makeArray( selector, this );
        }
        selector: "",
        length: 0,
        toArray: function(){
            //...
        }
        get: function(){
            //...
        }
        /*
        pushStack、each、ready、slice、first、last、eq、map等等
        */
    };

jQuery.fn = jQuery.prototype，那么就是将jQuery 的原型赋值给了 jQuery.fn。

再看下面：
jQuery.fn.init.prototype = jQuery.fn;

看到这里可知将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype原型是{}，为了可以去调用init外面的方法，就做了这个处理，将jQuery.fn 赋值给jQuery.fn.init.prototype。这样的话，jQuery.fn.init的原型也就是jQuery的原型，就是 jQuery.fn。

那么就有这样的一个关系：
jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype
赋值了以后，在调用的时候，当init中没有方法的时候，就会去原型函数中调用。

3、jQuery.extend 与 jQuery.fn.extend

window.jQuery = window.$ = jQuery;，jQuery和$符号是等价的，在window下都表示jQuery对象。

先看extend函数的定义：

jQuery.extend = jQuery.fn.extend = function() {
    //。。。
    // extend jQuery itself if only one argument is passed
    //如果只传入了一个参数，则扩展jQuery（或jQuery.fn）自身
    if ( length === i ) {
        target = this;
        --i;
    }
    //。。。
};

如上文的调用：

$.extend({
    addNew:function(a,b){return a+b;} ,
    minusNew:function(a,b){return a-b;}
});
var i = $.addNew(3,2);
var j = $.minusNew(3,2);

//var ii=$('#id').addNew(13,2); //$(...).addNew is not a function
//console.log(ii);

$.fn.extend({
    check:function(){
        this.each(function(){
            this.checked=true;
        });
    },
    uncheck:function(){
        this.each(function(){
            this.checked=false;
        });
    }
});
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
$.check();	//$.check is not a function