extend的作用:
1.擴(kuò)展jquery的靜態(tài)方法:
$.extend({
test: function(){
console.log('這是創(chuàng)建的靜態(tài)方法test');
}
});
$.test(); //'這是創(chuàng)建的靜態(tài)方法test'
2.合并對(duì)象:
extend用作合并時(shí)运敢,會(huì)改變第一個(gè)參數(shù)的值---也即將合并的值賦給第一個(gè)參數(shù);
//改變第一個(gè)參數(shù)obj1的值
const obj1 = {
width: '100px'
};
const obj2 = {
width: '200px'
color: '#fff'
};
$.extend( obj1, obj2 );
console.log( obj1 ); //輸出:{ width: "200px", color: "#fff" }
如果不想改變已有參數(shù)的值剂碴,可以借由一個(gè)空對(duì)象進(jìn)行操作,并將合并的值賦給這個(gè)空對(duì)象惠猿,如下:
const obj1 = {
width: '100px'
};
const obj2 = {
width: '200px',
color: '#fff'
};
const obj = $.extend( {}, obj1, obj2 );
console.log( obj ); //輸出:{ width: "200px", color: "#fff" }
console.log(obj1); //輸出:{ width: "100px" }
3.深度嵌套對(duì)象:
const obj1 = {
width: '100px',
color: {
lighten: '#fff'
}
};
const obj2 = {
width: '200px',
color: {
darken: '#ccc'
}
};
$.extend(true, obj1, obj2);
console.log(obj1);
//輸出:{ width: '200px', color: { lighten: '#fff', darken: '#ccc' } }