JavaScript基础(十一)---- 面向对象的继承方法

原创 2017年07月16日 23:36:31

1. 原型链的继承

把父类私有+公有的属性和方法,都给了子类公有的;(让子类.prototype=父类的实例)

例子:

function F(){
        this.x=100;  //父类私有
    }
    F.prototype.showX=function(){};   //父类公有的;

    function S(){
        this.y=200;   //子类私有
    }
    S.prototype=new F;  //核心:把父类私有+公有的属性和方法,都作为子类公有的属性和方法;
    S.prototype.constructor=S;//修改S的constructor指向;
    var s=new S;
    console.dir(s);

2. call继承

把父类私有的属性和方法,给了子类私有的属性和方法;(注意:通过call改变this指向)

例子:

    // call()中第一个参数:用来改变this指向
    //call()中从第二个参数开始,相当于给call点前面的函数,从左往右一个个的传参;

    //注意:call继承只跟父类私有属性和方法有关,跟父类公有的方法没有关系;
    function F(){
        //this指向F的实例;
        this.x=100;//父类私有的
        this.showX=function(){
            alert(this.x);
        }
    }
    var f=new F;
    console.dir(f);
    function S(name){//子类构造函数中,都放的是私有的属性和方法;
        //this-S的实例
        F.call(this);//F中的this-F new出来的实例
        this.y=200;
        this.name=name;
    }
    var s=new S('aaa');
    console.dir(s);

3. 冒充继承

把父类私有+公有的属性和方法,都给了子类私有的;

例子:

function F(){//父类私有的
        this.x=100;
    }
    F.prototype.showX=function(){};
    F.prototype.showY=function(){};
    var f=new F;
    function S(){
        //this-S的实例;
        var f=new F;
        for(var attr in f){
            this[attr]=f[attr];
        }
        this.aa=123;
    }
    var s=new S;
    console.dir(s);

4. 混合继承1: call继承+原型链继承

call继承:在子类的构造函数中继承,一定要改变this指向;(通过call);

    function F(){//私有
        this.x=100;
    }
    F.prototype.showX=function(){};//公有
    var f=new F;
    console.dir(f);

    function S(){//call继承在子类的构造函数中进行继承;
        F.call(this);//call继承
    }
    //原型链继承在子类的prototype上进行继承
    S.prototype=new F;//原型链继承;
    S.prototype.constructor=S;
    S.prototype.aaa='123';
    var s=new S;
    console.dir(s);

5. 混合继承2: call继承+拷贝继承;

拷贝继承:extend(新对象,old对象);

    function extend(obj2,obj1){
        for(var attr in obj1){
            obj2[attr]=obj1[attr];
        }
        return obj2;
    }
    //混合继承2:call继承+拷贝继承
    function F(){
        this.x=100;
    }
    F.prototype.showX=function(){};

    function S(){
        F.call(this);//call继承
    }
    //拷贝继承:克隆一份一模一样的;
    extend(S.prototype, F.prototype);
    var s=new S;
    console.dir(s);

6. 寄生式组合继承:call继承+Object.create()的思想;

function F(){//父类私有的
        this.x=100;
    }
    F.prototype.showX=function(){} //父类公有的;

    //找一个中间类,只把公有的过滤进来;
    function Tmp(){}; //没有私有的属性和方法
    Tmp.prototype=F.prototype; //Tmp只保留了F类公有的方法;

    function S(){
        F.call(this);//call继承:把F私有的属性和方法继承过来了;
    }
    S.prototype = new Tmp;//S.prototype这个原型就相当于tmp的实例;就可以享用Tmp私有+公有的方法;但是我们知道,Tmp没有私有方法;只有公有方法;
    S.prototype.constructor=S;
    var s=new S;
    console.dir(s);

7. 批量操作公有属性,可以用{};

用{}的时候,一定要注意两点:
1. constructor会有问题,我们一定要重写constructor的指向;
2. 系统内置类的公有方法不能批量删除,这是浏览器对系统内置类的自我保护;所以,如果想删除的话,只能一个个的删除;

