jQuery中extend的用法

588 阅读1分钟

jQuery中extend有三种用法

用法一:给jQuery类添加方法

$.extend({
    show:function(){
        console.log('I will show this string')
    }
})
$.show() // I will show this string

用法二:给Jquery的原型添加方法,调用添加的方法时需要获取Jquery实例

<div class="test"></div>
$.fn.extend({
    show:function(){
        console.log('I will show this string')
    }
})
$('.test').show() // I will show this string

用法三:继承、浅拷贝和深拷贝

1.浅拷贝

var a = {}
var b = {'name':'zhangsan'}
$.extend(a,b)
console.log(a.name) // zhangsan

如果b这个对象中嵌套对象,那么改变a后,b会跟着改变

var a = {}
var b = {'people': {'name': 'lisi'}}
$.extend(a,b)
a.people.name = 'wangwu'
console.log(b.people.name) // wangwu

此时,b中的name改变了,碰到这种情况,我们需要进行深拷贝

2.深拷贝

var a = {}
var b = {'people': {'name': 'lisi'}}
$.extend(true,a,b)
a.people.name = 'wangwu'
console.log(b.people.name) // lisi

3.继承,无论后面跟多少个对象,都将成为第一个对象的属性

var a = {'sex': '1'}
$.extend(a,{'name':'zhangsan'},{'people':{'name':'lisi'}})
console.log(a) // {sex: "1", name: "zhangsan", people: {'name':'lisi'}}