javascript - Object.create 原型(prototype)链

标签 javascript object prototypal-inheritance object-create

初始问题

昨天我读到了 ECMAScript 5 Object.create() 我想用这种方法开始在我的代码中构建原型(prototype)链,而不是设置原型(prototype)及其构造函数, 我喜欢你可以直接设置可写可配置等。

我试过这样

function printobject(msg, obj) {
    if (msg) {
        document.write("<b>" + msg + "</b><br>");
        document.write("<hr><br>");
    }
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (obj[prop].toString() !== "[object Object]") {
                document.write(prop + " : " + obj[prop] + "<br>");
            }
            else {
                document.write("<b>" + prop + " : " + obj[prop] + "</b><br>");
                printobject("", obj[prop]);
            }
        }
    }
    if (msg) {
        document.write("<br><hr><br>");
    }
};
var base = {
    extend: function () { //extend this Object
        var args = Array.prototype.slice.call(arguments);
        printobject("Arguments to Extend", args)
        var that = Object.create(this, (args ? args.shift() : {}));
        var arg = args.shift() || {};
        printobject("Copy Properties to New Object", arg);
        for (var prop in arg) {
            that[prop] = arg[prop];
        }
        // Object.freeze(that);       
        return that;
    },
    create: function () { //Creates new instances of the Object
        var that = Object.create(this, {
            extend: {
                value: null,
                writable: false,
                configurable: false
            }, //sets extend and create to null so you cant create a new instance when used create ( use extend instead);
            create: {
                value: null,
                writable: false,
                configurable: false
            }
        });
        that.init.apply(that, arguments); //call init function for the new created object; 
        return that;
    },
    init: function () {
        printobject("No Initfunction supplied for New Object", this);
    } // Empty init function for fallback
}
var Human = base.extend({
    name: {
        value: "test"
    }
}, {
    init: function (name) {
        alert(name + " has been created");
        this.name = name;
    },
    walk: function () {
        alert(this.name + " walks");
    }
});
var Human1 = Human.create("test2");
//alert("Human1 - Name:" + Human1.name);
Human1.walk();
Human.walk = function () {
    alert("Walk has been overwritten")
}; //Object freezed 
Human1.walk();
Human1.create = function () {
    alert("Overwrite create");
}; //Doesnt exist in created     Object
Human1.create(); ?
  • Human 中给出的方法是否只在 ram 中存在一次? Human1.walk() 指向它?
  • 我想知道这样做是否是正确的方法?我对 JavaScript 比较陌生。

这是 jsfiddle 上的代码.

回答

首先,非常感谢让事情变得更清晰 =) 但, 1:当我这样做时,实例继承自其构造函数的原型(prototype)(?)

 Nothing = {};
function base() {
this.inherit = function(constructor) {
    alert("inherit");
    var obj = constructor;
    obj.constructor = constructor;
    obj.prototype = this;
   return obj ;  
 }
 ;}
base.prototype = Nothing;
base.constructor = base;
var Top = new base();       
var Human = Top.inherit(function(name) {
        this.name = name;
});
var Paul = new Human("Paul");
alert(Paul.name);
alert(Paul instanceof Human); //true `

2:因此 instanceof 运算符在这段代码中没有中断,(它只适用于函数对我来说似乎很清楚)

但是这样写,Paul还是继承了Top原型(prototype)的inherit()方法 我需要覆盖它 但是,如果我不想让 Human 的实例继承该方法,我该怎么做?

除了使用 Objkect.defineproperty (?) 之外,我不能像 wrtable 那样设置属性描述符

那么使用 Object.create() 继承 Objects vs 的主要好处是什么 设置原型(prototype)和构造函数? =)

3:哦,thx,是的,那不是基础对象的扩展=) 谢谢你的建议 =)

感谢所有的努力 =)

回答

好的,当我这样做的时候

Nothing = {}

base.prototype = Nothing;

这不会阻止 s.o 沿着原型(prototype)链上升到 Object.prototype 吗? 如果没有,有没有办法做到这一点? =) 会 ( Object.create(null); ) 这样做,

我以为我必须设置

base.prototype.constructor = base;

因为否则,原型(prototype)构造函数

var Top = new base();

