jQuery 技术讨论
2016-02-18 18:32
633 查看
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的分享,整理了一些精髓。。
相关文章推荐
- jquery中onchange和onclick的使用
- jQuery选择器总结
- 阅读 jQuery 源码的18个惊喜
- jquery jsonp实现跨域
- 好用的基于jQuery的提示框插件--webui-popover
- jquery 对 Json 的各种遍历
- jQuery之submit 事件及submit函数
- 表单填写不完整提交按钮灰色,填写完整自动解除解禁+jQuery验证提示
- jQuery使用说明
- jQuery获取url参数值
- jquery hover事件 in和out
- jQueryEasyUI Messager基本使用
- jquery中prop()方法和attr()方法的区别
- jquery获取单选框复选框下拉框值
- 8个超实用的jQuery插件应用
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- jQuery小技巧
- jQuery插件主要有两种扩展方式
- 页面的布局的百分比与像素
- C#集合在前端通过jQuery生成json树代码