如何在ES6中动态创建/生成原型对象

How dynamically create / generate prototypical objects in ES6?

本文关键字：原型 对象 创建 动态 ES6      更新时间：2023-09-26

在backbone'js中有一个模型对象，你可以在其中设置属性并通过函数进行扩展，并将返回一个可以使用的新原型。

参见第一个例子:

var Human = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});
var human = new Human();

来源:https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-model

我试图在ES6中实现这一点，但我缺乏对javascript原型的深入理解。

我写了一些允许这样做的东西:

var Model = {
    foo() {
        return 'bar';
    },
    extend(object) {
        var Extend = function() {
            // Set prototype's schema
            this.schema = object.schema;
            // Inherit model's functions
            this.foo = Model.foo;
        }
        return Extend;
    }
}
// Extend model and create a new prototype
var Human = Mode.extend({
    schema: {
        name: 'string',
        age:  'number'
    }
});
var human1 = new Human();
var human2 = new Human();
console.log( human1.foo() ); // bar
console.log( human1.schema ); // { name: 'string', age: 'number' }
console.log( human2.schema ); // { name: 'string', age: 'number' }

我想使用这样的概念来实现backbone.js在es6中实现的目标。有更好的方法吗?

编辑:对不起，我应该澄清，我需要它是向后兼容性的原型。这将是一个小型库，您不需要使用ES6或类。我只想用es6写库。库的用户应该能够通过扩展函数构造新的模型原型。

ECMAScript 6(又名ECMAScript 2015)引入了一种类定义语法，它看起来非常像其他面向对象的类结构，因为它们提供了继承和对基类对象的简单访问。

然而，引用MDN网站的话说，引入的JavaScript类是"JavaScript现有的基于原型的继承的语法糖"。类语法并没有向JavaScript引入新的面向对象继承模型。JavaScript类为创建对象和处理继承提供了更简单、更清晰的语法。"

在我看来，这些都是非常受欢迎的——无论语法上是否有糖。

目前最大的问题是缺乏支持的浏览器。但是如果你决心要利用E6，那么你应该研究一下这个新语法。

MDN站点也有大量关于原型继承的信息

如果是ES6，则使用classes

class Alien {
    constructor(type) {
        this.type = type;
    }
    role() {
        if (this.type === "Evil") {
            console.log("To destroy the earth and enslave the humans");
        } else {
            console.log("To make crop circles and appear in blurry tabloid photos.");
        }
    }
}
class SciFi extends Alien {
    role() {
        if (this.type === "Evil") {
            console.log("To destroy the rebel alliance.");
        } else {
            console.log("To phone home.");
        }
    }
}
相关文章：