zoukankan      html  css  js  c++  java
  • js的各种继承

    请先看这个链接:https://segmentfault.com/a/1190000002440502

    还有一个里边有js的采用临时方法的继承 http://javapolo.iteye.com/blog/1996871

    //随后写继承,名字什么的就不记住了
            //1.组合继承(原型链+构造函数)
            //缺点:他的构造函数会被执行两次
            function par(){
                //alert(0) //就是这里会被执行两次
                this .name = "haha";
                this.age = 19;
            }
            par.prototype.run = function(){
                alert(this.name);
            }
            function son(){}
            son.prototype = new par();
            //本人感觉,把run放进this.run中是最好的,但是放原型上至少看起来有原型,但是我感觉这样子和放this上是一样的。
            //2.call和apply实现继承
            function par1(){
                this.name = "hha";
            }
            function son1(){
                par1.apply(this,arguments);
                //par1.call(this);不知道arguments的个数的情况下最好用apply.
            }
            var ss1 = new son1();
            //3.通过一个原型对象 进行继承(对象可以共用这一个原型)
            var box = {
              name : 'trigkit4',
              arr : ['brother','sister','baba']
            };
            function create(box){
                function obj(){}
                obj.prototype = box;
            }
            //4.把一个构造函数当成另一个构造函数的属性
            function par2(param){
                this.name=param || "asf";
            }
            function son2(param){
                this.par = par2;
                this.par(param);
                delete this.par;
                this.run = function(){
                    alert(this.name);
                }
            }
            var ss2 = new son2("ppp");
            ss2.run();
            //5.另一种call方法
            function Parent(firstname)  
            {  
                this.fname=firstname;  
                this.age=40;  
                this.sayAge=function()  
                {  
                    console.log(this.age);  
                }  
            }  
            function Child(firstname)  
            {  
              
                this.saySomeThing=function()  
                {  
                    console.log(this.fname);  
                    this.sayAge();  
                }  
               this.getName=function()  
               {  
                   return firstname;  
               }  
              
            }  
            var child=new Child("张");  
            Parent.call(child,child.getName());  
            child.saySomeThing(); 

    下边的感觉都可以不用看了,感觉没什么用,有点甚至都是错的,以后理解更上一次层次的时候,就删除了后边的东西。

    //原型链继承**********************************************
    //借助已有的对象创建新的对象,将子类的原型指向父类,就相当于加入了父类这条原型链
    //缺点使用原型继承主要由两个问题:一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数。
    
    function Parent(){
      this.name = "bbc";
    }
    Parent.prototype.getName = function(){
      console.log(this.name);
    }
    function Child(){
      this.age="12";
    }
    Child.prototype = new Parent();
    var box = new Child();
    box.getName();
    //缺点一
    Child.prototype = {
      setAge:function(){},
      getAge:function(){}
    }
    //类式继承是在子类型构造函数的内部调用超类型的构造函数
    //缺点不能给父类传参数
    function Super(){
        this.colors=["red","blue"];
    }
    function Sub(){
        Super.call(this);
    }
    var box = new Sub();
    console.log(box.colors);
    //借用构造函数(类式继承)
    //解决了传参的功能,但是没有原型链,所以说不能说继承,因为没有方法的公用
    function Parent(age){
        this.name = ['mike','jack','smith'];
        this.age = age;
    }
    
    function Child(age){
        Parent.call(this,age);
    }
    var test = new Child(21);
    alert(test.age);//21
    alert(test.name);//mike,jack,smith
    test.name.push('bill');
    alert(test.name);//mike,jack,smith,bill
    //组合继承(原型链+借用构造函数) 最常用
    //组合式继承是比较常用的一种继承方法,其背后的思路是 
    //使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。
    //这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性
    //
    组合式继承是js最常用的继承模式,但组合继承的超类型在使用过程中会被调用两次;一次是创建子类型的时候,另一次是在子类型构造函数的内部

    function Parent(age){ this.name = ['mike','jack','smith']; this.age = age; alert("nihao");//为了表示这个构造器执行了两次 } Parent.prototype.run = function () { return this.name + ' are both' + this.age; }; function Child(age){ Parent.call(this,age);//对象冒充,给超类型传参 } Child.prototype = new Parent();//原型链继承 var test = new Child(21);//写new Parent(21)也行 alert(test.run());//mike,jack,smith are both21
    //原型式继承
    //原型式继承首先在obj()函数内部创建一个临时性的构造函数 ,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。
    function obj(o){
       function F(){}
       F.prototype = o;
       return new F();
    }
    var box = {
      name : 'trigkit4',
      arr : ['brother','sister','baba']
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4
    
    b1.name = 'mike';
    alert(b1.name);//mike
    
    alert(b1.arr);//brother,sister,baba
    b1.arr.push('parents');
    alert(b1.arr);//brother,sister,baba,parents
    
    var b2 = obj(box);
    alert(b2.name);//trigkit4
    alert(b2.arr);//brother,sister,baba,parents
    //寄生式继承(原型式+工厂模式)
    //目的是为了封装创建的过程。
    function create(o){
        var f= obj(o);
        f.run = function () {
            return this.arr;//同样,会共享引用
        };
        return f;
    }
    function obj(o){
       function F(){}
       F.prototype = o;
       return new F();
    }
    var box = {
      name : 'trigkit4',
      arr : ['brother','sister','baba']
    };
    create(box);
    //寄生组合继承,解决了两次调用的问题。
    //组合式继承是js最常用的继承模式,但组合继承的超类型在使用过程中会被调用两次;一次是创建子类型的时候,另一次是在子类型构造函数的内部
        function obj(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
        function create(parent,test){
            var f = obj(parent.prototype);//创建对象
            f.constructor = test;//增强对象
        }
    
        function Parent(name){
            this.name = name;
            this.arr = ['brother','sister','parents'];
        }
    
        Parent.prototype.run = function () {
            return this.name;
        };
    
        function Child(name,age){
            Parent.call(this,name);
            this.age =age;
        }
    
        inheritPrototype(Parent,Child);//通过这里实现继承
    
        var test = new Child('trigkit4',21);
        test.arr.push('nephew');
        alert(test.arr);//
        alert(test.run());//只共享了方法
    
        var test2 = new Child('jack',22);
        alert(test2.arr);//引用问题解决

     一下的连个继承自己理解吧

    function Parent(firstname)  
    {  
        this.fname=firstname;  
        this.age=40;  
        this.sayAge=function()  
        {  
            console.log(this.age);  
        }  
    }  
    function Child(firstname)  
    {  
        this.parent=Parent;  
        this.parent(firstname);  
        delete this.parent;  
        this.saySomeThing=function()  
        {  
            console.log(this.fname);  
            this.sayAge();  
        }  
    }  
    var mychild=new  Child("");  
    mychild.saySomeThing();  
    function Parent(firstname)  
    {  
        this.fname=firstname;  
        this.age=40;  
        this.sayAge=function()  
        {  
            console.log(this.age);  
        }  
    }  
    function Child(firstname)  
    {  
      
        this.saySomeThing=function()  
        {  
            console.log(this.fname);  
            this.sayAge();  
        }  
       this.getName=function()  
       {  
           return firstname;  
       }  
      
    }  
    var child=new Child("");  
    Parent.call(child,child.getName());  
    child.saySomeThing(); 

    //我们最注意的问题是为什么方法中的方法this没有指向window呢,因为这里的this已经是一个对象了,等于是对象的方法,对象的方法this自然指向对象本身。

  • 相关阅读:
    :nth-child :nth-type-of用法详解
    hosts修改备份
    微信小程序 报警告的解决办法
    微信小程序 body属性的问题
    关于微信小程序post请求数据的坑
    在做展开功能的时候,字体变多了,字体会变大的bug的解决方案
    关于微信小程序并发数不能超过五个的问题
    单行文本省略号与多行文本省略号的实现
    js数据类型判断
    表格td标签在不添加多余标签的情况下实现文本内容单行显示,多余部分省略号表示的方法
  • 原文地址:https://www.cnblogs.com/coding4/p/5446028.html
Copyright © 2011-2022 走看看