如何從JavaScript中的原型訪問對象屬性？

Question

我在下面的類時，我打電話printData我得到this.collection是未定義的。

如何從printData（）中的原型訪問this.collection？或者我需要改變班級結構。實際上，對象返回實體返回層次結構中的對象的函數。

在此先感謝！

樣品等級：

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

用法：

var a = new DbProvider({ "Name": "John" }); 
a.create().action().printData(); 

Answer 1

你可以保存this參考，並將其綁定到printData功能

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
     var that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     var self = this; 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + this.collection.Name); 
 
        }.bind(self) 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

或者你可以重構了一下，移動that到DbProvider外範圍和使用that在printData

var DbProvider = (function() { 
 
    var that; 
 
    function DbProvider(db) { 
 
     that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + that.collection.Name); 
 
        } 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

Answer 2

保持ES5語法和調用結構的解決辦法是：

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     var that = this; 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         console.log('Hello ' + that.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

肯定不是優雅，但它的工作原理:)

如果您不想更改結構，如果將功能更改爲arrow functions，則可以實現此行爲。

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action:() => { 
       var y = { 
        printData:() => { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

你創建這個「類」的方式絕對不是標準。讓我知道你是否想要一個如何更好地構造它的例子。

Answer 3

只需要正確地跟蹤這個指針，這樣

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
    this.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
    var self = this; 
 
    return { 
 
     action: function() { 
 
     var y = { 
 
      printData: function() { 
 
      alert('Hello ' + self.collection.Name); 
 
      } 
 
     }; 
 
     return y; 
 
     } 
 
    }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 

 

 
let dbProvider = new DbProvider({ 
 
    Name: "test" 
 
}); 
 
dbProvider.create().action().printData();