使用“ Object.create”代替“ new”

2020/09/29 23:01 · javascript ·  · 0评论

Javascript 1.9.3 / ECMAScript 5引入了Object.createDouglas Crockford等人提倡很长时间的技术。如何new在下面的代码中替换Object.create

var UserA = function(nameParam) {
    this.id = MY_GLOBAL.nextId();
    this.name = nameParam;
}
UserA.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}
var bob = new UserA('bob');
bob.sayHello();

(假设MY_GLOBAL.nextId存在)。

我能想到的最好的是:

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.create(userB);
bob.init('Bob');
bob.sayHello();

似乎没有任何优势,所以我想我没有。我可能太新古典了。我应该如何使用Object.create来创建用户“ bob”?

仅具有一个继承级别,您的示例可能无法让您看到的真正好处Object.create

通过此方法,您可以轻松实现差异继承,其中对象可以直接从其他对象继承。

在您的userB示例中,我认为您的init方法不应该是公共的,甚至不存在,如果您在现有对象实例上再次调用此方法,则idand name属性将发生变化。

Object.create 使您可以使用第二个参数来初始化对象属性,例如:

var userB = {
  sayHello: function() {
    console.log('Hello '+ this.name);
  }
};

var bob = Object.create(userB, {
  'id' : {
    value: MY_GLOBAL.nextId(),
    enumerable:true // writable:false, configurable(deletable):false by default
  },
  'name': {
    value: 'Bob',
    enumerable: true
  }
});

如您所见,可以Object.create使用与Object.definePropertiesObject.defineProperty方法相似的语法,使用对象常量在属性的第二个参数上初始化属性

它可以让你设置属性的属性(enumerablewritable,或configurable),它可以是非常有用的。

使用Object.create(...)over 确实没有优势new object

那些主张使用此方法的人通常会说出相当模糊的优点:“可伸缩性”或“ 对JavaScript更自然 ”等。

但是,我还没有看到一个具体的示例,该示例显示出比使用Object.create具有任何优势new相反,存在已知问题。Sam Elsamman描述了Object.create(...)使用嵌套对象时发生的情况并使用

var Animal = {
    traits: {},
}
var lion = Object.create(Animal);
lion.traits.legs = 4;
var bird = Object.create(Animal);
bird.traits.legs = 2;
alert(lion.traits.legs) // shows 2!!!

发生这种情况是因为Object.create(...)提倡一种实践,即使用数据来创建新对象。这里的Animal基准变的原型的部分lionbird,并且当它是共享的会引起问题。使用new时,原型继承是显式的:

function Animal() {
    this.traits = {};
}

function Lion() { }
Lion.prototype = new Animal();
function Bird() { }
Bird.prototype = new Animal();

var lion = new Lion();
lion.traits.legs = 4;
var bird = new Bird();
bird.traits.legs = 2;
alert(lion.traits.legs) // now shows 4

关于传递给的可选属性,Object.create(...)可以使用添加这些属性Object.defineProperties(...)

Object.create在某些浏览器上还不是标准的,例如IE8,Opera v11.5,Konq 4.3都没有。您可以为这些浏览器使用Douglas Crockford的Object.create版本,但这不包括CMS答案中使用的第二个“初始化对象”参数。

对于跨浏览器代码,同时进行对象初始化的一种方法是自定义Crockford的Object.create。这是一种方法:

Object.build = function(o) {
   var initArgs = Array.prototype.slice.call(arguments,1)
   function F() {
      if((typeof o.init === 'function') && initArgs.length) {
         o.init.apply(this,initArgs)
      }
   }
   F.prototype = o
   return new F()
}

这样可以保持Crockford原型继承,还可以检查对象中的任何init方法,然后使用您的参数运行它,例如说新人(“ John”,“ Smith”)。您的代码将变为:-

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}  // For example

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.build(userB, 'Bob');  // Different from your code
bob.sayHello();

因此,bob继承了sayHello方法,现在拥有自己的属性id = 1和name ='Bob'。这些属性当然是可写和可枚举的。这也是一种比ECMA Object.create更为简单的初始化方式,尤其是在您不关心可写,可枚举和可配置属性的情况下。

