JS继承和监听

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>