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

时间:2017-08-13 23:27:12

标签: javascript

编辑:为了清晰起见,我提供了更多代码 我使用构造函数创建了一个表来创建多个表体,但我不希望页眉和页脚重复,所以我分别创建了这些。但是,创建的属性之一是填充的空数组。我目前无法访问它。

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”循环的指令时,我得到一个错误,说明未定义。放置“这个”。在它没有改变结果之前。我想不出为什么这不起作用的任何原因。在原型函数期间正确填充了数组。为简洁起见,我删除了一些与问题无关的代码。

3 个答案:

答案 0 :(得分:-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上运行此代码。

答案 1 :(得分:-1)

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

如果您使用Store.prototype.arrCookie = 'abc';,实际上无效,因为它会被this.arrCookie = []覆盖;在你的函数体内部充当构造函数但是如果你通过原型添加属性,你将能够在新对象中访问它(例如。Store.prototype.myNewArrCookie = 123;将是可以通过以后创建的对象访问。)

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

答案 2 :(得分:-2)

你可以做一个存取方法。

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

getArrCookie返回this.arrCookie