包含jqueryextend的词条

jquery 怎么调不到extend扩展方法

在使用Jquery开发的过程中，extend是常用的参数处理函数，特别是对默认值的使用。

Jquery的扩展方法原型是:

var v=$.extend(dest,src1,src2,[,src3...]);

作用是把src1,src2,src3合并到到dest中并返回合并后的dest.

但是在使用过程中，默认值往往是不能被改变的，

如下：

var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolor':'#000'};

var src={'selector':'ss','default':'笑话','backcolor':'#fff','forecolor':'red'};

如果我们使用

var v=$.extend(dfault,src);

来进行参数的处理，那么下一次处理的时候默认值就是这次处理之后的值而不是真实的默认值了。

我们可以用下面的代码：

var v=$.extend({},dfault,src);

即我们使用一个空的对象作为目标参数(default)，将默认参数作为第一次源参数(src),这样同样是返回了合并后的参数，但是我们的default没有被改变，还可以再次使用！

这样就实现了默认值保持不变的效果了!

相关问答

Q1: jQuery.extend和jQuery.fn.extend的区别

jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如：

XML/HTML代码

$.extend({

add:function(a,b){return a+b;}

});

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，

jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

JavaScript代码

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$(“#input1″).alertWhileClick();

页面上为：input id=”input1″type=”text”/

$(“#input1″)　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中，当然不会做这么小白的插件，事实上jQuery提拱了丰富的操作文档，事件，CSS ,Ajax、效果的方法，结合这些方法，便可以开发出更加 Niubility 的插件。

Q2: 深拷贝与浅拷贝的实现（一）

最近的学习中，仔细研究了下深拷贝和浅拷贝，下面就来简单的总结下。

首先我们了解下两种 数据类型 ：

1、基本类型：像Number、String、Boolean等这种为基本类型

2、复杂类型：Object和Array

接着我们分别来了解下浅拷贝和深拷贝，深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的。

浅拷贝 ：

可以看出，对于对象或数组类型，当我们将a赋值给b，然后更改b中的属性，a也会随着变化。也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。

深拷贝 ：

刚刚我们了解了什么是浅拷贝，那么相应的，如果给b放到新的内存中，将a的各个属性都复制到新内存里，就是深拷贝。

也就是说，当b中的属性有变化的时候，a内的属性不会发生变化。

那么除了上面简单的赋值引用，还有哪些方法使用了 浅拷贝 呢？

Object.assign()

在MDN上介绍Object.assign()：”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。”

复制一个对象

可以看到，Object.assign()拷贝的只是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。所以Object.assign()只能用于浅拷贝或是合并对象。这是Object.assign()值得注意的地方。

那么下面我们就来说说复杂的 深拷贝 。

jQuery.extend()

说到深拷贝，第一想到的就是jQuery.extend()方法，下面我们简单看下jQuery.extend()的使用。

jQuery.extend( [deep ], target, object1 [, objectN ] )，其中deep为Boolean类型，如果是true，则进行深拷贝。

我们还是用上面的数据来看下extend()方法。

通过上面的对比可以看出，当使用extend()进行深拷贝的时候，对象的所有属性都添加到target中了。

我们知道了extend()可以进行深拷贝，那么extend()是如何实现深拷贝的呢？

先来看下jQuery.extend()源码

主要看下关于深拷贝的部分，取第一个参数，如果是boolean类型的，就赋值给deep，下面如果deep为true（也就是进行深拷贝），就递归调用extend()，这样就将对象的所有属性都添加到了target中实现了深拷贝。

JSON.parse()和JSON.stringify()

上面的jQuery源码是否让你眼花缭乱？有没有什么办法无脑实现深拷贝呢？JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。

可以看到改变targetCopy并没有改变原始的target，继承的属性也没有丢失，因此实现了基本的深拷贝。

但是用JSON.parse()和JSON.stringify()会有一个问题。

JSON.parse()和JSON.stringify()能正确处理的对象只有Number、String、Array等能够被json表示的数据结构，因此函数这种不能被json表示的类型将不能被正确处理。

上面的例子可以看出，hello这个属性由于是函数类型，使用JSON.parse()和JSON.stringify()后丢失了。

因此JSON.parse()和JSON.stringify()还是需要谨慎使用。

Q3: jQuery中，extend，obj.extend和$fn.extend三者的区别

我们先把jQuery看成了一个类，这样好理解一些。 jQuery.extend()，是扩展的jQuery这个类。 假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。

Q4: jquery.prototype.extend添加的方法存放在原型对象中么

现在看到jQuery的227行，本篇读jQ的继承方法jQuery.extend()。

官方作用解释是将一个或多个对象合并到目标对象中。

jQuery.extend( [deep ], target, object1 [, objectN ] )：

其中deep是布尔类型，如为true，则执行深拷贝，即合并成为递归；

target是一个对象扩展，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间；

后面的object1到objectN同样作为对象，包含额外的属性合并到第一个参数

打开APP

一期一会

关注

jQuery源码研究：jQuery对象及原型上的extend()方法 原创

2019-01-10 11:40:56

1点赞

一期一会

码龄7年

关注

现在看到jQuery的227行，本篇读jQ的继承方法jQuery.extend()。

官方作用解释是将一个或多个对象合并到目标对象中。

jQuery.extend( [deep ], target, object1 [, objectN ] )：

其中deep是布尔类型，如为true，则执行深拷贝，即合并成为递归；

target是一个对象扩展，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间；

后面的object1到objectN同样作为对象，包含额外的属性合并到第一个参数。

看下源码实现：

jQuery.extend = jQuery.fn.extend = function(){

//方法体...

var options, name, src, copy, copyIsArray, clone,

target = arguments[ 0 ] || {},

i = 1,

length = arguments.length,

deep = false;

if ( typeof target === "boolean" ) {

deep = target;

target = arguments[ i ] || {};

i++;

}

if ( typeof target !== "object" !isFunction( target ) ) {

target = {};

}

if ( i === length ) {

target = this;

i--;

}

for ( ; i length; i++ ) {

if ( ( options = arguments[ i ] ) != null ) {

for ( name in options ) {

src = target[ name ];

copy = options[ name ];

if ( target === copy ) {

continue;

}

if ( deep copy ( jQuery.isPlainObject( copy ) ||

( copyIsArray = Array.isArray( copy ) ) ) ) {

if ( copyIsArray ) {

copyIsArray = false;

clone = src Array.isArray( src ) ? src : [];

} else {

clone = src jQuery.isPlainObject( src ) ? src : {};

}

target[ name ] = jQuery.extend( deep, clone, copy );

} else if ( copy !== undefined ) {

target[ name ] = copy;

// 返回修改后的对象

return target;

在jQuery对象上添加extend属性，并且在jQuery.fn上面也添加同样的extend属性，还记得前面jQuery.fn = jQuery.prototype不？jQuery对象的fn属性指针就指向jQuery对象的原型，并且因为对象都是引用类型的，所以上例代码的操作意思就是：在jQuery对象和它的原型对象上都添加extend方法，该方法最后返回的是一个合并处理后的对象。

在jQuery对象上绑定的extend()和jQuery.fn上绑定的extend()方法其实是不同的，前者是类方法，是静态方法，调用方法写作$.extend()；后者是实例方法，是成员方法，调用方法写作$(selector).extend()。

Q5: 关于jquery的extend这段代码什么意思

jQuery.extend() 是 jQuery 提供的对象拷贝函数，在 ES6/ES2015 之后就有了原生实现 Object.assign()，当然二者还是略有一些差异的，这里不做展开讲。

还是以 Object.assign() 为例吧，这个方法的签名是：

Object Object.assign(

   Object target,    /* 目标对象 */

   Object ...sources /* 源对象（可以是多个） */

);

如果 source 和 target 中的属性具有相同的键，则 target 属性的值将被 source 属性的值覆盖。多个源的话依次替换。

图中的意思就是有个有 message 和 css.color 属性的对象，和另一个对象 options 做拷贝，如果 options 中也有这两个属性，就替换掉前者对应的值，最后返回替换后的结果。