美文网首页
js 集成模式 07-24

js 集成模式 07-24

作者: 小老虎丶冷心 | 来源:发表于2018-08-26 10:43 被阅读0次

**
原始继承模式--原型链

      过多的继承了没有用的属性

2:借用构造函数

      不能借用构造函数的原型

     每次借用构造函数都要多走构造函数

3:共享构造原型

   不能随便改造自己的原型   

4:圣杯模式
**
一:原型链;

<script>
            
            Grand.prototype.lastName='jx';
            function Grand(){
                
            }
            var grand= new Grand()
            Father.protptype=grand;
            function Father (){}
            var father=new Father()
            Son.prototype=father;
            
            function Son(){}
            var son=new Son();
            
            
    </script>


二:构造函数;

 <script type="text/javascript">
            function Person(name,age,sex){
                this.name=name;
                this.age=age;
                this.sex=sex;
            }
            function Student(name,age,sex,grade){
                Person.call(this,name,age,sex){
                    this.grade=grade;
                }
            }
            var student=new Student()
        </script>

三:共享原型;

 <script type="text/javascript">
            Father.prototype.name='deng';
            function Father(){
                
            }
            function Son(){
                
            }
            Son.prototype=Father.prototype;
            var son=new Son();
            var father= new Father();
        </script>
    
 inherit
<script type="text/javascript">
            Father.prototype.lastName='yang';
            function Father(){
                
            }
            function Son(){
                
            }
            function inherit(Target,Origin){
                Target.prototype=Origin.prototype;
            }
            inherit(Son,Father);//不能写在var son =new Son();之后,否则不能继承
              var son =new Son();
        
        </script>
以上的这个方法如果给他添加儿子新的属性,如下图,父亲也会同样继承,以为他们都是指向同一个原型,所以为了避免这种情况,进行如下修改

四:圣杯模式

<script type="text/javascript">
            function inherit(Targer,Origin){
                function F(){}
                    F.prototype=Origin.prototype;
                    Targer.prototype=new F();
                }   
                Father.prototype.name='deng';
                function Father(){
                    
                }
                function Son(){
                    
                }
            inherit(Son,Father);
            var son=new Son();
            var father=new Father();
              
 
        </script>

圣杯模式的最终代码

<script type="text/javascript">
            function inherit(Targer,Origin){
                function F(){}
                    F.prototype=Origin.prototype;
                    Targer.prototype=new F();
                    Target.prototype.constructor=Target;//调回他自己
                    Target.prototype.uber=Origin.prototype;//知道谁调用它
                }   
                Father.prototype.name='deng';
                function Father(){
                    
                }
                function Son(){
                    
                }
            inherit(Son,Father);
            var son=new Son();
            var father=new Father();
              
 
        </script>

相关文章

  • js 集成模式 07-24

    **原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式**一:原型链; 二:构造函数; 三:...

  • 07-24 js习题

    1.在数组 arr 末尾添加元素 item。不要直接修改数组 arr,结果返回新的数组例如:[1, 2, 3, 4...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • React-redux学习记录

    插件集成 目录结构 上代码 store.js types.js reducers.index.js reducer...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(七-完结)

    标签:JS 设计模式 其他读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

  • 《JS设计模式》读书笔记(三)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

网友评论

      本文标题:js 集成模式 07-24

      本文链接:https://www.haomeiwen.com/subject/daaniftx.html