Query插件，以備并希望在前端方面有所長進。請批評指正。

一，類型判斷全解

JQuery判斷類型擴展方法：$.type()

1 /*type: function( obj ) { 2 if ( obj == null ) { 3 return obj + ""; 4 } 5 return typeof obj === "object" || typeof obj === "function" ? 6 class2type[ toString.call(obj) ] || "object" : 7 typeof obj; 8 }*/ $.type()

本質：就是運用{}.toString.call()或者（Object.prototype.toString.call()）。

自己模仿寫出來一個方法：

1 function getType(o) { 2 var _target; 3 return ( 4 (_target = typeof (o)) == "object" ? Object.prototype.toString.call(o).slice(8, -1) : _target) 5 .toLowerCase(); 6 } getType

但這個方法只是判斷繼承Object復雜類型下的Date Array RegExp等typeof判斷不出的子類型。

1，typeof 2，instanceof 3，constructor 4，{}.toString.call()或者（Object.prototype.toString.call()）

Boolean Number String Function Array Date RegExp Object Error Null Undefined

1 //1，數據類型：5種簡單基本類型：Undefined Boolean String Number Null 1種復雜類型Object 2 //2，但根據返回值得到的類型有6種，“undefined” “boolean” “string” “number” “function” “object”。注意將Null去掉，換成“function”。都以小寫字母開頭 3 //比如操作符操作字符串會返回上面6種，注意一點：將typeof null會返回“object”，注意返回object的表示這個值是對象（包括Array）或者null, 4 //1Array Date返回object 2Math 數字返回number 3字符串new返回object 直接定義返回object 5 var arr1 = [1, 2, 3]; 6 var arr2 = new Array() 7 var dat = new Date(); 8 var mat1 = Math.PI; 9 var mat2 = Math.random(); 10 alert(typeof arr1);//object 11 alert(typeof arr2);//object 12 alert(typeof dat);//object 13 alert(typeof mat1);//number 14 alert(typeof mat2);//number 15 16 alert(typeof [])//object 17 alert(typeof null);//object 18 //字符串有點特殊 19 var s1 = 'abc'; 20 var s2 = new String('def'); 21 alert(typeof s1);//string 22 alert(typeof s2);//object 23 24 function fun() { 25 26 } 27 alert(typeof fun);//function 28 //3，一般null==undefined返回true ,null===undefined 返回false 29 if (null == undefined) { alert(true) }//true 30 if (null === undefined) { alert(true) } else { 31 alert(false); 32 } 33 //4，Boolean 轉換成false的的類型 “” 0和NaN null undefined typeof 1 //instance 2 var a = "abc."; 3 var b = 1; 4 var c = [1, 2, 3]; 5 var d = new Date(); 6 var e = function () { alert(1); }; 7 var f = function () { this.name = "2"; }; 8 alert(c instanceof Array) //true 9 alert(d instanceof Date) 10 alert(f instanceof Function)//true 11 // alert(f instanceof function)// false 12 //instanceof 后面一定要是對象類型，注意大小寫不能錯 instanceof 1 function A() { } 2 alert(typeof A);//function 3 var a = new A(); 4 alert(typeof a);//object 5 6 //構造函數 7 //new 1創建實例 2將函數的原型賦值給這個實例 3執行這個函數 并且這個函數的上下文this就是這個實例 8 alert(a.constructor)// function A() { } 9 alert(a.constructor === A)//true ***************注意實例能直接調用對應原型中屬性方法。比如a直接調用原型中的constructor constructor 1 function A() { } 2 var a = new A(); 3 alert({}.toString.call(a))//[object Object] 4 alert({}.toString.call(A))//[object Function] 5 alert(Object.prototype.toString.call([]))//[object Array] 6 alert({}.toString.call([]))//[object Array] 7 alert({}.toString.call(new Date()))//[Object Date] {}.toString.call()或者（Object.prototype.toString.call()）

/1typeof:判斷除了Null的5個基本類型準確，但是想Date Array Regexp不準 2先知道類型，再判斷是否是這個類型
//instaneceof，準確，但必須先知道類型，然后判斷是否為這個類型
//constructor（得到構造函數
//跨iframe時候 instanceof 和constructor有問題，具體什么問題不清楚
//用jquery.type(),把null undefined 復雜類型和 除null和undefined外的4中基本類型都包含了。 核心代碼{}.toString.call(obj) //[object ...]

二，創建對象全解

jQuery創建$(),這$()是個方法，里面renturn一個對象，new的時候，覆蓋構造函數的對象。運用構造函數+寄生創建對象，核心理解原型鏈。

