欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript_06面向对象程序设计(原型【九】)模拟extjs底层继承方式

程序员文章站 2022-03-04 14:07:21
...
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <script type="text/javascript" charset="UTF-8">
      
      function extend(sub,sup){
          //目的1、需要实现只继承父类的原型对象,
          
          //创建一个空函数,目的进行中转
          var F=new Function();//
          //sup.prototype
          
          F.prototype=sup.prototype;//实现空函数的原型对象和超类的原型对象转换。
          sub.prototype=new F();//原型继承
          
          sub.prototype.constructor=sub;//还原子类的构造器
          //保存一下父类的原型对象,一方面方便解耦,降低耦合性;另一方面,可以方便获得父类的原型对象。
          sub.superClass=sup.prototype;//自定义一个子类的静态属性,接收父类的原型对象。
            
            //判断父类的原型构造器(保险)
            
            if(sup.prototype.constructor==Object.prototype.constructor){
                sup.prototype.constructor=sup;//手动还原父类原型对象的构造器。
                
            }
      }
                
       //混合继承,利用原型继承和借用构造函数继承的方式。
       function Person(name,age){
           this.name=name;
           this.age=age;
       } 
       
       Person.prototype={
           constructor:Person,
           sayHello:function(){
               alert('hello world');
           }
       };
       function Boy(name,age,sex){
           
           
           //call绑定父类的函数,实现借用构造函数继承。只复制了父类的模板。
           Person.call(this,name,age);
           this.sex=sex;
           
       }
       
       //原型继承的方式,即继承了模板,又继承了父类的原型对象。
      // Boy.prototype=new Person();
       
       //extend(sub,sup);
       extend(Boy,Person);
       
       //给子类加了一个原型对象的方法
       Boy.prototype.sayHello=function(){
           alert('hello');
       }
       
       
       var b=new Boy('z3',20,'boy');
       
        alert(b.name);
        alert(b.sex);
        
       b.sayHello();
        //混合继承,确点:总共做了3件事,继承了一次父类的原型对象。      
        //2件事,优点:继承1次父类的模板,继承1次父类的原型对象。
        //extend方法
     
       Boy.superClass.sayHello.call(b);
       // alert(Boy.superClass.constructor);
    </script>
</head>
<body>
    <h1>New Web Project Page</h1>
</body>
相关标签: JavaScript