如果原型(prototype)设置为 Nothing,则将是 Nothings 或不从原型(prototype)链上的某处继承构造函数 ->

Top instanceof base // false

更新

我现在以这样的方式结束了它:

var base = {
// a tiny little selfmade prototypical inheritance system
// you are free to add function arguments for extending the created objects
// neither instanceof nor .constructor is featured, because "classes" are no functions
    create: function(extension,desc) {
        // instances inherit from the proto objects
        var newInst = Object.create(this.proto, desc);
        if(this.proto.childExtendable) //if Subclass allows its Children to be Extendible, do so
            newInst.extend(extension);
        if(newInst.init||this.proto.init) //4
            newInst.init()                          
        return newInst
    },
    inherit: function(props) {
        // the "class" inherits static methods from the class
        var sub = Object.create(this);
        // and the proto objects inherits from the parent proto
        sub.proto = Object.create(this.proto);
        props.protect = this.protect;
        if(props.childExtendable)
            props.extend = this.extend;
        this.extend.call(sub.proto, props);
        return sub;
    }, 
    extend: function (props) {
        for (var prop in props) {
            var propmatch = prop.match(/(.*?)__(.{1,5}?)__(.*)/)||["",prop,"",""];
            this[propmatch[1]+propmatch[3]] = props[prop];
            if(propmatch[2])
                this.protect(propmatch[1]+propmatch[3],propmatch[2]);           
        }
    },
    protect: function(prop,flags) { //with each call it toggles the given flags,  so you can protect funcitons given to the inherit function ;; //This should be available to all childs, but adding it to the base.proto, it changes Object.prototyppe ( therefore not a good idea)
        var d  = Object.getOwnPropertyDescriptor(this, prop);
        if (flags.match(/w/)){
             Ti.API.info("Setting writable for propertie " + prop + " in Object " + this + " to " + !d.writable);
             Object.defineProperty(this, prop, {writable:!d.writable});};
        if (flags.match(/c/)){
            Ti.API.info("Setting configurable for propertie " + prop + "in Object " + this);
            Object.defineProperty(this, prop, {configurable:!d.configurable});};
        if (flags.match(/e/)){
            Ti.API.info("Setting enumerable for propertie " + prop + "in Object " + this);
            Object.defineProperty(this, prop, {configurable:!d.enumerable});};
        if (flags.match(/a/)){
            Ti.API.info("Setting enumerable for propertie " + prop + "in Object " + this);
            Object.preventExtensions(this);};
   },
    init: function() {},
    proto: Object.prototype // or null, if you want
};

var Human = base.inherit({ //will be put in Human.proto
    childExtendable:true,
    init:function() {alert("Humans Init for all Instances")},
    say:function() { alert("Hi, I'm "+this.name); }
});
Human.proto.name = "default"; // You could use an argument to the inherit function
                              // I just want to make clear what happens
Ti.API.info(Object.getPrototypeOf(Function) + "a");
var paul = Human.create({ //extends this object
    name: "Paul",
    test: function() {alert("test")},
    init__wce__: function() {alert("Pauls Own Init")},
    say__w__ : function() { alert("Hi, I'm" + this.name + "s Own Function")}
});
paul.name = "Paul";           // and again, the create function might do it for you
paul.say = function() {alert("Pauls say is overwritten")} // define init without __wce__ and it will be overwritten
paul.say(); // -> "Hi, I'm Paul"

只要有人关心
但是,jsfiddle 不会运行它,Titanium 会按预期执行所有操作 也许一些严格的模式(??)

最佳答案

Do the methods given in Human only exist once in the ram?

是的。

and Human1.walk() points to it?

是的。更准确地说,Human1 的原型(prototype) Human 有一个指向它的属性“walk”。

I wonder if this is the right Approach of doing it like this? I'm relatively new to JavaScript.

我会说不,因为它过于复杂,而且部分错误。

  • Human实例的原型(prototype)链包括base。这很奇怪,您需要为每个实例覆盖创建和扩展方法。通常的方法是“类”包含一个“原型(prototype)”属性,它们的实例从中继承。
  • 您的模式破坏了 instanceof 运算符,尽管这可能是一个小问题。
  • 扩展方法令人困惑。它不扩展对象本身,而是创建一个继承它的新对象并在其上设置属性和属性描述符。更好地实现同一件事:

