对于原生js几种简单模式的浅究

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="box"></div>


       <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
       <script>
           $(function(){
       //--------------------------模式一：面向对象编程ES5 类 start-----------------------------------------

               //父类
               function Witdt(   width,height ){

                   this.width = width||50;
                   this.height = height||30;
                   this.$el = null;//标签初始化

               };


               //定义父类的方法
               Witdt.prototype.fRender = function( $where ){
                   if( this.$el ){
                       this.$el.css({
                           width:this.width + 'px',
                           height:this.height + 'px'
                       }).appendTo($where)
                   }
               };



               //子类
               function Buttens( width,height,text ){
                   Witdt.call( this,width,height );//这个call很关键直接将父类中的this全部指向了子类从而使得子类能调用父类属性和方法也能使得父类预先使用子类定义的属性和方法
                   this.TEXT = text||'butten';
                   this.$el = $('<button>').text(this.TEXT);
               };

//               Buttens.prototype = Object.create( Witdt.prototype );

               //子类重写父类的fRender方法并添加一些自己的特有功能逻辑
               Buttens.prototype.fRender = function( $where ){
                   Witdt.prototype.fRender.call( this,$where );

                   console.log("我被调用了");
               };

               var B1 = new Buttens( 120,50,"按钮1" );//创建实例对象

               B1.fRender($("#box"))//调用封装的方法并传递要挂载的父节点

       //--------------------------模式一：面向对象编程ES5 类 end-----------------------------------------


       //--------------------------模式一：面向对象编程ES6 类 start-----------------------------------------
           //定义父类
           class Witdt {
               constructor( width,height ){
                   this.width = width||50;
                   this.height = height||30;
                   this.$el = null;//标签初始化
               }
               //注意在es6中类函数中不需要加标点符号
               fRender( $where ){
                   if( this.$el ){
                       this.$el.css({
                           width:this.width + 'px',
                           height:this.height + 'px'
                       }).appendTo($where)
                   }
               }
           }

           class Buttens extends Witdt {
               constructor( width,height,text ){
                   super( width,height )
                   this.TEXT = text||'按钮';
                   this.$el = $("<button>").text( this.TEXT );
               }
               fRender( $where ){
                   super.fRender( $where )
               }

           }

           var B1 = new Buttens( 120,50,"按钮1" );//创建实例对象

               B1.fRender($("#box"))//调用封装的方法并传递要挂载的父节点

           /*
           * 其实es6中的class底层还是应用的原型链来实现的继承方式，与java等其他语言的class还是有很大区别的这里的constructor就相当于java中的构造函数 super一样可以代表父类中this
           */
       //--------------------------模式一：面向对象编程ES6 类end-----------------------------------------


       //--------------------------模式二：对象关联编程也可以实现以上继承效果 start-----------------------------------------

           //定义一个父级对象
           var Witdt = {
               init:function( width,height ){
                   this.width = width||50;
                   this.height = height||30;
                   this.$el = null;//标签初始化
               },
               append:function( $where ){
                   if( this.$el ){
                       this.$el.css({
                           width:this.width + 'px',
                           height:this.height + 'px'
                       }).appendTo($where)
                   }
               }
           }

           //利用object.create()方法创建一个新对象并将Witdt的原型赋给新变量Butten1

           var Butten1 = Object.create( Witdt );//此时Butten1就相当于通过prototype继承了Witdt中的属性和方法并改变了this指向

           //定义对象Butten1特有的方法
           Butten1.setInit = function( width,height,text ){
               this.init( width,height );//这里的this指向的是Butten1 虽然它没有定义init方法但是他会沿着他继承的原型链向上找到Witdt的init方法并调用
               this.TEXT = text;
               this.$el = $("<button>").text( this.TEXT );
           };

           Butten1.insert = function( $where ){
               this.append( $where );
           }

           var B1 = Object.create( Butten1 );//创建实例对象

               B1.setInit( 120,50,"按钮1" )//调用封装的方法并传递要挂载的父节点
               B1.insert( $("#box") )



       对比这几种模式我们可以看到,对象关联比较简单但是没有继承那么明显的关系 Object.create()起的作用非常大

       //--------------------------模式二：对象关联编程 end-----------------------------------------
})
       </script>
   </body>
</html>

对于原生js几种简单模式的浅究

猜你喜欢