自己封装jquery相关笔记(一)

1.复习jQuery的常用方法,复习js原生的方法,了解jQuery的大概实现,锻炼编码能力。


2.jquery对外暴露的两个方法:jQuery和$,这两种方式实际上是同一个方法,通过调用这两个方法,可以得到一个jQuery实例对象
◆jQuery实例对象是一个伪数组对象【
//验证实例是伪装数组对象
console.log(({}).toString.call ($("<div></div>")));//[object Object]

◆jQuery和$实际上是一个工厂函数。
◆jQuery脱离了浏览器就没有window了,window只有在浏览器中才有的。
◆jQuery.fn=jQuery.prototype={} ,jQuery.fn就是jQuery.prototype,并且也替换成其它新的对象了(对象字面量),jQuery.fn还比jQuery.prototype少几个字母,好处是简写了。
◆jQuery.fn.init才是jQuery中真正的构造函数,任何函数都可以是构造函数,只要你new它。
◆jQuery.fn.init.prototype=jQuery.fn,也就是jQuery.fn.init的原型为jQuery工厂函数的原型【
◇之所以让jQuery.fn.init等于jQuery.fn,是因为jQuery.fn.init是jQuery中真正的构造函数,所以如果自己使用jQuery.fn来添加方法或者属性,那么任何一个jQuery实例对象(伪数组对象)都可以使用自己添加的这个方法或者属性了。
◇jQuery插件实现机制就是如此,给jQuery.fn添加一些功能方法,也就是给jQuery实例对象扩展一些功能和方法。
◇jQuery.fn.init.prototype、jQuery.fn、jQuery.prototype都是共享一个{}(对象字面量的)的,这三个变量的地址都是一样的,只不过是变量名不同罢了,引用类型传递的是地址。
】。


3.Object.prototype.toString:作用是根据内部的this返回一个类似于这样的字符串'[object constructorName]'
◆这个方法有个缺点,不能获取用户自定义对象的的具体类型,只能够获取内置对象的具体类型
◆获取自定义对象的具体类型,可以使用对象.__proto__.constructor.name来直接获取,也能够获取内置对象的具体类型。
◆构造函数和函数的类型是Function,也就是说构造函数和函数都是Function的实例化对象,Function的类型还是是Function,new Fucntion()的类型也是Function,但是Function.protype.__proto__的类型是Object。


4.js中{}在赋值给其他变量的时候作为对象,并且如果使用{}的时候用一对小括号括起来({})也会作为对象来使用,当在不赋值的时候和不用小括号括起来的时候{}只表示是一个代码块儿【
//代码块儿
{
var a=0;
console.log(a);
}
//通过运算,把{}转换为字面量
({}).toString();//正确的 字面量可以调用方法
//错误写法
{}.toString();//错误的 代码块儿不能调用方法



5.各种类型的toString方法
◆字符串的toString是String.prototype.toString【
var str1="123";
var str2=new String("123");
str1.toString();//123
str2.toString();//123



◆数组的toString是Array.prototype.toString

var arr1=[1,2,3];
var arr2=new Array(1,2,3);
arr1=.toString();//1,2,3
arr2.toString();//1,2,3

◆对象的toString是Object.prototype.toString

var obj={};
obj.toString();//[object Objects]

◆函数的toString是Function.prototype.toString

Function.toString();//function Function() {native code}
Array.toString();//function Array() {native code}
RegExp.toString();//function RegExp() {native code}



6.获取一个对象的数据类型的原理就是获取它的构造函数
◆用各种方式获取到它的构造函数就可以知道它是个什么类型了。
◆也可以使用instanceof方法来判断是否曾经在某个类型的原型链上,如【
function Arr(){};


    Arr.prototype=[];


    var arr=new Arr();


    arr.push(1);
    arr.push(2);
    console.log(arr);//[0:1,1:2,length:2]


    console.log(arr instanceof Array);//true
    console.log(arr instanceof Object);//true
    console.log(arr instanceof Function);//false 



