码迷,mamicode.com
首页 > Web开发 > 详细

JS对象继承的几种方式总结

时间:2017-07-19 15:29:42      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:ons   java   今天   完成   super   app   父类   on()   function   

今天学习了一下js的继承,js中的继承主要分四种,原型继承,构造函数继承,call/apply继承以及es6的extend继承。
1.原型继承:
原型继承主要利用js对象的prototype引用父类的构造函数来复制父类的方法。

//定义一个Person类
     function Person(name){  
        this.name=name;  
    }  
    //打招呼
    Person.prototype.sayHello=function(){  
        alert("Hello,my name is "+this.name);  
    }  
     
    //定义Man类,继承Person类
    function Man(name,age){
        this.name=name;
        this.age=age; 
    }
    Man.prototype=new Person();
    var man= new Man("隔壁老王",30);
    man.sayHello();

2.构造函数继承
子类中调用父类的构造函数,完成继承。

 //定义一个Person类
     function Person(name){  
        this.name=name;  
        this.sayHello=function(){  
        alert("Hello,my name is "+this.name);  
        }  
    }  
 
    //定义Man类,继承Person类
    function Man(name,age){
        this.constructor=Person;
        this.constructor(name);
        this.age=age;
    }

    var man= new Man("隔壁老王",30);
    man.sayHello();

3.call/apply继承
利用call/apply方法调用父类构造函数实现继承

 //定义一个Person类
     function Person(name){  
        this.name=name;  
        this.sayHello=function(){  
        alert("Hello,my name is "+this.name);  
        }  
    }  
 
    //定义Man类,继承Person类
    function Man(name,age){
        Person.call(this,name);
        this.age=age;
    }

    var man= new Man("隔壁老王",30);
    man.sayHello();

4.extends继承
使用ES6定义类的方法,类似java定义类的方式实现继承,注意部分浏览器不兼容 - -

‘use strict‘;
     //定义一个Person类
     class Person{  
     //构造函数
        constructor(name){
            this.name=name;
        }
        sayHello(){
            alert("My name is"+this.name);
        }
    }  
    
    class Man extends Person{
        constructor(name,age){
            //调用父类构造函数
            super(name);
            this.age=age;
        }
        
    }

    var man= new Man("隔壁老王",30);
    man.sayHello();

 

JS对象继承的几种方式总结

标签:ons   java   今天   完成   super   app   父类   on()   function   

原文地址:http://www.cnblogs.com/beileye888/p/7205887.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!