base.inherit = function(descs, props) {
    // creates a new object inheriting from this
    var that = Object.create(this, descs); // will even work when undefined
    if (props)
        for (var prop in props)
            that[prop] = props[prop];
    // Object.freeze(that);       
    return that;
};

扩展问题:

base.prototype = Nothing​;
base.constructor = base;

完全没用。首先,默认情况下,任何函数的“原型(prototype)”属性都是一个(几乎)空的对象,直到您覆盖它。无需将其设置为 nothing :-)

“构造函数”属性通常是原型(prototype)属性。它将被所有实例继承,指向它们的构造函数。您只需要在覆盖函数的“原型(prototype)”属性时显式设置它 - 您不应该在函数本身上设置“构造函数”属性。

(继续:)我想更多关于这样的解决方案:

var base = {
// a tiny little selfmade prototypical inheritance system
// you are free to add function arguments for extending the created objects
// neither instanceof nor .constructor is featured, because "classes" are no functions
    create: function([desc]) {
        // instances inherit from the proto objects
        return Object.create(this.proto, [desc]);
    },
    inherit: function([props]) {
        // the "class" inherits static methods from the class
        var sub = Object.create(this);
        // and the proto objects inherits from the parent proto
        sub.proto = Object.create(this.proto);
        [Object.extend(sub.proto, props);]
        return sub;
    },
    proto: Object.prototype // or null, if you want
};

var Human = base.inherit();
Human.proto.name = "default"; // You could use an argument to the inherit function
                              // I just want to make clear what happens
Human.proto.say = function() { alert("Hi, I'm "+this.name); };

var paul = Human.create();
paul.name = "Paul";           // and again, the create function might do it for you
paul.say(); // -> "Hi, I'm Paul"

这样,paul 继承自 Human.proto 继承自 base.protoObject.prototypenullHuman 继承自 base,即您可以使用 Human.inherit() 轻松构建“子类”。

是否要使用属性描述符绝对是您的选择。无论你在哪里创建和扩展它,你都可以使用 Object.defineProperties(或 Object.create 的第二个参数)以及 Object.extend(通常的 for-in-copy-方法)。

what are the main benefits from using Object.create() to inherit from Objects vs Setting the prototypes and construcotrs?

这是一种设计选择。 Object.create 不会在构建的对象上调用 [constructor] 函数。参见 Using "Object.create" instead of "new"Understanding the difference between Object.create() and new SomeFunction()了解更多信息。

base.prototype = {}; doesnt prevent s.o to go up the prototype chain til Object.prototype?

是的。一个空对象(由您的文字创建)在其链中仍然有 Object.prototype。唯一的方法是 Object.create(null)(不能使用 new 填充)。

i thought that i had to set base.prototype.constructor = base;

在这种情况下不是。拥有一个 function base(){...},将其“prototype”属性设置为 {constructor: base} 绝对不会改变任何内容(除了现在可枚举的“constructor” ) - 每个函数都有这样一个默认原型(prototype)对象,包括“构造函数”。

所以只有当你需要用一个新对象覆盖“原型(prototype)”属性时,就像让它从另一个函数的原型(prototype)继承时发生的那样,你可以添加这个方便的属性:MySubClass.prototype = Object.create( MyClass.prototype, {constructor:{value:M​​ySubClass}});

otherwise...

什么都不会发生。原型(prototype)对象的“构造函数”属性对于任何语言特性(如 instanceof)都是必需的,而且很少使用。很可能什么都没坏。

关于javascript - Object.create 原型(prototype)链,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11240011/

相关文章:

Node.js 继承更喜欢子构造函数属性

javascript - 如何仅在第一个结束时才开始新的 velocity.js 效果?

java - Java 中的对象命名和继承

Javascript ES6 类组成

c# - 如何将lambda表达式直接转换为对象?

java - 通过扫描输入文件创建对象?

javascript - Node JS 中的原型(prototype)继承

javascript - 多种模式

javascript - Gridster 没有出现在 jQuery 变量下

javascript - 从 contenteditable 填充并保存文本