未捕获的类型错误:this.method 不是函数 - 节点 js 类导出

2023-01-29前端开发问题
1

本文介绍了未捕获的类型错误:this.method 不是函数 - 节点 js 类导出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我是 node.js 的新手,我正在尝试要求一个类.我用过 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes 作为参考.但是,例如,当我这样做时:

I am new to node.js and I am trying to require a class. I have used https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes as reference. However, when I do this for example:

// talker.js
class Talker {
    talk(msg) {
        console.log(this.say(msg))
        var t = setTimeout(this.talk, 5000, 'hello again');
    }
    say(msg) {
        return msg
    }
}
export default Talker

// app.js
import Talker from './taker.js'
const talker = new Talker()
talker.talk('hello')

我明白了:

talker.js:4 Uncaught TypeError: this.say 不是函数

talker.js:4 Uncaught TypeError: this.say is not a function

应该说app.js是electron.js的渲染进程,使用rollup.js捆绑

It should be said that app.js is the electron.js renderer process and it bundled using rollup.js

任何想法为什么会这样?

Any ideas why this would be?

更新:抱歉,我在输入伪代码时忘记添加一行.当我用回调调用 setTimeout 时,它实际上会发生.我已经更新了代码.

Update: Sorry, I forgot to add in a line when putting in the psuedo code. It actually happens when I call setTimeout with callback. I have updated the code.

推荐答案

你正在失去 this 对你的方法的绑定.

You are losing the bind of this to your method.

从此改变:

setTimeout(this.talk, 5000, 'hello again');

到这里:

setTimeout(this.talk.bind(this), 5000, 'hello again');

<小时>

当您将 this.talk 作为函数参数传递时,它接受 this 并查找方法 talk 并传递对该方法的引用功能.但是,它只传递对该函数的引用.与您在 this 中的对象不再有任何关联..bind() 允许您将引用传递给一个小存根函数,该函数将跟踪 this 并将您的方法称为 this.say(),而不仅仅是 say().


When you pass this.talk as a function argument, it takes this and looks up the method talk and passes a reference to that function. But, it only passes a reference to that function. There is no longer any association with the object you had in this. .bind() allows you to pass a reference to a tiny stub function that will keep track of this and call your method as this.say(), not just as say().

如果你这样做,你会看到同样的事情:

You can see the same thing if you just did this:

const talker = new Talker();'

const fn = talker.say;
fn();

这会产生同样的问题,因为将方法分配给 fn 根本不会与 talker 关联.它只是一个函数引用,与对象没有任何关联.事实上:

This would generate the same issue because assigning the method to fn takes no associate to talker with it at all. It's just a function reference without any association with an object. In fact:

talker.say === Talker.prototype.say

.bind() 所做的是创建一个小的存根函数,该函数将保存对象值,然后使用该对象调用您的方法.

What .bind() does is create a small stub function that will save the object value and will then call your method using that object.

这篇关于未捕获的类型错误:this.method 不是函数 - 节点 js 类导出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

Fatal error: Call to a member function fetch_assoc() on a no
业务场景:使用update语句去更新数据库字段。 原因:update接收值不正确。原来代码: $query = "UPDATE student SET date = now() WHERE id = $id";$result = $mysqli-query($query2) or die($mysqli-error); // 问题出现了在这句 $data = $result-fetch_ass...
2024-12-13 前端开发问题
136

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui 表格的默认工具栏添加自定义按钮
首先定义table: var tableIns = table.render({ elem:'#businessUserListTable' ,url: ctx+'/business/businessUser/query' ,error:admin.error ,cellMinWidth: 80// ,width:3700 ,toolbar: '#businessUserListTable-toolbar' ,defaultToolbar: [{ title: '...
2024-06-12 前端开发问题
146

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455