Javascript类型错误——不是函数返回先前定义的if变量

Javascript type error - not a function return if variable previously defined

本文关键字：定义 if 变量 函数 错误 类型 Javascript 返回      更新时间：2023-09-26

我有以下函数来测量元素的宽度:

function distanceToCaret(textElement,caretIndex){
    line = findLineViaCaret(textElement,caretIndex);
    relativeIndex = caretIndex - line.startIndex;
    textToCaret = line.text.substring(0, relativeIndex);
    hiddenElement = textElement.clone(); //copies font settings and width
    hiddenElement.empty();//clear text
    hiddenElement.css("visibility", "hidden");
    hiddenElement.css("width", "auto"); //so width can be measured
    hiddenElement.css("display", "inline-block"); //so width can be measured
    jQuery('body').append(hiddenElement); // height doesn't exist until inserted into document
    hiddenElement.text(textToCaret); //add character to get height
    width = hiddenElement.width();
    hiddenElement.remove();
    return width;
}

我用:

distanceToCaret = distanceToCaret($(this), thisIndex);

第一次调用这个函数，它会返回"72"，第二次调用时得到错误:

TypeError: '72' is not a function (evaluating 'distanceToCaret($(this), thisIndex)')

事实上，如果disctanceToCaret在我调用distanceToCaret = distanceToCaret();之前被定义，我会得到这个错误。为什么会发生这种情况?

这是因为函数在javascript中是一等对象。所以这个function distanceToCaret(textElement,caretIndex){ ... }和这个distanceToCaret = function(textElement,caretIndex){ ... }是一样的。也就是说，你可以将一个函数赋值给一个变量，当你以正常的方式定义一个函数时，这只是一个将它赋值给指定变量的快捷方式。

罪魁祸首是

distanceToCaret = distanceToCaret($(this), thisIndex);

将函数distanceToCaret重命名为getDstanceToCaret，然后

distanceToCaret = getDstanceToCaret($(this), thisIndex);

您正在调用名为distanceToCaret的函数，并将结果分配给distanceToCaret。在JavaScript中，函数并不特殊。变量distanceToCaret保存了对函数的引用，因此更改/设置distanceToCaret的值意味着您已经丢失了对函数的引用。

如果您为返回值使用不同的名称，则此问题应该会消失:

var distance = distanceToCaret($(this), thisIndex);

你将返回宽度(72)赋值给变量distanceToCaret所以当你调用distanceToCaret函数时它调用的是变量而不是你的函数所以将你的变量名distanceToCaret改为_distanceToCaret并尝试

你正在用第一次执行后执行函数的结果覆盖你的函数定义。

function distanceToCaret(textElement,caretIndex){}

等价于:

var distanceToCaret = function (textElement, caretIndex) {}

执行:

var distanceToCaret = function (textElement, caretIndex) {};
distanceToCaret = distanceToCaret(); // Now distanceToCaret is no longer a function
相关文章：