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();
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

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

深入理解js面向对象之继承

先前整理过js作用域和this关键字的用法,以及分析过js面向对象各种方式,这些都是实现js面向对象所必须的。忘记的话看这里:js面向对象 首先来分析一下js中实现面向对象的重要成员protot...
  • u012545279
  • u012545279
  • 2013年10月23日 13:33
  • 1206

深入javascript面向对象,js的原型链、继承

进阶面向对象——————————————————————–在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象——————————————————————–基本类型...
  • u014420383
  • u014420383
  • 2015年08月15日 08:57
  • 1224

JavaScript中 apply/call 与面向对象语言中继承关系的联系和区别

apply是否可理解为类的继承?
  • sinat_27088253
  • sinat_27088253
  • 2016年10月24日 17:06
  • 585

java-面向对象编程-三大特性之继承

面向对象的编程语言,拥有三大特性,分别是:“继承”,“多态”,“封装”。这三个特性贯穿了面向对象编程语言的方方面面,也是区别于面向过程语言的三个标志。所以,掌握这三个特性,将有助于你在学习面向对象编程...
  • dengminghli
  • dengminghli
  • 2017年01月15日 21:36
  • 1260

JavaScript的继承与多继承

虽然最新的EC6里边已经有了class的相关功能,但是从普及度上和阅读旧代码需求的方面来看,这点知识也得了解一下。 本文结构: 原理及分析 简单封装后的运用 1.继承1.1原理及分析先上一张图:用这段...
  • FangboC
  • FangboC
  • 2016年01月24日 20:33
  • 329

Javascript 进阶 面向对象编程 继承的一个例子

Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承。 1、...
  • lmj623565791
  • lmj623565791
  • 2014年06月07日 17:56
  • 20664

13-14-15-16-面向对象、继承、封装、struct和class

1、2、3、4、5、6、7、8、9、10、#ifndef _OPERATOR_H_ #define _OPERATOR_H_class Operator { private: char mOp...
  • zy13270867781
  • zy13270867781
  • 2017年10月26日 17:07
  • 83

JavaScript 面向对象之 this 关键字详解

js面向(基于)对象编程——类(原型对象)与对象 this—问题提出 在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性(比如:当我们创建一个Pers...
  • u013372487
  • u013372487
  • 2015年10月09日 16:43
  • 1430

JAVA面向对象 类的继承

本页面更新日期: 2016年07月30日前言 继承是面向对象的三大特征之一. 也是实现软件复用的重要手段. Java继承具有单继承的特点, 每个子类只有一个直接父类. 继承的特点 ...
  • tmdlife
  • tmdlife
  • 2016年07月26日 20:10
  • 1373
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript基础(十一)---- 面向对象的继承方法
举报原因:
原因补充:

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