JS之继承
拷贝继承
function CreatePerson(name,sex){
this.name=name;
this.sex=sex;
// 这里的this指向的是window,将传入参数的name和sex上传到浏览器window保存,变成全局
}
CreatePerson.prototype.show=function(){
console.log('我是'+this.name)
}
var zhangsan=new CreatePerson('zhangsan','男')
//创建另个一个类
function CreateSuper(name,sex){
/* this.name = name;
this.sex = sex; */
// 构造继承 只能继承类的属性和方法 不能继承原型
CreatePerson.call(this,name,sex)
}
extend(CreateSuper.prototype,CreatePerson.prototype)
var huangxiaoming = new CreateSuper('黄晓明','男');
console.log(huangxiaoming.name)
huangxiaoming.show();
// 3.创建学生类
function CreateStudent(name,sex){
CreatePerson.call(this,name,sex)
}
extend(CreateStudent.prototype,CreatePerson.prototype)
var xiaohong = new CreateStudent('小红','女');
xiaohong.show()
// 浅拷贝继承 深拷贝继承 继承引用类型
function extend(obj1,obj2){
for(attr in obj2){
obj1[attr] = obj2[attr];
}
}
原型继承
<script>
function Super(){
this.name='小红'
}
Super.prototype.sayName=function(){
console.log('我叫:'+this.name)
}
function Sub(){
this.name='李四'
}
//原型继承
Sub.prototype=new Super();
//可以将super的实例所有属性和方法继承到sub中
var sub=new Sub();
console.log(sub);
// 显示了Sub所有的属性和super的所有属性
sub.sayName();
// 我叫'李四',此时的this指向了Sub
</script>
事件监听
<script>
var btn = document.getElementById('btn');
// 1.传统事件绑定 绑定同一个事件 同一个元素 下面的会将上面的事件进行覆盖
/* btn.onclick = function(){
alert('aaa')
}
btn.onclick = function(){
alert('bbb')
}
btn.onclick = function(){
alert('ccc')
}
//最终显示的是ccc
btn.onclick = null; */
// 2.事件侦听 下面不会覆盖上面的
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
alert('aaa')
})
btn1.addEventListener('click',function(){
alert('bbb')
})
btn1.addEventListener('click',function(){
alert('ccc')
}
//最终显示的是ccc,bbb,aaa
removeEventListener()
// 兼容性 ie9以下 先出来bbbb 再出来aaa
btn.attachEvent('onClick',function(){
alert('aaa')})
btn.attachEvent('onClick',function(){
alert('bbb')})
// 造一个轮子
function EventListener(element,eventName,fn){
if(element.addEventListener){
element.addEventListener(eventName,fn)
}else if(element.attachEvent){
element.attachEvent("on"+eventName,fn)
}else{
element['on'+eventName] = fn;
}
}
function fn(){
alert(8899)
}
EventListener(btn1,'click',fn)
</script>