JavaScript 进阶（六）继承

关注

发布于: 2 小时前

对于使用过基于类的语言 (如 Java 或 C++) 的开发者们来说，JavaScript 是比较费解的 —— JavaScript 是动态的，本身不提供一个 class 的实现。即便是在 ES2015/ES6 中引入了 class 关键字，但那也只是语法糖，JavaScript 仍然是基于原型的。

继承

ES5

首先来我们看一下在 ES 5 中是如何实现继承的

function son() {son.prototype.getName = function() {    return 'son'}function father() {}let name = new father()father.prototype = Object.create(son.prototype, {    constructor: {        name: 'father'，        sex：'male',            age: '66'    }})

复制代码

如上代码，我们通过原型链的形式把 son 类的方法给了 father

ES6

ES 中，我们就可以通过提供的 Class 关键词和extends来实现继承

class father {
    getName() {
        return 'father'
    }
}
class son extends father {
    getName() {
        return 'son'
    }
}
let bigSon = new son()
bigSon.getName()

复制代码

如上代码，就是通过 ES6 的语法来实现继承的，并重构了 getName 方法。

但是有一点是需要注意的，虽然 ES6 已经很普遍了，但是还有一些老旧的项目是没有继承 ES6 语法的，这个时候我们就需要一种编码工具，把它转换为 ES5 语法了，他就是 babel

那他是怎么做到的，我们可以随便找一个转译工具下看看转译后的代码。

var father = function () {    function father() {        _classCallCheck(this, father);    }
    _createClass(father, [{        key: 'getName',        value: function getName() {
            return 'father';        }    }]);
    return father;}();
var son = function (_father) {    _inherits(son, _father);
    function son() {        _classCallCheck(this, son);
        return _possibleConstructorReturn(this, (son.__proto__ || Object.getPrototypeOf(son)).apply(this, arguments));    }
    _createClass(son, [{        key: 'getName',        value: function getName() {
            return 'son';        }    }]);
    return son;}(father);
var bigSon = new son();
bigSon.getName();

复制代码

通过如上代码我们可以发现，这就是 ES5 的语法，但需要注意的是他里面用到了 apply 这个方法。

END~~~

发布于: 2 小时前阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

JavaScript 进阶（六）继承

继承

ES5

ES6

Augus

评论