如何在Javascript中调用构造函数之外的属性值？

Question

编辑：为了清楚起见，我包含了更多代码 我已经使用构造函数创建了一个表来创建多个表体，但我不希望页眉和页脚重复，所以我分别创建了它们。但是，创建的属性之一是一个被填充的空数组。我目前无法访问它。

function Store(storeId, minCustomer, maxCustomer, avgSale) {
    this.storeId = storeId;
    this.minCustomer = minCustomer;
    this.maxCustomer = maxCustomer;
    this.avgSale = avgSale;
    this.arrCookie = [];
    this.addDom();
};
Store.prototype.addDom = function() {
    this.cookiesPerHour();
    var findTable = document.getElementById('table');
    var tBody = document.createElement('tbody');
    var trtBody = document.createElement('tr');
    var tdstoreId = document.createElement('td');
    tdstoreId.innerHTML = this.storeId;
    findTable.appendChild(tBody);
    tBody.appendChild(trtBody);
    trtBody.appendChild(tdstoreId);
    var totalStoreCookies = 0;
    for (var i = 0; i < this.arrCookie.length; i++) {
        var info1 = document.createElement('td');
        info1.innerHTML = this.arrCookie[i];
        trtBody.appendChild(info1);
    };
    for (var i = 0; i < this.arrCookie.length; i++) {
        totalStoreCookies += this.arrCookie[i];
    };
    var info2 = document.createElement('td');
    info2.innerHTML = totalStoreCookies;
    trtBody.appendChild(info2);
};

function makeTHF() {
    var totalCookies = 0;
    var findTable = document.getElementById('table');
    var tHead = document.createElement('thead');
    var trtHead = document.createElement('tr');
    var findTable = document.getElementById('table');
    var tFoot = document.createElement('tfoot');
    var trtFoot = document.createElement('tr');
    var hourlyTotal = document.createElement('td');
    findTable.appendChild(tHead);
    tHead.appendChild(trtHead);
    findTable.appendChild(tFoot);
    tFoot.appendChild(trtFoot);
    for (var i = 0; i < 17; i++) {
        var time = document.createElement('th');
        time.innerHTML = arrTime[i];
        trtHead.appendChild(time);
    };
    for (var i = 0; i < arrCookie.length; i++) {
        var storeName = [PDXAirport, PioneerSquare, Powells, StJohns, Waterfront];
        hourlyTotal.innerHTML = 'Total';
        var colTotal = 0;
        for (var j = 0; j < storeName.length; j++) {
            colTotal += storeName[j].arrCookie[i];
            hourlyTotal.innerHTML = colTotal;
        };
        trtFoot.appendChild(hourlyTotal);
        console.log(storeName);
    };
};
var PDXAirport = new Store('PDX Airport', 23, 65, 6.3);
var PioneerSquare = new Store('Pioneer Square', 3, 24, 1.2);
var Powells = new Store('Powell\'s', 11, 38, 3.7);
var StJohns = new Store('St. John\'s', 20, 38, 2.3);
var Waterfront = new Store('Waterfront', 2, 16, 4.6);
makeTHF();

当我在 makeTHF 函数中尝试使用 arrCookie 时，当我尝试使用 arrCookies.length 作为“for”循环的指令时，我收到一条错误消息 undefined。放置“这个”。在它不改变结果之前。我想不出任何为什么这不起作用的原因。在原型函数期间正确填充了数组。为简洁起见，我删除了一些与问题无关的代码。

Answer 1

您可以直接调用属性store.arrCookies 或创建一个原型函数作为getter：

Store.prototype.getCookies = function() {
  return this.arrCookie;
};

这是一个工作示例：

function Store(storeId, minCustomer, maxCustomer, avgSale) {
    this.storeId = storeId;
    this.minCustomer = minCustomer;
    this.maxCustomer = maxCustomer;
    this.avgSale = avgSale;
    this.arrCookie = [];
    this.addDom();
};

Store.prototype.addDom = function() {};

Store.prototype.addCookie = function(cookie) {
  this.arrCookie.push(cookie);
};

Store.prototype.getCookies = function() {
  return this.arrCookie;
};

var store = new Store(1, 0, 1, 10);
store.addCookie('cookie1');
store.addCookie('cookie2');
console.log(store.arrCookie);
console.log(store.getCookies());

您可以在repl.it 上运行此代码。

Answer 2

如果您执行var s = new Store(...); 之类的操作，则可以通过s.arrCookie 访问arrCookie 属性。如果您还将函数转换为最后返回this，您也可以通过简单的var s = Store(...); 访问arrCookie。

如果你使用Store.prototype.arrCookie = 'abc';，实际上不会有任何效果，因为它会被this.arrCookie = []覆盖；在作为构造函数的函数体内，但如果您通过原型添加属性，您将能够在新对象中访问它（例如，Store.prototype.myNewArrCookie = 123; 将可被稍后创建的对象访问） .

长话短说，我认为这里有一个误解，您可以简单地更改代码以合并this tutorial 和此SO question 中描述的封装模式以获得所需的结果

Answer 3

你可以只做一个访问器方法。

var theStore = new Store()
theStore.getArrCookie();

getArrCookie 返回 this.arrCookie。