7.jQuery入口函数根据不同参数创建实例的比较
◆传入null、undefined、0、NAN、''、false、什么都不传

◇返回都是空的jQuery.fn.init的对象

◆传入css选择器【
◇会把获取到的元素,以数组下标的形式存储起来,同时会添加一个length属性来代表已经存储的数量,如{0:div,1:div,length:2}
◇如果没有获取到元素,那么就会返回空的伪数组对象
◇每一个伪装数组对象会有一个preObjec的属性来存取上一个对象,就是这个属性才让jQuery中断链后可以使用end方法来补链。

◆传入html标签字符串片段【
◇会根据这些标签字符串片段创建DOM对象,然后也是根据数组下标的形式存储起来,同时会添加一个length属性来代表已经存储的数量,如:如{0:span,1:span,2:span,length:3}

◆传入数组【
◇会将你传入的数组中的每一项都加到自己的伪数组(jQuery.fn.init实例对象 )中去,如{0:"abc",1:"123",2:"cba",length:3}

◆传入伪数组【
◇会将你传入的伪数组中的每一个成员都加到自己的伪数组(jQuery.fn.init实例对象 )中去,如{0:a,1:a,2:a,3:a,length:4}
◇伪数组对象是有length属性的,所以才能够区分普通对象和伪数组对象,但是window对象和Function对象都有length属性,所以要过滤掉这两个对象

◆传入对象【
◇会将你传入的对象直接添加到自己的伪数组(jQuery.fn.init实例对象 )中去,如{0:(new Date()),1:(new Function()),2:({val:000}),length:3}

◆传入其它基本数据类型【
◇如果非字符串,那么就会被当作为css选择器,所以如果没有获取到元素就会返回空的伪数组对象。
◇如果非字符串,并且非null、undefined、NAN、''、0、false、那么就会被直接添加到伪数组对象中。

◆传入dom对象【
◇直接添加到伪数组对象中。




8.伪数组的特点:
◆必须要有length属性
◆如果length属性值为0,那么这个对象有没有任何元素无所谓
◆如果length属性值不为0,那么这个对象一定有一个(length-1)为下标的属性值。


9.window对象与Function对象,他们都有length属性,但是不是伪数组对象
◆window对象的length属性表示的是页面中iframe的个数。
◆window对象有一个特点,就是window对象有一个window属性(window.window===window),指向自己。
◆Function对象的length属性表示的是函数中的形式参数的个数,函数体中arguments.length才是实际参数的个数。


10.判断是不是伪数组的思路:
◆先把函数和window排除掉
◆然后通过toString来判断是不是真数组,通过instanceof来判断更加准确
◆否则再判断是不是伪数组
◆之后先看看这个对象有没有length属性,如果有,就看看length属性的值是不会为0,如果为0,就是伪数组,如果length的值不为0,那么看看这个数据有没有 length-1 这个属性,如果有,就是伪数组
◆可以把是否真假数组的判断封装为一个函数,直接调用即可


11.数组的分类:
◆真数组:new Array() 或者[] 创建出来的
◆稀疏数组:数组中,某些下标的元素不存在或为空,既为稀疏数组
◆伪数组:实际上是对象,具有数组的简单特征,有length属性


12.数组的方法借用
◆使用数组的push方法或pop等方法,会按照下标的方式添加或移除属性值,并且会自动维护一个length属性,代码如下【
var obj={};
[].push.apply(obj,[8,9,10]);//相当于借用数组的push方法给obj添加8、9、10,并且追加一个length属性
console.log(obj);//{0:8,1:9,2:10,length:3}
[].pop.call(obj);//借用数组的pop方法删除obj中索引值为最后一个的元素
console.log(obj);//{0:8,1:9,length:2}



猜你喜欢

转载自blog.csdn.net/jwllwj_2018/article/details/80621090