对于没有初始化方法的初始化,可以使用以下Crockford mod:

Object.gen = function(o) {
   var makeArgs = arguments 
   function F() {
      var prop, i=1, arg, val
      for(prop in o) {
         if(!o.hasOwnProperty(prop)) continue
         val = o[prop]
         arg = makeArgs[i++]
         if(typeof arg === 'undefined') break
         this[prop] = arg
      }
   }
   F.prototype = o
   return new F()
}

这将按照定义顺序使用userB参数之后的Object.gen参数从左到右填充userB自己的属性。它使用for(prop in o)循环,因此,按照ECMA标准,无法保证属性枚举的顺序与属性定义的顺序相同。但是,在使用(4)个主要浏览器进行测试的几个代码示例中,如果使用hasOwnProperty过滤器(有时甚至不使用),它们是相同的。

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}};  // For example

var userB = {
   name: null,
   id: null,
   sayHello: function() {
      console.log('Hello '+ this.name);
   }
}

var bob = Object.gen(userB, 'Bob', MY_GLOBAL.nextId());

我说的要比Object.build简单一些,因为userB不需要init方法。同样,userB不是专门的构造函数,但看起来像一个普通的单例对象。因此,使用此方法可以从普通的普通对象构造和初始化。

TL; DR:

new Computer()会一次调用构造函数Computer(){},而Object.create(Computer.prototype)不会。

所有优点都基于这一点。

关于性能的旁注:构造函数的调用new Computer()经过引擎的优化,因此它的速度可能比还要快Object.create

您可以使init方法return this,然后将调用链接在一起,如下所示:

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
        return this;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};

var bob = Object.create(userB).init('Bob');

Object.create的另一种可能用法是以廉价且有效的方式克隆不可变对象

var anObj = {
    a: "test",
    b: "jest"
};

var bObj = Object.create(anObj);

bObj.b = "gone"; // replace an existing (by masking prototype)
bObj.c = "brand"; // add a new to demonstrate it is actually a new obj

// now bObj is {a: test, b: gone, c: brand}

注意:上面的代码段创建了源对象的克隆(也称为引用,如cObj = aObj)。它优于copy-properties方法(请参见1),因为它不会复制对象成员属性。而是创建另一个-destination-对象,并将其原型设置在源对象上。此外,当在目标对象上修改属性时,它们会“即时”创建,从而掩盖了原型的(src)属性。这是一种克隆不可变对象的快速有效方法。

需要注意的是,这适用于在创建后不可修改(不可变)的源对象。如果在创建后修改了源对象,则所有克隆的未屏蔽属性也将被修改。

