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();
变量,函数声明的习惯。常出现的错误

相关文章: