当前位置:编程学习 > JS >>

JS继承简介

1、简介
      在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字 即可。在JS中想要达到继承公用成员的目的,需要采取一系列措施。JS属于原型式继承,得益于这种灵活性,我们既可以使用标准的基于类的继承,也可以使用 更微妙一些的原型式继承。在JS中应该要明确一点,一切继承都是通过prototype来进行的,且JS是基于对象来继承的。
2、最直观的继承方式
我们假设现在有这么一个继承层次:一个Person基类,含有name属性和一个getName方法;一个Author类,继承了Person类,有着特有的books属性和getBooks方法。最简单的类式继承方法如下:
 
   /*Class Person*/
    function Person(name){
        this.name = name;
    }
     
    Person.prototype.getName = function(){
            return this.name;
    };
     
    /*Class Author*/
    function Author(name, books){
        Person.call(this, name); //调用父类构造函数,第二次调用父类构造函数
        this.books = books;
    }
     
    Author.prototype = new Person(); //设置原型链以获得父类的方法, 第一次调用父类构造函数
    Author.prototype.constructor = Author; //设置构造函数
    Author.prototype.getBooks = function(){
        return this.books;
    };
 
上述代码的不足之处在于:实例化Authro对象时,将会2次调用父类的构造函数,且需要额外的保存原型链中实例化父类的对象,上述代码就保存了父类中的 一份name属性,事实上这是不必要的。 如果继承层次多些,属性也多些,这个造成的负担就大了。 我们可以对此进行改进,事实上,我们需要的只是父类的原型上的东西,那些父类包含的属性通过调用父类构造函数已经获得了。另外,上述代码看起来似乎父类和 子类的关联性不大,因此在这里,我们给函数原型增加一个extend函数,以明确表明继承层次,于是有了下面的原型式继承。
3、原型式继承
     谈到原型式继承时,最好忘掉自己关于类和实例的一切知识,只从对象的角度来思考。 前面我们说到,JS是基于对象来继承的,对象的prototype属性实质也是指向一个实例化的对象。因此,我们可以想到,并不需要用类(构造函数)来定 义对象的结构,只需直接创建一个对象即可。请看下面的代码:
 
   /*extend函数,实现原型式继承*/
    var extend = function(obj){
        if(typeof obj !== 'object'){
            throw new Error('fatal error: "Object.prototype.extend" expects a object');
        }
         
        var F = function(){}; //创建一个中间函数对象
        F.prototype = obj; //设置其原型对象指向obj
         
        return new F();//返回实例化的F
    };
     
    /*父类字面量对象*/
    var Person = {
        init: function(name){ //初始化函数,进行各种属性设置,代替了构造函数的作用
            this.name = name;
        },
        getName:function(){
            return this.name;
        }
    };
     
    /*子类对象*/ www.zzzyk.com
    var author1 = extend(Person); //继承Person
    author1.init('author');
    alert(author1.getName()); //输出author
    author1.books = 'xxx'; //设置自己的属性
    author1.getBooks = function(){
        return this.books;
    };
    alert(author1.getBooks());//输出xxx
 
上述代码通过全局的extend函数实现继承,接着根据需求进行成员的增加,父类的init函数充当了构造函数的角色,本质上,还是相当于将 prototype指向一个实例化的Object对象。然而习惯了new操作符的同学可能会很不习惯这种方式的继承,包括我也很不习惯。为了使代码更符合 我们的习惯,于是有了类式的继承。
4、类式继承
      类式继承则是模拟传统的面向对象语言实现的,通过给Function的prototype增加一个extend函数,子类构造函数通过 extend函数继承父类,同时又通过内部我们设置的一个指向父类对象的引用,让我们可以很容易的直接调用父类对象的方法。具体如下:
 
   /*给函数原型增加一个extend函数,实现继承*/
    Function.prototype.extend = function(superClass){
        if(typeof superClass !== 'function'){
            throw new Error('fatal error:Function.prototype.extend expects a constructor of class');
        }
         
        var F = function(){}; //创建一个中间函数对象以获取父类的原型对象
        F.prototype = superClass.prototype; //设置原型对象
        this.prototype = new F(); //实例化F, 继承父类的原型中的属性和方法,而无需调用父类的构造函数实例化无关的父类成员
        this.prototype.constructor = this; //设置构造函数指向自己
        this.superClass = superClass; //同时,添加一个指向父类构造函数的引用,方便调用父类方法或者调用父类构造函数
         
        return this;
    };
         
         
    /*Class Person*/
    function Person(name){
        this.name = name;
    }
    Person.prototype.getName = function(){
            return this.name;
    };
     
     
    /*Class Author*/
    function Author(name, books){
        Author.superClass.call(this, name);
        this.books = books;
    }
    /*
     * 这里用了链式调用,下面语句等价于:
     * Author.extend(Person); Author.prototype.getBooks = function(){```};
     */
    Author.extend(Person).prototype.getBooks = function(){
        return this.books;
    };
    /*方法的覆写,通过superClass调用父类的方法获得基本信息,再调用子类的方法获得更特殊的信息*/
    Author.prototype.getName = function(){
       

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,