1 var jQuery = function( selector, context ) { 2 // The jQuery object is actually just the init constructor 'enhanced' 3 return new jQuery.fn.init( selector, context ); 4 } 5 6 jQuery.fn = jQuery.prototype = { 7 init: function( selector, context ) { 8 var match, elem, ret, doc; 9 10 // Handle $(""), $(null), or $(undefined) 11 if ( !selector ) { 12 return this; 13 } 14 ....... 15 16 jQuery.fn.init.prototype = jQuery.fn; $()對象創建

return new jQuery.fn.init( selector, context );為什么不直接返回new jQuery();應為new的時候，會調用jQuery....然后又new..死循環。
將jquery下的prototype下的init方法的原型=jquery下的prototype。意思：newjQuery.fn.init（）對象具有 init方法的原型中的所有方法 的實例，就會具有jquery下的prototype下的所有方法，擴展jquery下的prototype下的方法。就等于擴展$()的方法。

創建對象的形式：說的3種，5種什么的，沒什么意思的。其實看書之后總結是7種，不過沒什么意思。核心還是構造函數+原型，知道之后其余的稍微看一下就會的。

原始：var obj={}；或者var obj=new Object() ;obj.attr1=..,obj.attr2=..

工廠：function factory（par1,par2,...）{var obj=new Object();obj.attr=par1..;return obj}

構造函數：function A(){} var a=new A();

構造函數+原型：function A(){} var a=new A(); A.prototype={attr1：..;fun1:...}

動態構造函數：function A(){this.attr1=..;this.attr2=..;if(typeof this.fun1!='function'){A.prototype.fun1=function(){....}}} ? ?var a=new A(); a.fun1();//函數內部沒有的，我再在原型中創建。這個整體寫法，將原型寫到方法體內了。就相當我們c#的語言一樣了，將類的所有的方法寫到一個類中。

寄生構造函數：function A(){vat a=new ..;this.attr1=... ? return a;}//return的結果，覆蓋構造函數new時候默認返回的實例。

穩妥構造函數：看高級編程之后，實在發現不出和工廠方法有什么區別。這都什么飛機？我簡單認為就是工廠模式。核心為了“安全”，不使用this，不使用new。

三，引用問題

//在h5游戲開發中，經常會有這樣的要求：復制出一個對象，但修改原來的對象，不會造成對復制出的對象造成影響。我們需要理解一些基本的東西。

1 //1在閉包內，盡量不適用同一個變量名，比如下面的a。因為作用域就近找變量。不會按照人眼看到的從上到下執行。 2 //2變量和函數的聲明，放到最上面。因為js程序運行的時候自動會將聲明提升到當前作用域的最頂端 3 var a = "global"; 4 function b() { 5 console.log(a);//undefined 1先在當前上下文作用域內找a，就近原則！。當前作用于內不存在，就從上級作用域找...上級 6 var a = "local";//此時var a聲明會提升到當前上下文（作用域最頂端） 7 console.log(a);//local 8 } 9 b(); 10 11 var m = "global"; 12 function n() { 13 var m; 14 console.log(m);//undefined 15 m = "local"; 16 console.log(m);//local 17 } 18 n(); 19 var k = "global"; 20 function l() { 21 var k; 22 console.log(k);//undefined 找到當前作用域的k，就不會再往作用域鏈上繼續找 23 console.log(k);//undefined 24 } 25 l(); 26 var s = "global"; 27 function t() { 28 console.log(s);//undefined 找到當前作用域的k，就不會再往作用域鏈上繼續找 29 console.log(s);//undefined 30 } 31 t(); 變量，函數聲明的習慣。常出現的錯誤

四，擴展實質全解

jQuery.extend = jQuery.fn.extend = function() {// copy reference to target objectvar target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the targeti = 2;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passedif ( length === i ) {target = this;--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging object literal values or arraysif ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) {var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src: jQuery.isArray(copy) ? [] : {};// Never move original objects, clone themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target; }; jQuery的擴展（extend）

注意：$.extend和$().extend,都是用這一個方法搞定的。

1 //extend 2 var obj1 = $.extend({}, { name: 'lk', age: 18 }, { weight: 120 }) 3 var obj2 = $.extend({}, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }) 4 var obj3 = $.extend(false, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { sight: 5.0 } }) 5 console.log(obj3);//{name: "lk",weight: 120,attr:{sight: 5.0}} 6 var obj4 = $.extend(true, { name: 'lk', attr: { age: 15, hair: 'red' } }, { weight: 120 }, { attr: { age: 18, sight: 5.0 } }) 7 console.log(obj4);//{name: "lk",weight: 120,attr:{age: 18, hair: 'red',sight: 5.0}} extend使用

注意遞歸的使用：

function multi(num) {//終止條件if (num == 1) {return 1;}return num * multi(num - 1);//5*4*3*2*1 }console.log(multi(5))//120 遞歸，先遞后歸

//我們想把這個對象真正的復制一份出來
var obj1 = { a: 15 }
var obj2 = obj1;
obj1.a = 18;
console.log(obj2); //{a:18 }//想要的是講obj1對象“拷貝”給obj2之后，改obj1，不會造成對obj2的影響。

拷貝就是采用的遞歸：

1 function copy(obj) { 2 var newObj = {} 3 4 for (var key in obj) { 5 newObj[key] = obj[key] 6 } 7 return newObj; 8 9 } 10 var obj4 = copy(obj3); 11 obj3.a = 18; 12 console.log(obj3)//{a:18} 13 console.log(obj4)//{a:20} 通過這種拷貝的形式，就會使得不會相互影響，脫離的“引用問題”干擾。 模擬一個淺拷貝 function deepCopy(obj) {//終止條件，當不是{key：value}對象時if (typeof obj != 'object') {return obj;}var newObj = {}for (var key in obj) {newObj[key] = deepCopy(obj[key]);//“遞”次調用，最后”歸“一 }return newObj;}var obj8 = deepCopy(obj7);obj7.a.b.c = 18;console.log(obj7);//{ a: { b: { c: 18 } } }console.log(obj8); //{ a: { b: { c: 15 } } } 模擬一個深拷貝

自己模仿一個擴展。

1 function Bird() { 2 this.wing = 2; 3 this.fly = function () { 4 alert("fly"); 5 } 6 } 7 Bird.kuozhan = Bird.prototype.kuozhan = function (obj) { 8 for (var key in obj) {//{a:5,b:10} 9 this[key] = obj[key] 10 } 11 return this; 12 } Bird.kuozhan=Bird.prototype.kuozhan =function（）{} 1 //函數：既是方法，又是變量，還是對象。那么函數肯定有屬性、方法 2 //擴展靜態方法 3 //var Bird= function () { 4 5 function Bird() { 6 this.wing = 2; 7 this.fly = function () { 8 alert("fly"); 9 } 10 } 11 Bird.say = function () { 12 alert('say'); 13 } 14 Bird.run = function () { 15 alert('run'); 16 } 17 // Bird.fly();//這里出現錯誤,只能其實例調用 18 var bird = new Bird(); 19 bird.fly(); 20 21 Bird.say();//say 22 Bird.run();//run 23 //對一個方法對象擴展同時擴展多個方法（自己調用），更為方便的寫法 24 //看一些框架中，把擴展的多個方法弄成一個對象，整體做參數，傳進去，就把這個參數對象的方法一個一個擴展到原來對象上去了。就類似 25 //{fun1：function(){},fun2：function(){},fun3：function(){}},然后一自動對齊，顯得逼格十足。 26 //要實現這點，下部如何將一個對象的方法一個一個擴展到原來對象上去呢？是的，我們就寫出這個擴展方法。少用“=”，多用“：” 27 28 Bird.kuozhan = Bird.prototype.kuozhan = function (obj) { 29 for (var key in obj) {//{a:5,b:10} 30 this[key] = obj[key] 31 } 32 return this; 33 } 34 Bird.kuozhan({ 35 s: function () { 36 alert('1'); 37 }, 38 r: function () { 39 alert('2'); 40 } 41 }) 42 Bird.s(); 43 Bird.r(); 44 Bird.prototype.kuozhan({ 45 m: function () { 46 alert('m'); 47 }, 48 n: function () { 49 alert('n'); 50 } 51 }) 52 var b = new Bird(); 擴展使用

五，繼承注意

?

1 /*引用的問題*/ 2 /*********************************************************************/ 3 /*數組*/ 4 var a=[1,2,3]; 5 var b=a; 6 //a.push(4);//修改的問題 7 b.push(4);//修改的問題 8 console.log(a);//[1,2,3,4] 9 console.log(b);//[1,2,3,4] 10 11 12 var a=[1,2,3]; 13 var b=a; 14 //=等號 ：重開辟新空間重新賦值 開辟新空間導致 就不會再存在引用類型修改的問題 15 a=[7,8,9] 16 console.log(a);//[7,8,9] 17 console.log(b);//[1,2,3,4] 18 19 /*********************************************************************/ 20 /*object*/ 21 var obj1={name:"老李"}; 22 var obj2=obj1; 23 obj2.name="老王" 24 console.log(obj1);//{name:"老王"} 25 console.log(obj2);//{name:"老王"} 26 27 var obj1={name:"老李"}; 28 var obj2=obj1; 29 30 obj2={haha:"笑哈哈"} 31 console.log(obj1);{name:"老李"} 32 console.log(obj2);{haha:"笑哈哈"} 33 34 /*********************************************************************/ 35 /*特殊的方法，不能修改*/ 36 var a=function(){alert('qqqqq')} 37 var b=a; 38 //函數只能= 函數不能修改，不存在修改的問題 39 b=function(){alert('wwww')} 40 a();//qqqqq 41 b();//wwww 數組、Object、function，修改、重新賦值的問題

?

?

?

?

?

function Person(name, age) {this.name = name;this.age = age;this.aler = function () {alert(1);}}Person.prototype = {//因為prototype是對象，可以寫成無序鍵值對sayHi: function () { alert('sayhi'); },sayHello: function () { alert('sayhello'); }}function student(sname, sage) {// Person.call(this, sname, sage);//we }//student.prototype = Person.prototype;student.prototype = new Person();student.prototype.constructor = student;var stu1 = new student();stu1.aler();stu1.sayHi();stu1.sayHello(); 繼承勿忘修正構造函數指向

//student.prototype = Person.prototype;
student.prototype = new Person();//可以來個”父類“實例，因為原型鏈
student.prototype.constructor = student;//上面的代碼已經破壞了原型的構造指向，勿忘修改。

轉載于:https://www.cnblogs.com/leee/p/4791364.html

總結

以上是生活随笔為你收集整理的jQuery中的几个模块总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。