时间戳

首页 > 解决方案 > 如果不在 js 中使用“new”关键字，它会在内存中创建许多函数吗？

javascript - 如果不在 js 中使用“new”关键字，它会在内存中创建许多函数吗？

问题描述

假设我有以下代码：

function Human(firstName, lastName) {
    this.firstName = firstName,
    this.lastName = lastName,
    this.fullName = function() {
        return this.firstName + " " + this.lastName;
    }
}

var person1 = new Human("Virat", "Kohli");
var person2 = new Human("sddasd", "dasd");

这段代码所做的是为每个创建的实例，它在内存中一次又一次地创建这 2 个属性和 1 个方法（fullName），这是不好的，应该避免。

现在我有以下代码。我有一组标记，我想为每个标记添加相同的函数（渲染函数）。

for(let i=0;i<markers.length;i++){   
    markers[i].render = () => {
      let parentDiv = document.createElement('div');
      parentDiv.innerHTML = content;
      parentDiv.getElementsByClassName('openLocationClass')[0].onclick = () => openMarkerLocationPopupFunc(marker, data.workorder_id)
      if (showInstructions) parentDiv.getElementsByClassName('showInstructionsClass')[0].onclick = () => openShowInstructionPopupFunc(data.workorder_id)
      return parentDiv;
    }
}

问题：

这是否会为每个标记在内存中创建相同功能的副本，或者这将如何工作？如果有什么办法可以让这变得更好？问题是我还在参数中传递了 2 个函数，并将它们放在新创建的 div 的 onclick 上。

标签： javascriptvue.js

解决方案

这是否会为每个标记在内存中创建相同功能的副本...

是的。现在，在任何体面的 JavaScript 引擎上，它们都将重用相同的底层代码，因此“只是”围绕该重复代码的额外函数对象。但是，是的，有重复。不过，这不一定是问题。

如果 使用set torender调用，您可以相当容易地避免重复：thismarker

function renderMarker() {
  let parentDiv = document.createElement('div');
  parentDiv.innerHTML = content;
  parentDiv.getElementsByClassName('openLocationClass')[0].onclick = () => openMarkerLocationPopupFunc(this, data.workorder_id);
  if (showInstructions) parentDiv.getElementsByClassName('showInstructionsClass')[0].onclick = showInstructionsClassClick;
  return parentDiv;
}

function showInstructionsClassClick() {
    openShowInstructionPopupFunc(data.workorder_id);
}

for(let i=0;i<markers.length;i++){   
    markers[i].render = renderMarker;
}

您也可以摆脱 中的最后一个箭头函数renderMarker，但我不能从上下文中确定。需要知道标记需要什么openMarkerLocationPopupFunc。

推荐阅读