秒懂JavaScript继承和实现方式

柔光的暖阳◎ 2022-07-12 08:56 153阅读 0赞

## 1、继承 ##

概念:一个对象可以访问另一个对象上的成员。在javascript，对象与对象之间是通过prototype属性来实现成员和方法的共享(继承)。

function Animal(name){ 
        this.name = name
    }
    Animal.prototype.eat=function(){ 
        console.log(this.name + 'can eat other small animals .')
    }
    var animal1 = new Animal('snake')
    var animal2 = new Animal('tiger')
    animal1.eat===animal2.eat  //true
    //animal1.eat和animal2.eat都指向 Animal.prototype.eat ,实现方法共享(继承)

## 2、原型继承的原理 ##

原型:就是函数的prototype属性所引用的对象  
原型继承的原理:一个对象能够访问它的**proto**属性所指向的对象上的成员和方法(当然如果这个对象本身有它要访问的成员和方法，就不去它的**proto**属性所指向的对象上查找，逐级向上查找，直至null,则返回undefined)

var a = {}
    //继承关系:a -> Object.prototype ->null
    // a.hasOwnProperty  就是访问的Object.prototype上的hasOwnProperty方法。因为a本身并没有hasOwnProperty方法，而a.__proto__属性指向 Object.prototype ,且Object.prototype上有hasOwnProperty方法

## 3、原型链 ##

概念：js在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做**proto**的内置属性，用于指向创建它的函数对象的原型对象prototype把这个有**proto**的对象串起来，直到Object.prototype甚至到null的链，叫做原型链。  
本质:链上的每一个对象都是通过**proto**属性连接起来的。

...js
    var a = {};
    //原型链：a -> Object.prototype -> null
    var arr=[];
    //原型链:arr -> Array.prototype -> Object.prototype -> null
    function Person(){}
    var p1 = new Person()
    //原型链:p1 -> Person.prototype -> Object.prototype -> null
    ...

## 4、js继承的实现方式 ##

function Person(name,age){ 
        this.name = name
        this.age = age
    }
    Person.prototype.run = function(){ 
        console.log(this.name + 'can run !')
    }

### (1)简单原型继承 ###

var p1 = new Person('Jeck',23)
        var p2 = new Person('Rose',22)
        p1.run === p2.run //true
        // p1 和 p1 都能访问 Person.prototype上的run方法

### (2)置换原型继承 ###

Person.prototype = {
        eat:function(){ 
            console.log(this.name + 'can eat !')    
        }
    }
    var p1 = new Person('Jeck',23)
    var p2 = new Person('Rose',22)
    p1.eat === p2.eat //true
    // p1 和 p1 都能访问 Person.prototype上的eat方法

### (3)扩充原型式继承 ###

function Child(name.age){ 
        this.name = name
        this.age = age
    }
    //IE8以下不支持Object.create()方法
    //兼容代码
    if(!Object.create){
        Object.create = function(Person.prototype){ 
            function F(){ }
            F.prototype = Person.prototype
            return new F()
        }
    }
    Child.prototype = Object.create(Person.prototype)
    // 相当于 Child.prototype 是Person.prototype 它new出来的
    var c = new Child('lili',12)
    //继承的原型链:
    //c -> Child.prototype -> Person.prototype -> Object.prototype -> null
    c.run;  // 访问的是Person.prototype上的run方法

### (4)拷贝式继承 ###

function extend(o1,o2){ 
        for(key in o2){
        if(o2.hasOwnProperty(key)){
            o1[key]=o2[key]
        }
        }
    }
    var o1 = {
    name:'tom',
    sing:function(){ 
        console.log(this.name +'can sing !')
    }
    }
    var o2 = {
        name:'lily',
        jump:function(){ 
            console.log(this.name +'can jump high !')
        }
    }
    extend(o1,o2)
    o1.jump()  
    // lilycan jump high !而不是tomcan jump high !

### (5)对象冒充式继承\# ###

function Child(name,age,gender){ 
            this.parent = Person
            this.parent(name,age)
            delete this.parent
            this.gender = gender
        }
        var c = new Child('meimei',20,'femail')
        console.log(c)
        //{name:'meimei',age:20,gender:'femail'}

### (6)组合继承 ###

function Child(name,age){ 
        Person.call(this,name,age)
        //或者 Person.apply(this,arguments)
    }
    Child.prototype = new Person()
    var c = new Child('qq','sweet')
    c.run();//qq can run ！
    //原型链继承:
    // c -> Child.prototype -> Person.prototype -> Object -> null