Question

我不知道为什么我会收到此错误：

错误是：无法获得值'0'：对象为空或未定义

这是我的代码：

var Box = function(width, height, type){
var top = 0,
    right = 0;
this.width = width;
this.height = height;
this.position = {
    top: top,
    right: right,
    set: function(top, right){
        this.top = top;
        this.right = right;
    }
};
this.type = type;
this.area = this.width * this.height;
this.className = "box_" + this.width + "_" + this.height;};

    var box01 = new Box(2, 2, "slideShow");
    var box02 = new Box(2, 1, "clinics");
    var box03 = new Box(1, 2, "articles");
    var box04 = new Box(1, 1, "news");
    var box05 = new Box(2, 1, "news");
    var box06 = new Box(2, 1, "clinics");

    var boxArray = [];
    boxArray.push(box01);
    boxArray.push(box02);
    boxArray.push(box03);
    boxArray.push(box04);
    boxArray.push(box05);
    boxArray.push(box06);



var BoxUtility = function(parentId) {
this.parentId = parentId;
this.boxList = Array.prototype.pop.apply(arguments);
Object.defineProperties(this, {
    totalArea: {
        get: function(){
            var x = 0;
            for(var i = 0, len = this.boxList.length; i <= len - 1; i++){
                x = x + this.boxList[i].area;
            };
            return x;
        }
    },
});};


BoxUtility.prototype.positionCalculateMasonry = function(preDefinedRows, firstColumnWidth, restColumnWidth, itemIndex){
var firstColumnArea = preDefinedRows * firstColumnWidth,
    restColumnArea = preDefinedRows * restColumnWidth,
    firstColumnAreaRemained = firstColumnArea,
    restColumnAreaRemained = restColumnArea,
    Position = function(top, right){
        this.top = top;
        this.right = right;
        this.restFirstWidth = firstColumnWidth - right;
        this.restSecondWidth = restColumnWidth - right;
    },
    firstPosition = new Position(0, 0),
    positionStack = [],
    boxStack = [],
    indexStack = [];

positionStack.push(firstPosition);

for(var i = itemIndex, len = this.boxList.length; i <= len - 1; i++){
    if(this.boxList[i].area <= firstColumnAreaRemained){
        var temp = positionStack.filter(function(el){
            return (el.restFirstWidth >= this.boxList[i].width);
        });
    } else {

    };
};};

var x = new BoxUtility(clinica ,boxArray);
x.positionCalculateMasonry(5, 3, 2, 0);

我在这里收到此错误：

return (el.restFirstWidth >= this.boxList[i].width);

我相信它在过滤方法中传递this关键字

任何帮助？感谢

Answer 1

BoxUtility.prototype.positionCalculateMasonry = function(preDefinedRows, firstColumnWidth, restColumnWidth, itemIndex){
var firstColumnArea = preDefinedRows * firstColumnWidth,
    restColumnArea = preDefinedRows * restColumnWidth,
    firstColumnAreaRemained = firstColumnArea,
    restColumnAreaRemained = restColumnArea,
    Position = function(top, right){
        this.top = top;
        this.right = right;
        this.restFirstWidth = firstColumnWidth - right;
        this.restSecondWidth = restColumnWidth - right;
    },
    firstPosition = new Position(0, 0),
    positionStack = [],
    boxStack = [],
    indexStack = [],
    that = this;

positionStack.push(firstPosition);

for(var i = itemIndex, len = this.boxList.length; i <= len - 1; i++){
    if(this.boxList[i].area <= firstColumnAreaRemained){
        var temp = positionStack.filter(function(el){
            return (el.restFirstWidth >= that.boxList[i].width);
        });
    } else {

    };
};};

海报代码的问题在于回调中的上下文不可用。添加的是用于保存上下文的变量“that”。然后使用闭包将上下文传递给回调。

Answer 2

this关键字将根据调用的上下文引用不同的对象。

简单地说，错误表明boxList在<{1}}引用的对象中定义了this 。

Answer 3

在filter函数this内部意味着与外部不同的东西，因为函数是它自己的对象方法。

您需要将外部this存储在另一个变量中，然后通过闭包将其传递给filter函数：

// Outside the for loop
var that=this;
...
// Inside filter()
return el.restFirstWidth >= that.boxList[i].width;

对象数组中的THIS关键字过滤器方法

3 个答案: