javascript - 以正确的方式使用 Object.create()

标签 javascript ecmascript-5 ecmascript-6

学习 Javascript 我正在寻找创建对象的不同方法。似乎前进的方向是使用 Object.create()

很难找到关于使用 Object.create() 的最佳实践的可靠答案,因为即使是特定的 Object.create() 文章似乎也略微做了一些事情不同。

我想做的是用自己封装的数据创建多个对象。

我喜欢使用封装,似乎对我有用的是

function Foo() {
    var message = "Hello";

    return {
        bar:bar
    }

    function bar(){ 
        return message; 
    }
}

World = (function(){ 
    var obj = Foo();
    var tank = Object.create(obj);

    return {
        baz:baz
    }

    function baz(){ 
        alert(tank.bar()); 
    }

})();

运行 World.baz() 会按预期工作,但我仍然不确定我这样做是否正确。

所有答案将不胜感激,谢谢。

最佳答案

通常在 javascript 中你想像这样创建对象:

var obj = {};
obj.someProperty = 'someValue';
obj.someOtherProperty = 'someOtherValue';

或者,您可以使用对象字面量表示法,如下所示:

var obj = {
    someProperty: 'someValue',
    someOtherProperty: 'someOtherValue'
};

Object.create 函数很有趣。是的,它确实创建了一个空对象,但它与上面定义的对象不同。使用 Object.create 实例化和对象将提供新的空对象继承,直到您为 Object.create 函数提供的参数。例如,如果我们将一个对象定义为:

var actions = {
    shout: function(message){
        console.log(message.toUpperCase() + '!');
    }
}

然后使用 Object.create() 创建一个新对象:

var newObject = Object.create(actions);  // creates a new object: newObject = {};

newObject 将不包含任何它自己的属性,但它将能够访问父操作对象的属性。定义这些对象后,试试这个:

newObject.hasOwnProperty('shout');    // returns false
newObject.shout('Hello!');    // logs 'HELLO!!'

这个例子只是为了展示从新创建的对象到它的父对象的继承是如何工作的。这可能非常有用,但请确保在使用 Object.create 创建对象之前明确需要该行为——否则,最好安全起见并使用上述其他两种方法之一。

希望对您有所帮助!

编辑:

或者,如果您只是想为同一个对象创建许多单独的实例,您可以创建一个构造函数并使用 new 关键字调用它,如下所示:

var Tank = function(speed, durability){
    this.speed = speed;
    this.durability = durability;
    this.location = 0;
    this.shoot = function(){
        console.log('Pew pew');
    };
    this.move = function(){
        this.location += speed;
    };
}

var myTank = new Tank(5, 15);    // creates new tank with speed 5 and durability 15,
                                 // that also has all the default properties and methods,
                                 // like location, shoot, and move.

var yourTank = new Tank(7, 12);  // instantiates a different tank that myTank, with it's
                                 // own speed and durability properties, but also has the
                                 // default location, shoot, and move properties/ methods

var enemyTank = new Tank(10, 25);// instantiates yet another, unique tank with it's own 
                                 // unique values for speed and durability, but again with
                                 // the default location, shoot, and move properties/methods

关于javascript - 以正确的方式使用 Object.create(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24589557/

相关文章:

javascript - 创建javascript对象的区别

javascript - 在未设置背景颜色时添加点击事件

javascript - Javascript 中 null 和 undefined 与 bool 值的比较

javascript - 在哪里可以找到包含 ECMAScript 5 函数的引用表?

javascript - 函数表达式到底发生了什么?

javascript - Aurelia 中第三方库的依赖注入(inject) (di) 范例

javascript - 我可以通过 Web RTC 将视频从一个客户端流式传输到另一个客户端吗?

javascript - 使用 Ajax 和 jQuery 填充 Bootstrap 表

Javascript setter 返回值而无需验证

javascript - 解构赋值以将样式分配给 DOM 元素