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_06面向对象程序设计(原型【九】)模拟extjs底层继承方式

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

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