集合函数运行一次后返回的不是函数

Question

我有一个项目，使用 Vue 组件和集合设计模式进行列表操作。在集合内部，我有一个 arr.add 函数，当按下按钮时，它会向列表中添加一个新对象。第一次调用时可以正常工作，但第二次调用时会显示错误，说明它不是函数。我的所有函数调用都会发生这种情况。

如果我手动将数据输入列表并避免使用集合调用，它工作正常，但如果我第二次使用集合，则会收到错误：未捕获的类型错误：this.exerciseList.add 不是函数

这是收藏模型：

function ExerciseCollection(arr = []){

    arr.add = function (exercise, date){
        if (date){
            exercise.date = date;
        }
        exercise.id = genId(date);
        this.push(exercise);
        return this;
    }

    arr.delete = function (exercise){
        this.splice(this.indexOf(exercise), 1);
        return this;
    }

    arr.deleteSet = function (exercise, set){
        let editExercise = this.indexOf(exercise);
        editExercise.weight.splice(set, 1);
        editExercise.reps.splice(set, 1);
        editExercise.sets--;
        return this;
    }

    arr.addSet = function (exercise){
        this.indexOf(exercise).sets++;
        return this;
    }
    return arr;
}

这就是他们的名字：

const app = Vue.createApp({
    // All data for the app, must return an object
    data() {
        return {
            exerciseList: new ExerciseCollection().add({
                id: 0, title: 'Bench Press', date: '2024-04-03',
                sets: 2, reps: [10, 10], weight: [185, 185]
            }),
            dayList: new DayExerciseCollection(),
            reviewList: new ReviewCollection(),
            daysReview:{},
            selectedEditExercise: {},
            currentDay: ''
        };
    },
    methods: {
        
        addExercise(exercise, date){
            this.exerciseList.add(exercise, date);
            this.dayList.add(exercise, date);
        },
...(rest of the file works properly but is pretty long wont put it in here)

Answer 1

看来问题可能在于 add 函数如何修改

exerciseList

，导致其丢失其方法，包括 add 本身。 add 方法中的上下文 (this) 引用原始数组，但是当您使用 new

exerciseList

重新分配

ExerciseCollection().add(...)

时，您将仅使用 add 函数中的

exerciseList

替换

returned array

，而不是整个修改后的

 ExerciseCollection

物体。

请记住，在 JavaScript 中，函数是一等对象，当您分配 arr.add 的返回值时，您分配的不是函数，而是函数的结果。

这是保留方法的修改方法：

const app = Vue.createApp({
    // All data for the app, must return an object
    data() {
        return {
            exerciseList: new ExerciseCollection(),
            dayList: new DayExerciseCollection(),
            reviewList: new ReviewCollection(),
            daysReview: {},
            selectedEditExercise: {},
            currentDay: ''
        };
    },
    created() {
        // Add initial exercise when the instance is created
        this.addExercise({
            id: 0, title: 'Bench Press', date: '2024-04-03',
            sets: 2, reps: [10, 10], weight: [185, 185]
        });
    },
    methods: {
        
        addExercise(exercise, date){
            this.exerciseList.add(exercise, date);
            this.dayList.add(exercise, date);
        },
        // ... rest of your methods
    },
});

它将您对

exerciseList

的初始化从数据对象中取出，并将其放置在 Vue 组件的已创建生命周期挂钩中。在创建的钩子中，它调用

addExercise

添加初始锻炼。