分析了一下JQuery中的extend方法实现原理

2020-05-24 21:26:43易采站长站整理

2、JQuery.extend(目标对象,源对象)

    将源对象的属性和方法复制到目标对象上,采用浅复制。
【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。


var person = { 
    language : [‘java’, ‘c++’, ‘sql’], 
    showName : function(name){ 
        alert(“Name: ” + name); 
    } 
}; 
var student = { 
    showNum : function(num){ 
        alert(“Num: ” + num); 
    } 
}; 
jQuery.extend(student, person); // 将person对象扩展到指定的student对象上 
student.showName(“admin”); 
alert(student.language);

3、JQuery.extend(boolean,源对象)

    此种方式中的boolean参数表示是否采用深度复制,如果为true,则使用深度复制。
【实例】将person对象扩展到jQuery对象上


var person = { 
    language : [‘java’, ‘c++’, ‘sql’], 
    showName : function(name){ 
        alert(“Name: ” + name); 
    } 
}; 
jQuery.extend(true, person); // 将person对象扩展jQuery对象上 
alert($.language); // java, c++, sql 
$.language.push(‘PL/SQL’); // 修改扩展后的对象 
alert(person.language); // java, c++, sql 
person.language.pop();

 从上面例子中可以看出对$.language的修改不会影响到person中的language属性。这就是深度复制

4、JQuery.extend(boolean,目标对象,源对象)

    决定是否采用深度复制将源对象扩展到目标对象上面。如下:
【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。


var person = { 
    showName : function(name){ 
        alert(“Name: ” + name); 
    } 
}; 
var student = { 
    language : [“java”, “c++”, “javascript”], 
    showNum : function(num){ 
        alert(“Num: ” + num); 
    } 
}; 
var target = jQuery.extend(person, student); 
alert(target.language);     // java, c++, javascript