「變量不是函數」錯誤，同時讀取挖空變量

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>