“变量不是函数”错误，同时读取挖空变量

Question

我在我的web项目中使用了prototypejs和knockout。

首先让我解释一下整体结构。

我有一个名为userViewModel的基类，并且在这个类定义中声明了一个名为accNumber的可观察变量。

userViewModel = Class.create(baseViewModel , { 
     accNumber: ko.observable("") 
}); 

还有另一个类是从我的基类派生的，计算变量名为accNumberComputed在此派生类中声明。

femaleUserViewModel = Class.create(userViewModel , { 
     accNumberComputed : ko.pureComputed({ 
       read: function() { 
        return this.accNumber();  
       }, 
       write: function (value) { 
        this.accNumber(value); 
       }, 
       owner: this 
     }) 
}); 

我想更新accNumberComputed变量取决于accNumber observable变量。因此，accNumber变量上的任何修改都将在accNumberComputed变量上进行跟踪。

但是任何this.accNumber()语句的使用返回 “TypeError：this.accNumber不是函数”错误消息。 据我所知，一个可观察变量必须通过使用函数调用操作符来读取。

请问你能否给我启发这个问题。

Answer 1

如果你挖得更深一些，你会发现，在你的例子this.accNumber不仅不是一个函数，它实际上undefined。

您计算机中的read方法中的this指的是window。

我不熟悉prototypejs库，但可能有办法让它正确绑定到实例。

我对文档进行了快速浏览，并且看到了类似于“纯JavaScript方法”的工作方式。它的工作原理是这样的：

1. 不要将observable和compute添加到原型，而是在构造函数中创建它们。 （在prototypejs initialize）

此：

var userViewModel = Class.create(baseViewModel , { 
    accNumber: ko.observable("") 
}); 

变为：

var userViewModel = Class.create(baseViewModel, { 
    initialize: function() { 
    this.accNumber = ko.observable(""); 
    } 
}); 

显式调用基类的构造函数在扩展类的构造函数。

不知道，如果是做的最好的方法，但可以像做：

var Extended = Class.create(Base, { 
    initialize: function() { 
    Extended.superclass.prototype.initialize.call(this); 

在你的榜样，这是你会得到什么：

var baseViewModel = Class.create({ 
 
    initialize: function() { 
 
    this.base = "base"; 
 
    } 
 
}); 
 

 
var userViewModel = Class.create(baseViewModel, { 
 
    initialize: function() { 
 
    this.accNumber = ko.observable("1"); 
 
    } 
 
}); 
 

 
var femaleUserViewModel = Class.create(userViewModel, { 
 
    initialize: function() { 
 
    femaleUserViewModel.superclass.prototype.initialize.call(this); 
 
    
 
    this.accNumberComputed = ko.pureComputed({ 
 
     read: function() { 
 
     return this.accNumber(); 
 
     }, 
 
     write: function(value) { 
 
     this.accNumber(value); 
 
     }, 
 
     owner: this 
 
    }) 
 
    } 
 
}); 
 

 
var janeDoe = new femaleUserViewModel(); 
 
console.log(janeDoe.accNumberComputed()); 
 
janeDoe.accNumberComputed(2); 
 
console.log(janeDoe.accNumberComputed());

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>