js+面向对象相关笔记（七）

1.代码进行压缩处理的时候，系统的内置对象无法进行压缩，如果想压缩的话，只能通过传递参数的方式来进行压缩处理。


2.沙箱模式
◆【
(function(w){
//变量的定义


//逻辑的代码


//如果需要，使用window向外界暴露接口


//window==w


})(window)


】


3.上下文调用模式
◆call apply，你想将函数中的this变成谁，就把谁作为方法的第一个参数，当方法中的第一个参数为null时，和传递一个window对象是一样的效果【
function foo(){
console.log(this);
}
var obj={
name:"zs"
};


foo.call(obj);
foo.apply(obj);
】
◆当使用call和apply传入值类型的变量时，会将值类型转换为对应的的对象（引用类型），然后赋值给this，当传入的第一个参数为null，或者undefined的时候，会将this赋值为window【
function test(){
console.log(this);
}
test.apply(1);//Number类型的对象
test.apply("abc");//String类型的对象
test.apply(true);//Boolean类型的对象
test.apply(undefined);//Window类型的对象
test.apply(null);//Window类型的对象
】


4.js中简单继承的方式
◆借用构造函数【
function Person(){
this.name="张莎";
this.age=18;
}
function Student(){
var stu=this;
Person.apply(stu);//这样就调用了构造函数Person，并且动态的给stu增加了两个属性，name和age，使用了js中对象的动态特性
}
var student=new Student();
console.log(student);//{name:"张莎","age":18}
】
◆替换原型也能够简单实现继承
★借用构造函数，只能够借构造函数中的属性和方法，并不能借构造函数中原型中的属性和方法




5.事件的三个阶段
◆1.捕获阶段：从外向内
◆2.目标阶段：找到了触发事件的元素
◆3.冒泡阶段：从内往外
◆addEventListener(事件类型,事件处理函数,useCaptrue);，当useCaptrue为true时，事件就会以捕获阶段的方式触发，也就是从外向内的触发，反之为false的话，事件就会以冒泡阶段的方式触发，从内往外地触发。


6.注册事件的兼容性处理
◆普通兼容性处理，每使用一次都需要进行判断【
function registeEvent(element,eventType,handler){
if(element.addEventListener){
element.addEventListener(eventType,handler);
}else if(element.attachEvent){
element.attachEvent("on"+eventType,handler);
}else {
element["on"+eventType]=handler;
}
}
//每次调用这个方法，都会进行判断
registeEvent("div","click",function(){
alert("每次注册事件就调用这个方法，都会进行判断");
});
】
◆对普通兼容性处理进行优化，只需要判断一次即可【
function createEvent(){
if(window.addEventListener) {
return funtion(element,eventType,handler){
element.addEventListener(eventType,handler);
};
}else if(window.attachEvent) {
return funtion(element,eventType,handler){
element.attachEvent("on"+eventType,handler);
};
}else {
return funtion(element,eventType,handler){
element["on"+eventType]=handler;
};
}
}
//只需要判断一次就能够获取指定的绑定事件的方法
var registeEvent=createEvent();
registeEvent("div","click",function(){
alert("每次注册事件就调用一个这样的方法");
});
】


7.注册事件的兼容性注意
◆on+eventType事件中的this指向的是绑定该事件的元素
◆attachEvent事件中的this指向的是window对象
◆addEventListener事件中的this指向的是该绑定事件的元素
◆所以注册事件的兼容写法中的这段代码要修改【else if(window.attachEvent) {
return funtion(element,eventType,handler){
element.attachEvent("on"+eventType,handler);
};
}
改成
else if(window.attachEvent) {
return funtion(element,eventType,handler){
element.attachEvent("on"+eventType,function(){
//调用handler的时候将this对象替换成绑定该事件的元素
handler.call(element,window.event);
});//attacEvent不会主动传递event，所以需要你手动传递这个参数，既事件对象
};
}
】
◆

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247773.html