jQuery 技术讨论

青旅半醒 2022-08-20 08:30 152阅读 0赞

## **jQuery 技术讨论** ##

首先，看一段js代码，

function Monkey(name) { 
       this.name = name;
       return this;
    }
    
    var a = Monkey("hello");
    var b = new Monkey("yyy");
    
    console.log(a);
    console.log(b);

a的输出 –> window  
b的输出 –> Monkey  
也就是说，变量a 指向的是全局的window对象（前端浏览器）； 变量b 指向的是Monkey对象。  
所以，有时候我们为了”适应“这种现象，采用如下写法。。（不鼓励）

function Monkey(name) {
       if(typeof window !== 'undefined' && this === window) return new Monkey(name);
       if(typeof global !== 'undefined' && this === global) return new Monkey(name); // 后端js，例如nodejs
       this.name = name;
    }
    var a = Monkey("hello");
    console.log(a); // 输出 Monkey...!!!

再看第二段代码，

var mm = function Monkey(name) { 
      this.name = name;
      return this;
    }
    
    var a = new mm();
    
    mm = null;
    console.log(a);

输出结果 –> Monkey，  
也就是说，Monkey一旦new了以后，就跟原来没有任何关系。a 指向的仍是内存分配的mm对象所占的空间。

接着再看一段代码，

var a = function() { };
    var b = function() { };
    b.prototype = new a;
    var c = new b();
    
    c
    // 输出 b{}
    c.__proto__
    // 输出 a{}, 原型链通过__proto__指针关联

原型链继承。。 Child –> Parent –> Empty –> Object 。

切入正题之前，仍然要做一个铺垫，还是来一段代码，

var a = {};
    a[0] = "a";
    a[1] = "b";
    console.log(a);
    
    a.length = 2;
    console.log(a);
    
    a.splice = Array.prototype.splice;
    console.log(a);

输出结果为：  
1. Object \{0: “a”, 1: “b”\}  
2. Object \{0: “a”, 1: “b”, length: 2\}  
3. \[“a”, “b”\]  
我们看到，奇迹发生了。。。但是，别高兴的太早。。真是的数组吗？？  
我们可以看到chrome debug实际上展开后输出的是，

|>["a", "b"]
        0: "a"
        1: "b"
        length: 2
        splice: splice()
        __proto__: Object

a instanceof Array –> false  
a instanceof Object –> true  
所以a还是对象，不是数组，只不过实现了splice方法后，console变成了类似于数组的输出，这跟js的标准规定有关系，不再细究。。  
a\[1\] = a\[‘1’\] = “b” –> 对象中有数组的表现形式，但是不具有数组Array.prototype下的方法，除非自己实现（这种特性使得js非常灵活，比如说自己可以自定义”数组”所具有的方法）。。。

正式步入正轨。。Show the Code…

var a = $('div');
    console.log(a);

输出结果为： \[div\#modalbox, div.devoops-modal, div.devoops-modal-header\]  
有了上面的经验，我们就不会轻易的认为这是简简单单的数组了。。。  
实际上 ,  
a instanceof jQuery.fn.init —> true  
a instanceof Array —> false  
这是什么情况。。。我还是用代码来说明具体的原因

jQuery.fn.init.prototype = jQuery.fn = {};
    // xxx 就是父类jQuery.fn所具有的方法，采用原型继承的方式，使得选择器选出的元素(jQuery.fn.init)默认具有 jQuery.fn所定义的方法，简而言之，就是选择器元素具有父类jquery.fn定义的原生方法
    jQuery.fn.xxx = function() {
        this.hide();
        this.show(); // for example
    }
    // jQuery.fn 不停的定义新的方法，使得子类元素都能够访问。。
    // 更精彩的操作来了。。。
    var result = new jQuery.fn.init();
    result[0] = div1;
    result[1] = div2;
    result[2] = div3;
    result.length = 3;
    result.splice = Array.prototype.splice;
    return result;
    // 这就是选择元素最初的样子！

相信大家已经明白了。。。根本原因就是js对object对象的灵活操作。。。

最后，感谢大神zzj的分享，整理了一些精髓。。