构造函数内部的函数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

上一篇: Functions inside constructor vs prototype

下一篇: How to save page state during close