獲取錯誤「property does not exist」

Question

我修改了我的問題以更具體。現在我不在乎期望的行爲，我只需要糾正語法錯誤

我正在學習this tutorial我在這段代碼中遇到一個錯誤。

嚴重性：偏移PagerserviceProvider '上類型不存在' '屬性'： '錯誤'

消息'。

實際上，我對這三個變量有同樣的錯誤。

that.pageSize，that.offset，that.size

public async getPager(tableName:string,pageSize: number = 10) { 
let pageSize = pageSize; 
let offset = 0; 
let limit = pageSize; 
let size = await this.getTotal(tableName); 
let that = this; 
return { 
     initialPage:function(){ 

      return new Promise((resolve,reject)=>{ 
       var d = []; 
       that.executeSql(tableName,limit,offset).then((data)=>{ 
        console.log(JSON.stringify(data)); 
        for(var i = 0 ; i < data.rows.length ; i++) 
        { 
         d.push(data.rows.item(i)); 
        } 
        resolve(d); 
       },(e)=>{ 
        reject(e); 
       }); 
      }); 

     }, 
     nextPage:function(){ 
      if(that.offset <= that.size - that.pageSize) 
      { 
       that.offset += that.pageSize; 
      } 
      return new Promise((resolve,reject)=>{ 
       var d = []; 
       that.executeSql(tableName,limit,offset).then((data)=>{ 
        for(var i = 0 ; i < data.rows.length ; i++) 
        { 
         d.push(data.rows.item(i)); 
        } 
        resolve(d); 
       },(e)=>{ 
        reject(e); 
       }); 
      });      
     }    
    };} 

Answer 1

當您使用關鍵字function來聲明一個函數時，函數的這個並不是指上面的this。所以在函數體中使用this，就是指函數本身。

您面臨的問題與您的函數在已定義this的類中聲明的事實有關，因此您需要一種方法在嵌套函數內引用上層this。

class Test { 

    hello() { console.log('hello') } 

    method() { 
    this.hello() // It will work because `this` refers to the class 
    function sayHello() { 
     return this.hello() 
     // it won't work because `this` refers to the function sayHello 
    } 
    return sayHello() 
    } 
} 

要繞過這個限制，你可以保存你的上this在一個變量，而你的代碼是在上範圍。這個變量通常被稱爲that或self。

class Test { 

    hello() { console.log('hello') } 

    method() { 
    var that = this // that is now refering to the class 
    this.hello() // It will work because `this` refers to the class 
    function sayHello() { 
     return that.hello() 
     // that is still refering to the class so it will succeed 
    } 
    return sayHello() 
    } 
} 

編輯：

另一特技避免使用that是使用ES6箭頭功能。在箭頭函數中，this總是指上範圍。

class Test { 

    hello() { console.log('hello') } 

    method() { 
    this.hello() // It will work because `this` refers to the class 
    // `this` refers to the upper scope by default so it works 
    const sayHello =() => this.hello() 
    return sayHello() 
    } 
} 

編輯2：

你的代碼應該是：

public async getPager(tableName: string, pageSize: number = 10) { 
    let pageSize = pageSize; 
    let offset = 0; 
    let limit = pageSize; 
    let size = await this.getTotal(tableName); 
    let that = this; 
    return { 
     initialPage: function() { 

      return new Promise((resolve,reject)=>{ 
       var d = []; 
       that.executeSql(tableName, limit, offset).then(data => { 
        console.log(JSON.stringify(data)); 
        for(var i = 0 ; i < data.rows.length ; i++) { 
         d.push(data.rows.item(i)); 
        } 
        resolve(d); 
       }, e => { 
        reject(e); 
       }); 
      }); 

     }, 
     nextPage: function() { 
      if(offset <= size - pageSize) { 
       offset += pageSize; 
       // no need to use `that` because you used `let` 
      } 
      return new Promise((resolve, reject) => { 
       var d = []; 
       that.executeSql(tableName, limit, offset).then(data => { 
        for(var i = 0 ; i < data.rows.length ; i++) { 
         d.push(data.rows.item(i)); 
        } 
        resolve(d); 
       }, e => { 
        reject(e); 
       }); 
      });      
     }    
     }; 
    } 

Answer 2

「那個」是用來存儲的原始值的變量只是名字「這個」在開始你的代碼，因爲'this'的值發生了變化。變量名稱可能很容易成爲「狗」或「蘋果」。

如果您打算在該時間點訪問「this」的當前值，您可以選擇稍後在代碼中使用'this'。否則，你可能會引用你原來存儲它的值的​​變量，例如'那'，'狗'或'蘋果'。

Answer 3

getPager是一個方法：如果你有一個已經失去了上下文調用它，that將獲得當前this值，沒有指出正確的上下文。

const someInstance = new SomeClass() 

someInstance.getPager() // You call getPager directly from the someInstance context 

someHTMLButton.onClick = someInstance.getPager // Here the getPager method lost its context 

一種解決方案是結合getPager到someInstance。通過這種方式，它始終將其上下文this指向someInstance。

someHTMLButton.onClick = someInstance.getPager.bind(someInstance)