例子 — 删除公有属性:

Array.prototype.pop={};
Array.prototype.push={};
Array.prototype.shift={};

例子 – 给数组添加一个公有的去重方法

    Array.prototype.rmSame=function(){
        //this--ary数组
        var obj={};//如果对象中没有,给对象添加,如果有了,说明数组中重复了,删除这一项,同时预防数组塌陷;
        for(var i=0; i<this.length; i++){
            var cur=this[i];
            if(obj[cur]===cur){
                this.splice(i,1);
                i--;
            }else{
                obj[cur]=cur;
            }
        }
        return this;//去重后的数组;预告:为了链式操作;
    };
    ary.rmSame();
    ary2.rmSame();
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csdnwyn314/article/details/75213180

面向对象三种方法实现继承的优缺点,及改进

function Shape() {} function Rect() {} // 方法1 Rect.prototype = new Shape(); // 方法2 Rect.prototype...
  • baidu_38492440
  • baidu_38492440
  • 2017-05-17 21:08:39
  • 512

Unity3D之Legacy动画系统学习笔记

Unity3D的Mecanim动画系统是非常强大的,而且作为Unity推荐的动画系统,其未来会完全代替老的一套动画系统,即Legacy动画系统。目前的情况是Mecanim与Legacy两套动画系统同时...
  • cbbbc
  • cbbbc
  • 2017-03-06 17:38:43
  • 186

【HTML5】3D模型--百行代码实现旋转立体魔方

最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。下面是测试链接和预览画面。http://lufy.netne.net...
  • lufy_Legend
  • lufy_Legend
  • 2012-06-12 01:42:35
  • 33561

javascript 的 apply实现继承

小生初学js,如果有什么错误的地方,还请大家见谅,还请大家指出. apply()是Function()里的一个函数,主要功能我们下面再讲,我第一次用apply()的时候也是稀里糊涂的,后来我发现它其...
  • HaoDaWang
  • HaoDaWang
  • 2016-08-05 13:39:01
  • 802

JavaScript如何实现面向对象和继承机制?

JavaScript实现面向对象?  function MyObject() {    this.name="myobject";    this.type="class";    this.meth...
  • u012575451
  • u012575451
  • 2016-10-02 13:23:23
  • 821

天轰川 推荐的Javscript大收集 大集锦

天轰川(田洪川)  一个中国人   一个四川人  一个剃了眉毛将 .NET 拉下神坛的人   一堆视频 的影响力 超过微软过亿的推广方案   他用执着诠释着人性化科技的含义  功勋着著   不过一个行...
  • txl816
  • txl816
  • 2008-08-01 09:46:00
  • 2920

HTML5新特性浅谈

2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时...
  • Gane_Cheng
  • Gane_Cheng
  • 2016-10-17 21:25:58
  • 21172

面向对象在javascript中的三大特征之继承

继承 在JavaScript中的继承的实质就是子代可以拥有父代公开的一些属性和方法,在js编程时,我们一般将相同的属性放到父类中,然后在子类定义自己独特的属性,这样的好处是减少代码重复。继承是面向...
  • Tyro_java
  • Tyro_java
  • 2016-04-18 20:10:57
  • 1224

JAVA经典面试题(二)--如何体现JavaScript的继承关系?

js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承)由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用j...
  • JacXuan
  • JacXuan
  • 2017-04-11 15:28:54
  • 28161

循环展示图片(画中画效果)CANVAS2.0版

循环展示图片(画中画效果)CANVAS2.0版 之前设计的一版在测试当中有点问题,PC端测试是没有问题的,但在手机上访问时,切屏时就出现闪屏(本就出现的大图没有出现,是之前的小图突然变大,一闪而过,然...
  • qq_16494241
  • qq_16494241
  • 2017-07-07 11:12:31
  • 670
收藏助手
不良信息举报
您举报文章:JavaScript基础(十一)---- 面向对象的继承方法
举报原因:
原因补充:

(最多只允许输入30个字)