zoukankan      html  css  js  c++  java
  • js继承的几种方法理解和代码演示

    1、属性继承 :call 、apply:不建议使用浪费内存。

    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }
    
    
    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
    
        this.larynx = larynx;
        this.beard = beard;
        
    }
    Man.prototype.work = function(){
        console.log('111')
    }
    var songlei = new Man(10,20);
    console.log(songlei);
    
        // Man{
            // age: undefined
            // beard: 20
            // larynx: 10
            // name: undefined
            // sex: undefined
        // }

    2、原型继承:

      缺点:原型继承会污染父级
    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }

    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
        this.larynx = larynx;
        this.beard = beard;
        
    }
    Man.prototype = Person.prototype;
    Man.prototype.work = function(){
        console.log('111')
    }
    var aaa = new Man(10,20);
    console.log(aaa);
        // Man{
            // age: undefined
            //  beard: 20
            //  larynx: 10
            //  name: undefined
            //  sex: undefined
            //  __proto__:
                //  eat: ƒ()
                //  sleep: ƒ()
                //  work: ƒ()
                //  constructor: ƒ Person(name, age, sex)
        // }
    var p1 = new Person()
    console.log(p1)
        // Person{
            // age: undefined
            // name: undefined
            // sex: undefined
            // __proto__:
            // eat: ƒ()
            // sleep: ƒ()
            // work: ƒ()
            // constructor: ƒ Person(name, age, sex)
        // }

    3、原型拷贝:

    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }
    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
        this.larynx = larynx;
        this.beard = beard;
        
    }
    
    for(var key in Person.prototype){
        Man.prototype[key] = Person.prototype[key]
    }
    Man.prototype.work = function(){
        console.log('111')
    }
    
    var aaa = new Man(10,20);
    console.log(aaa);
        // Man { name: undefined, age: undefined, sex: undefined, larynx: 10, beard: 20 }
        // __proto__:
        // eat: ƒ()
        // sleep: ƒ()
        // work: ƒ()
        // constructor: ƒ Man(larynx, beard, name, age, sex)
    var p1 = new Person()
    console.log(p1)
        // Person { name: undefined, age: undefined, sex: undefined }
        // __proto__:
        // eat: ƒ()
        // sleep: ƒ()
        // constructor: ƒ Person(name, age, sex)

    4、原型链继承:

    原型链:
            由__proto__组成的链条叫做原型链
      原型链继承是不推荐使用的
            因为会多了好多无用的属性
            而且还少了constructor
    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    
    
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }
    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
    
        this.larynx = larynx;
        this.beard = beard;
        
    }
    //    __proto        //__proto__
    Man.prototype = new Person();
    Man.prototype.work = function(){
        console.log('111')
    }
    var aaa = new Man(10,20);
    console.log(aaa);
        // Man{
        //     age: undefined
        //     beard: 20
        //     larynx: 10
        //     name: undefined
        //     sex: undefined
        //     __proto__: Person
        //     age: undefined
        //     name: undefined
        //     sex: undefined
        //     work: ƒ()
        // }
        
    var p1 = new Person()
    console.log(p1)
        // Person{
        //     age: undefined
        //     name: undefined
        //     sex: undefined
        //     __proto__:
        //     eat: ƒ()
        //     sleep: ƒ()
        //     constructor: ƒ Person(name, age, sex)
        // }
        

    5、寄生继承:

    缺点:增加了无用的函数

    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.type="人类";
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }
    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
        this.larynx = larynx;
        this.beard = beard;
        
    }
    //创建了一个寄生器
    function fn(){};
    //寄生器的原型对象 = 人类的原型对象
    fn.prototype = Person.prototype;
    //原型链继承   寄生器的实例对象
    Man.prototype = new fn();
    Man.prototype.constructor = Man;
    Man.prototype.work = function(){
        console.log('111')
    }
    var aaa = new Man(10,20);
    console.log(aaa);
        // Man{
        //     age: undefined
        //     beard: 20
        //     larynx: 10
        //     name: undefined
        //     sex: undefined
        //     __proto__: Person
        //     constructor: ƒ Man(larynx, beard, name, age, sex)
        //     work: ƒ()
        // }

    6、混合继承:我最喜欢的一种方式

    function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.type="人类";
    Person.prototype.eat = function(){
        console.log("正在吃饭")
    }
    Person.prototype.sleep = function(){
        console.log("正在睡觉")
    }
    function Man(larynx,beard,name,age,sex,){
        Person.call(this,name,age,sex)
        this.larynx = larynx;
        this.beard = beard;
    }
    //Man.prototype = Object.create(Person.prototype);
    Man.prototype = {
        constructor:Man,
        __proto__:Person.prototype
    }
    Man.prototype.work = function(){
        console.log('111')
    }
    var aaa = new Man(10,20);
    console.log(aaa);
        // Man{
        //     age: undefined
        //     beard: 20
        //     larynx: 10
        //     name: undefined
        //     sex: undefined
        //     __proto__: Person
        //     constructor: ƒ Man(larynx, beard, name, age, sex)
        //     work: ƒ()
        // }
        
    var p1 = new Person();
    console.log(p1)
        // Person{
        //     age: undefined
        //     name: undefined
        //     sex: undefined
        //     __proto__:
        //     eat: ƒ()
        //     sleep: ƒ()
        //     type: "人类"
        //     constructor: ƒ Person(name, age, sex)
        // }

    7、Es6继承

    ES6类的语法
                1、声明类的时候用 class
           class 类名{
                constructor(){
                    属性
                }
                方法
            }
    class Person{
             constructor(name,age,sex){
                 this.name = name;
                this.age = age;
                this.sex = sex;
             }
             eat(){}
             sleep(){}
         }
         class Man extends Person{
                 constructor(larynx,beard){
                     //实现继承必须使用super
                     super();
                     this.larynx = larynx;
                     this.beard = beard;
                 }
                 work(){}
         } 
        var aaa = new Man()
        console.log(aaa)
        // Man{
        //     age: undefined
        //     beard: undefined
        //     larynx: undefined
        //     name: undefined
        //     sex: undefined
        //     __proto__: Person
        //     constructor: class Man
        //     work: ƒ work()
        // }
  • 相关阅读:
    Oracle SQL语句大全—查看表空间
    Class to disable copy and assign constructor
    在moss上自己总结了点小经验。。高手可以飘过 转贴
    在MOSS中直接嵌入ASP.NET Page zt
    Project Web Access 2007自定义FORM验证登录实现 zt
    SharePoint Portal Server 2003 中的单一登录 zt
    vs2008 开发 MOSS 顺序工作流
    VS2008开发MOSS工作流几个需要注意的地方
    向MOSS页面中添加服务器端代码的另外一种方式 zt
    状态机工作流的 SpecialPermissions
  • 原文地址:https://www.cnblogs.com/houjl/p/10086631.html
Copyright © 2011-2022 走看看