在此处拨弄(http://jsfiddle.net/y5b5q/1/)(需要Object.create功能的浏览器)。

我认为有问题的要点-是理解的差异newObject.create方法。相应于此答案此video new关键字,还会执行以下操作:

  1. 创建新对象。

  2. 将新对象链接到构造函数(prototype)。

  3. 使this变量指向新对象。

  4. 使用新对象执行构造函数,并隐式执行return this;

  5. 将构造函数名称分配给新对象的property constructor

Object.create只有执行1st2nd步骤!

在所提供的代码示例中,这没什么大不了的,但是在下一个示例中,它是:

var onlineUsers = [];
function SiteMember(name) {
    this.name = name;
    onlineUsers.push(name);
}
SiteMember.prototype.getName = function() {
    return this.name;
}
function Guest(name) {
    SiteMember.call(this, name);
}
Guest.prototype = new SiteMember();

var g = new Guest('James');
console.log(onlineUsers);

作为副作用,结果将是:

[ undefined, 'James' ]

因为,Guest.prototype = new SiteMember();

但是我们不需要执行父构造方法,我们只需要使make方法getName在Guest中可用即可。因此,我们必须使用Object.create

如果更换Guest.prototype = new SiteMember();

Guest.prototype = Object.create(SiteMember.prototype);结果是:

[ 'James' ]

有时,您无法使用NEW创建对象,但仍然能够调用CREATE方法。

例如:如果要定义自定义元素,则必须从HTMLElement派生。

proto = new HTMLElement  //fail :(
proto = Object.create( HTMLElement.prototype )  //OK :)
document.registerElement( "custom-element", { prototype: proto } )

优点是Object.create通常比new大多数浏览器

在此jsperf示例,在一个铬,浏览器new30倍的速度Object.create(obj)虽然两者都是相当快。这一切都是很奇怪的,因为new要做更多的事情(例如调用构造函数),其中Object.create应该只是将传入的对象作为原型创建一个新的Object(用Crockford说的秘密链接)

也许浏览器并没有赶上提高Object.create效率的可能(也许它们是基于幕后new的……甚至是本机代码)

概要:

  • Object.create() 是一个Javascript函数,它带有2个参数并返回一个新对象。
  • 第一个参数是一个对象,它将是新创建的对象的原型
  • 第二个参数是一个对象,它将是新创建的对象的属性

例:

const proto = {
  talk : () => console.log('hi')
}

const props = {
  age: {
    writable: true,
    configurable: true,
    value: 26
  }
}


let Person = Object.create(proto, props)

console.log(Person.age);
Person.talk();

实际应用:

  1. 以这种方式创建对象的主要优点是可以显式定义原型使用对象字面量或new关键字时,您无法对此进行控制(但是,您当然可以覆盖它们)。
  2. 如果我们想拥有原型,则new关键字调用构造函数。随着Object.create()无需调用甚至声明构造函数
  3. 当您想以一种非常动态的方式创建对象时,它基本上可以是一个有用的工具。我们可以使一个对象工厂函数根据接收到的参数创建具有不同原型的对象。

您必须自定义 Object.create()函数。一种解决Crockfords问题的方法,也调用您的init函数。

这将起作用:

var userBPrototype = {
    init: function(nameParam) {
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};


function UserB(name) {
    function F() {};
    F.prototype = userBPrototype;
    var f = new F;
    f.init(name);
    return f;
}

var bob = UserB('bob');
bob.sayHello();

这里的UserB就像Object.create,但是根据我们的需要进行了调整。

如果需要,您也可以致电:

var bob = new UserB('bob');

道格拉斯·克罗克福德(Douglas Crockford)曾经是Object.create()的热心拥护者,而他基本上是此构造实际上是用javascript编写的原因,但他不再对此持保留意见。

他停止使用Object.create,因为他完全停止使用关键字,因为这会带来太多麻烦。例如,如果您不小心,它很容易指向全局对象,这可能会带来严重的后果。他声称,不使用 Object.create就不再有意义。

您可以查看2014年他在Nordic.js上发表的这段视频:

https://www.youtube.com/watch?v=PSGEjv3Tqo0

在此处输入图片说明

newObject.create达到不同的目的。new用于创建对象类型的新实例。Object.create旨在简单地创建一个新对象并设置其原型。为什么这有用?在不访问__proto__属性的情况下实现继承对象实例的原型(称为原型)[[Prototype]]是虚拟机的内部属性,不能直接访问。实际上有可能直接[[Prototype]]__proto__属性是,它一直是每个主要虚拟机实现ECMAScript的实际标准,因此,删除它会破坏很多现有代码。

为了回答7ochem的上述回答,对象绝对不应该将其原型设置为new语句的结果,这不仅是因为没有必要多次调用同一个原型构造函数,而且还因为同一个类的两个实例可以以如果在创建原型后修改了原型,则行为会有所不同。由于误解和破坏了原型继承链的预期行为,两个示例都只是错误的代码。

而不是访问的__proto__,实例的原型应该写成当它与创建Object.create或使用后Object.setPrototypeOf,用阅读Object.getPrototypeOfObject.isPrototypeOf

同样,正如Mozilla Object.setPrototypeOf的文档所指出的那样,出于性能原因,在创建对象后修改对象的原型也是一个坏主意,除了在创建对象后修改对象的原型可能导致未定义的事实之外,如果给定的一段代码可以在修改原型后或之前执行,除非该代码非常仔细地检查当前原型或不访问两者之间的任何不同属性,否则将执行“行为”。

给定

const X = function (v) { this.v = v };
X.prototype.whatAmI = 'X';
X.prototype.getWhatIAm = () => this.whatAmI;
X.prototype.getV = () => this.v;


以下VM伪代码等效于该语句
const x0 = new X(1);

const x0 = {};
x0.[[Prototype]] = X.prototype;
X.prototype.constructor.call(x0, 1);


注意
尽管构造函数可以返回任何值,但该
new语句始终忽略其返回值,并返回对新创建对象的引用。


并且以下伪代码等效于该语句
const x1 = Object.create(X.prototype);

const x0 = {};
x0.[[Prototype]] = X.prototype;


如您所见,两者之间的唯一区别是
Object.create不执行构造函数,该构造函数实际上可以返回任何值,但this如果没有另外指定,则仅返回新的对象引用

现在,如果我们想创建一个具有以下定义的子类Y:

const Y = function(u) { this.u = u; }
Y.prototype.whatAmI = 'Y';
Y.prototype.getU = () => this.u;


那么我们可以通过写给
__proto__使它像这样从X继承

Y.prototype.__proto__ = X.prototype;


尽管无需编写
__proto__with 就可以完成同样的事情

Y.prototype = Object.create(X.prototype);
Y.prototype.constructor = Y;


在后一种情况下,有必要设置原型的构造函数属性,以便该
new Y语句new Y调用正确的构造函数,否则将调用函数X如果程序员确实想new Y调用X,则可以在Y的构造函数中使用X.call(this, u)

我更喜欢封闭方法。

我仍然使用new我不使用Object.create我不使用this

我仍然new喜欢它的声明性质。

为简单继承考虑这一点。

window.Quad = (function() {

    function Quad() {

        const wheels = 4;
        const drivingWheels = 2;

        let motorSize = 0;

        function setMotorSize(_) {
            motorSize = _;
        }

        function getMotorSize() {
            return motorSize;
        }

        function getWheelCount() {
            return wheels;
        }

        function getDrivingWheelCount() {
            return drivingWheels;
        }
        return Object.freeze({
            getWheelCount,
            getDrivingWheelCount,
            getMotorSize,
            setMotorSize
        });
    }

    return Object.freeze(Quad);
})();

window.Car4wd = (function() {

    function Car4wd() {
        const quad = new Quad();

        const spareWheels = 1;
        const extraDrivingWheels = 2;

        function getSpareWheelCount() {
            return spareWheels;
        }

        function getDrivingWheelCount() {
            return quad.getDrivingWheelCount() + extraDrivingWheels;
        }

        return Object.freeze(Object.assign({}, quad, {
            getSpareWheelCount,
            getDrivingWheelCount
        }));
    }

    return Object.freeze(Car4wd);
})();

let myQuad = new Quad();
let myCar = new Car4wd();
console.log(myQuad.getWheelCount()); // 4
console.log(myQuad.getDrivingWheelCount()); // 2
console.log(myCar.getWheelCount()); // 4
console.log(myCar.getDrivingWheelCount()); // 4 - The overridden method is called
console.log(myCar.getSpareWheelCount()); // 1

鼓励反馈。

new 操作员

  • 这用于从构造函数创建对象
  • new关键字还执行构造函数
function Car() {
  console.log(this) // this points to myCar
  this.name = "Honda";
}

var myCar = new Car()
console.log(myCar) // Car {name: "Honda", constructor: Object}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // true
console.log(myCar.constructor) // function Car() {}
console.log(myCar.constructor === Car) // true
console.log(typeof myCar) // object

对象创建

  • 您也可以Object.create用来创建新对象
  • 但是,它不执行构造函数
  • Object.create 用于从另一个对象创建一个对象
const Car = {
  name: "Honda"
}

var myCar = Object.create(Car)
console.log(myCar) // Object {}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // ERROR
console.log(myCar.constructor) // Anonymous function object
console.log(myCar.constructor === Car) // false
console.log(typeof myCar) // object

本文地址:http://javascript.askforanswer.com/shiyong-object-createdaiti-new.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!