jQuery源码学习

1 无new构建

jQuery使用的的方式是$(obj).html().attr();或者是jQuery(obj).html().attr()

形式上是$() 或者jQuery()

先看js函数的实现方式

var Jackey = function(){
    //构造函数
    };
Jackey.prototype={
    //原型
    name:function(){
        console.log("Jackey");
        },
    age:20
    };
//使用方式
var jackey = new Jackey();
jackey.name();  //Jackey

但是要怎样才可以省略new呢？怎样才可以实现Jackey().name()呢？

我们修改一下，让构造函数返回原型

var Jackey = function(){
    //构造函数
    return Jackey.prototype;
    };
Jackey.prototype={
    //原型
    name:function(){
        console.log("Jackey");
        },
    age:20
    };
//使用方式
//var jackey = new Jackey();
Jackey().name();//Jackey 成功

再修改一下

var $ = Jackey = function(){
    //构造函数
    return Jackey.prototype;
    };
$.fn = Jackey.prototype={
    //原型
    name:function(){
        console.log(this.age);
        },
    age:20
    };
//使用方式
//var jackey = new Jackey();
$().name();//和jQuery的使用方式就差不多了，但是这是jquery的写法？答案是：不是

我们再来试试这样的写法

var $ = Jackey = function(){
    //构造函数
    return Jackey.prototype.init();
    };
$.fn = Jackey.prototype={
    //原型
    init:function(){
            return this;
        },
    name:function(){
        console.log(this.age);
        },
    age:20
    };
//使用方式
//var jackey = new Jackey();
$().name();//20 

这样的写法，构造函数返回原型的init，指向的是原型的作用域，返回的是Jackey()的实例，但是this指向的作用域问题就有点混淆了。

var $ = Jackey = function(){
    //构造函数
    return Jackey.prototype.init();
    };
$.fn = Jackey.prototype={
    //原型
    init:function(){
        this.age = 22;
            return this;
        },
    name:function(){
        console.log(this.age);
        },
    age:20
    };
//使用方式
//var jackey = new Jackey();
$().name();    //22 我们原本想输出20的，结果输出了22.是因为init()返回的是init()作用域里面的age,如果注释掉init里面的age，则会返回20.

这样就不是很符合我们当初的预想了。再改改

分隔作用域

var $ = Jackey = function(){
    //构造函数
    return new Jackey.prototype.init();
    };
$.fn = Jackey.prototype={
    //原型
    init:function(){
            return this;
        },
    name:function(){
        console.log(this.age);
        },
    age:20
    };
    Jackey.prototype.init.prototype = Jackey.prototype;
//使用方式
//var jackey = new Jackey();
$().name();//20