与hasOwnProperty混淆 [英] confusion with hasOwnProperty

问题描述

我写了下面的代码，以及更多一些代码，以快速构建3屏幕Web应用程序的原型.不打算将其用于生产.该项目快要完成了，但是有一个困扰我的问题.我收到一个错误-Cannot read property 'first_name' of undefined，即使首先检查该对象是否具有报告为undefined的属性.意识到代码不是这样的事情应该如何处理的一个例子，但是为什么它不起作用?为了防止上下文冲突，我什至克隆了数组-可能是不必要的.导致未定义错误的原因是什么?

I wrote the below code, and some more, to quickly build a prototype for a 3 screen web application. Not planning to use it for production. The project is almost finished, but there is one issue that is perplexing me. I get an error - Cannot read property 'first_name' of undefined, even though there is a check first whether the object has the property reported as undefined. Realize the code is not an example of how such things should be handled, but why does it not work? To prevent context funkiness, I even clone the array - probably unnecessary. What causes the undefined error?

    $.ajax({
        url: '/api/v1/departures/' + routeID + '/',
        method: 'GET',
        headers: {
            'Authorization': 'Token '+ owner_token]
        },
        contentType:'application/json',
        success: function(departures) {
            console.log('departures: ' + JSON.stringify(departures));
            if ( departures && ( 0 < departures.length)) {
                var template = '';
                for ( var j = 0; j < departures.length; j++) {
                    if (departures[j].route == routeID) {
                        var seats = (departures[j].seats).slice(0);
                        for ( var i = 0; i < seats.length; i++) {
                            template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
                                 '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
                                 '<div class="right-seat-name">' +
                                 seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '' +
                                 '</div>' +
                                 '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                                 seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available'  +
                                 '</div>' +
                                 '</div>';
                        }
                    }
                }
                $('div.right-top-controls').after(template);
            }
        },
        error: function() {
            alert('error!');
        }
    });

请告知.

谢谢.

推荐答案

hasOwnProperty 仅检查对象是否具有该名称的属性.它不会检查该值是多少.该值可能是undefined.

// Doesn't have the property and accessing it returns undefined
var A = {};
console.log(A.hasOwnProperty('prop'));
console.log(A.prop);


// Has the property and the value is not undefined
var B = {
  prop: 1
};
console.log(B.hasOwnProperty('prop'));
console.log(B.prop);

// Has the property AND it's value is undefined
var C = {
  prop: undefined
};
console.log(C.hasOwnProperty('prop'));
console.log(C.prop);

这意味着seats[i]可能非常具有passenger属性，但其值仍可能是undefined.

This means that seats[i] may very well have a passenger property but it's value could still be undefined.

还有一个问题，您在字符串连接期间使用三元运算本质上，+的优先级高于?:的优先级，这导致在评估条件之前发生串联.要解决此问题，请将三元数用括号括起来.

There's also the problem that you're using a ternary operation during string concatenation. Essentially, + has higher precedence than ?: which results in the concatenation occurring before the conditional is evaluated. To fix this, wrap your ternaries in parentheses.

template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
               '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
               '<div class="right-seat-name">' +
                 (seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '') +
               '</div>' +
               '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                 (seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available')  +
               '</div>' +
             '</div>';

这篇关于与hasOwnProperty混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！