构造函数内部的函数vs原型
我知道有类似的问题,但我想看看这些答案在新的Javascript引擎中优化后是否仍然有效。
在我看来,关于在构造函数中定义函数的最大好处是,您可以轻松避免必须知道“this”关键字的值:
var Person = function() {
var self = this;
self.firstName = null;
self.lastName = null;
self.fullName = function() {
return self.firstName + self.lastName;
};
};
Knockout管理'this'推荐这种方法。 这是一个很大的优势,尤其是当代码被许多开发人员修改时,因为它非常易于理解和使用。
另一种方法是使用对象原型:
var Person = function() {
this.firstName = null;
this.lastName = null;
};
Person.prototype.fullName = function() {
return this.firstName + this.lastName;
};
在这种情况下,由于函数对象将被创建一次,因此具有性能优势。 然而,我对它的主要问题是处理'this'关键字可能会很复杂。 上面的例子非常简单,但是如果你有事件处理程序,forEach调用,jQuery each()调用,方法是从不同的上下文调用等等,很容易使用这个。
当然,如果你明白'这个'是如何工作的并且知道如何调用方法,那么你不应该有太多问题。 但是,根据我的经验,这需要时间并且很容易出错,特别是当代码由许多开发人员制作时。
我知道像V8这样的新JS引擎正在对通过创建隐藏类在构造函数中声明函数的情况应用优化:V8引擎是如何工作的?
所以我的问题是,鉴于由新的JS引擎完成的这些优化以及必须处理“this”关键字的复杂性,使用基于原型的方法仍然有意义吗? 通过使用将所有内容放入构造函数的方法,我会失去什么?
更新1:
我刚刚在Chrome上做了一个微型基准测试(版本42)。 我使用构造函数中的函数和原型中的函数创建1M对象。 这是一个非常简单的具有两个变量和三个函数的对象,结果如下所示:
Functions inside constructor: 1.91 seconds
Functions in prototype: 1.10 seconds
听起来就像在V8中进行优化,它仍然快73%。 然而,这是一个微型基准。 不知道这是否会在真实世界的应用程序中有很大的不同。
更新2:
我也看了一下内存消耗,还有很大的差异。 对于构造函数中的函数:
Shallow size: 64,000,120
Retained size: 336,001,128
对于原型功能:
Shallow size: 40,000,000
Retained size: 40,000,000
无论是用隐藏类进行优化都不是那么好,或者我错过了一些关于它的东西。 我使用V8建议的单态代码(没有参数的构造函数),但不知道我是否做错了什么。
更新3:
这里是我做的测试的链接,以防有人在那里指出错误:http://jsperf.com/dg-constructor-vs-prototype
我执行一个快速测试。 如果你在构造函数中声明了函数,那么即使在优化之后,两个对象实例也有不同的函数实例。 然而,对于原型,您只有一个解释性能差异的函数实例。
var Person = function () {
var self = this;
self.firstName = null;
self.lastName = null;
self.fullName = function () {
return self.firstName + self.lastName;
};
};
Person.prototype.fullName2 = function () {
return this.firstName + this.lastName;
};
var a = new Person();
var b = new Person();
console.log(a.fullName == b.fullName); // returns false
console.log(a.fullName2 == b.fullName2); // returns true
链接地址: http://www.djcxy.com/p/26717.html