jQuery 的 $.fn 可以防止 jQuery 的原型被篡改

$.fn 和 $.prototype 都指向 jQuery 的原型,由于 $.fn 的存在,即使 $.prototype 被修改指向另一个对象,jQuery 的实际原型还在,不会被篡改。

演示代码

<script>
// 给jQuery的原型添加一个方法
$.fn.extend({
	im : function(){
			console.log("Hi, I am prototype");
			console.log("-----");
		}
});

console.log($.fn === $.prototype);  // true

$.prototype.im.call(document.querySelector('body'), null);  // "Hi, I am prototype"

$('body').im();   // "Hi, I am prototype"

//将 $.prototype 指向另一个对象,改对象也拥有一个 im 方法
$.prototype = {
		im : function(){
			console.log("Hi, I've changed");
			console.log('------');
		}
	};

console.log($.fn === $.prototype);  //flase

$.prototype.im.call(document.querySelector('body'), null);   // "Hi, I've changed"  改变了

$('body').im();  // "Hi, I am prototype"  没有改变
</script>
时间: 2024-11-20 16:29:42

jQuery 的 $.fn 可以防止 jQuery 的原型被篡改的相关文章

jQuery 源码分析3: jQuery.fn/ jQuery.prototype

1 // 建立方法实例,提高方法访问的速度(避免在原型链上搜索) 2 3 var deletedIds = []; 4 var slice = deletedIds.slice; 5 var concat = deletedIds.concat; 6 var push = deletedIds.push; 7 var indexOf = deletedIds.indexOf; 8 var class2type = {}; 9 var toString = class2type.toString;

jQuery扩展$.fn、$.extend jQery命名方法扩展 练习总结

<script>$.fn.hello = function(){  //扩展jQuery实例的自定义方法,基于$.fn的jq方法扩展    this.click(function(){        alert('hello');    })}$('input').hello();  // 点击input正确出弹窗 'hello'</script> <script>$.fn.extend({  //用extend扩展jQuery实例的自定义方法    hello:fun

jquery源码解析:jQuery原型的方法和属性介绍

上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype = { toArray: function(){ //把jQuery对象转换成原生元素的数组,比如:$("div").toArray(),{0:"div",1:"div"}   ->   ["div","div&q

转:jQuery.fn.extend与jQuery.extend到底区别在哪?

还是先吐个槽,网上都都是转载抄袭,基本上就那么一两篇文章,说的还不清楚.... 正文: 其实说白了,从两个方法本身就能看出来端倪. 我们先把jQuery看成了一个类,这样好理解一些. jQuery.extend(),是扩展的jQuery这个类. 假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能.这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了. 我们这样写: jQuery.extend({

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

jQuery中$.fn的用法示例介绍

看完自己似乎理解了点东西,记录一下: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱

jquery.fn.extend与jquery.extend用法与区别

关于jquery.fn.extend与jquery.extend用法与区别. jQuery为开发插件提拱了两个方法,分别是:  代码如下 复制代码 jQuery.fn.extend(object);  和   jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现.  代码如下 复制

JQuery中$.fn的用法示例

$.fn是指JQuery的命名空间,加上fn上的方法及属性,会对JQuery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对JQuery扩展了一个abc方法,那么后面的每一个JQuery实例都可以这么引用这个方法,如: $("#div").abc(); JQuery为开发插件提供了两个方法,分别是: JQuery.extend(object);为了扩展JQuery类本身,为类添加新的方法. JQuery.fn.extend(object);给JQuery对象添加

jQuery.fn.extend与jQuery.extend 的区别

1 jquery.extend 是jquery 静态的方法 实例 jQuery.extend({    liu: function(){        alert('liu');    } }); 使用方法:$.liu();这样就能打印出来”liu“这个字符串 2 Jquery.fn.extend  是jquery 实例的方法 实例 jQuery.fn = jQuery.prototype = {          init: function( selector, context ) {//…