说到Javascript的继承,相信只要是前端开发者都有所了解或应用,因为这是太基础的知识了。但不知各位有没有深入去理解其中的玄机与奥秘。今本人不才,但也想用自己的理解来说一说这其中的玄机和奥秘。

一、类继承的发展吏

  • function实现的继承
  • object.create实现的继承
  • es6的继承

对象继承的实现:

复制代码
var animate = {
    name: "name"
};
Object.setPrototypeOf(animate,{
    getName: function(){
        return this.name;
    }
});

var dog = {
    leg: 4
};
Object.setPrototypeOf(dog,{
    say: function(){
        return 'wang';
    }
});
Object.setPrototypeOf(Object.getPrototypeOf(dog),Object.getPrototypeOf(animate));

console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang
复制代码

三、ES6类继承的实现

es6对类继承提供了原生的支持,这让Javascript更像后端语言了,简单使用如下:

复制代码
class Animate{
    constructor(name){
        this.name = name
    }
    getName(){
        return this.name;
    }
}

class Dog extends Animate{
    constructor(name){
        super(name);
        this.leg = 4;
    }
    say(){
        return "wang";
    }
}
var dog = new Dog('dog');
console.log('getName:' + dog.getName()); //dog
console.log("say:" + dog.say()); //wang
console.log( 'dog instanceof Animate:' + (dog instanceof Animate)); //true
console.log( 'dog instanceof Animate: ' + (dog instanceof Dog)); //true
复制代码

四、总结及疑问

     经过本文梳理,你是否发现;">但在此还是存在一个极大的疑问:Object.setPrototypeOf方法在MDN不建议使用,说是更改内部的[[prototype]]属性存在性能问题 和 影响。不知道其影响为何,望大神们指定

12-17 05:37
查看更多