• javascript创建对象的方法--动态原型模式


    javascript创建对象的方法--动态原型模式

    一、总结

    1、作用:解决组合模式的属性和函数分离问题 

    2、思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数的方式

    二、javascript创建对象的方法--动态原型模式

    动态原型方法

    动态原型方法的基本想法与混合的构造函数原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。

    组合模式中实例属性与共享方法(由原型定义)是分离的,这与纯面向对象语言不太一致;动态原型模式将所有构造信息都封装在构造函数中,又保持了组合的优点。

    其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性,如果没有则定义,否则不再执行定义过程。该方式只原型上方法或属性只定义一次,且将所有构造过程都封装在构造函数中,对原型所做的修改能立即体现所有实例

    三、代码

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>课堂演示</title>
     6 </head>
     7 <body>
     8   <script>
     9 //构造函数和原型组合模式
    10     //  function Monster(name,arr){
    11     //     constructor: Monster, 
    12     //     this.name=name
    13     //     this.job=arr
    14     //  } 
    15     // Monster.prototype={
    16     //   run:function() {return this.name+'的工作是'+this.job }
    17     // } 
    18     // var monsterI=new Monster('小旋风',['巡山','打更','砍柴'])
    19     // var monsterII=new Monster('小钻风',['巡山','打更','挑水'])
    20     // alert(monsterI.run())
    21     // alert(monsterII.run())
    22 //动态原型模式
    23  function MonsterGo(name,arr){
    24     this.name=name
    25     this.job=arr 
    26     if (typeof this.run!= "function") 
    27     // {alert('对象初始化')
    28         MonsterGo.prototype.run=function(){
    29           return this.name+'的工作是'+this.job 
    30         }
    31         // alert('初始化结束')
    32     }
    33  } 
    34  var monsterI=new MonsterGo('小旋风',['巡山','打更','砍柴'])
    35  var monsterII=new MonsterGo('小钻风',['巡山','打更','挑水'])
    36 var monsterI2=new MonsterGo('小旋风',['巡山','打更','砍柴'])
    37  var monsterII2=new MonsterGo('小钻风',['巡山','打更','挑水'])
    38   // alert(monsterI.run())
    39   // alert(monsterII.run())
    40   </script>
    41 </body>
    42 </html>

    1、重要:第26行,如果共用属性或者方法(就是原型模式定义的,第28-30行)定义了的话,就不再初始化

  • 相关阅读:
    KnockoutJS(2)-监控属性
    KnockoutJS(1)-数据模型
    Stimulsoft Reports报表工具
    Knockout.js 初探
    web网页的表单排版利器--960css
    用一个div模拟textarea的实现
    正则表达式笔记4-封装class
    正则表达式笔记3
    正则表达式笔记2
    正则表达式笔记1
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8994295.html
Copyright © 2020-2023  润新知