<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=utf-8">
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no">
<title>$.extend測試</title>
<script src="../config/js/jquery.js"></script>
<script>
$(function(){
//===========================================1
//$.extend(dist,src1,src2,...) dist繼承src1,src2...
var tt =$.extend({},{a:"a",b:"b"},{c:"c"}); //tt = {a:"a",b:"b",c:"c"}
console.log(tt);
//相同屬性名相同的 屬性值會被覆蓋
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
console.log(result);
//當只有一個參數，jquery的全局對象中去,jquery 函數繼承該 參數的屬性 （這也是jquery函數插件的寫法）
var tt3 = $.extend({
hello:function(){alert('hello');}
});
console.log(tt3);//返回jquery對象 jquery直接繼承這個屬性，這也是插件的寫法
//===========================================2
// $.fn.extend(src)
//該方法將src合併到jquery的實例對象中去(實例對象而不是全局對象 $.extend()測試全局對象，實際上$.fn=$.prototype)，如:
$.fn.extend({
hello:function(){alert('hello');}
});
var tt4 =new $();
tt4.hello(); //彈出hello
//=======================================3 Jquery的extend方法還有一個重載原型
/*
extend(boolean,dest,src1,src2,src3...)
參數： boolean 第一個參數 ，true
*/
//=====深copy
var result3=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
console.log(result3);
//我們可以看出src1中嵌套子對象location:{city:"Boston"},src2中也嵌套子對象location:{state:"MA"},第一個深度拷貝參數爲true，那麼合併後的結果就是：
/*
result4={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}
*/
//也就是說它會將src中的嵌套子對象也進行合併，而如果第一個參數boolean爲false，我們看看合併的結果是什麼，如下：
//淺copy 對象的子對象 直接覆蓋進行處理
var result4=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
console.log(result4);
//那麼合併後的結果就是:result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
});
</script>
</head>
<body>
</body>
</html>
$.extend , $.fn.extend 以及jquery的插件，繼承
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,