Programing

자바 스크립트 객체 감지 : 도트 구문 대 'in'키워드

lottogame 2020. 11. 24. 07:30
반응형

자바 스크립트 객체 감지 : 도트 구문 대 'in'키워드


UA가 특정 JS 속성을 구현하는지 여부를 감지하는 두 가지 방법 : if(object.property)if('property' in object).

어떤 것이 더 좋고 가장 중요한 이유에 대한 의견을 듣고 싶습니다. 하나가 다른 것보다 분명히 낫습니까? 객체 속성 감지를 수행하는이 두 가지 방법 이상이 있습니까? 미학보다는 브라우저 지원, 함정, 실행 속도 등을 다루십시오.

편집 : 독자는 jsperf.com/object-detection 에서 테스트를 실행하는 것이 좋습니다.


  • if(object.property)

    (당신이 원하는이다)가 설정되어 있지 않은 경우에 실패, 그리고 경우에 따라서는 일부 falsey의 값으로 설정되어있는 예를 들어 undefined, null, 0등 (당신이 원하는 바가 아니다).

    var object = {property: 0};
    if(object.isNotSet) { ... } // will not run
    if(object.property) { ... } // will not run
    
  • if('property' in object)

    실제로 개체가 있는지 여부를 반환하기 때문에, 약간 더 정말 뿐만 아니라 그 가치를보고, 속성을 가지고있다.

    var object = {property: 0};
    if('property' in object) { ... } // will run
    if('toString' in object) { ... } // will also run; from prototype
    
  • if(object.hasOwnProperty('property'))

    인스턴스 속성과 프로토 타입 속성을 구분할 수 있기 때문에 더 좋습니다.

    var object = {property: 0};
    if(object.hasOwnProperty('property')) { ... } // will run
    if(object.hasOwnProperty('toString')) { ... } // will not run
    

1 초에 수천 번 확인하지 않는 한 여기서 성능은 그다지 큰 문제가 아니라고 말하고 싶지만이 경우 다른 코드 구조를 고려해야합니다. 이러한 모든 기능 / 구문은 최근 브라우저에서 지원되며 hasOwnProperty오랫동안 사용되어 왔습니다.


편집 : 다음 과 같은 객체로 모든 항목 (객체가 아닌 것 포함)을 전달하여 속성의 존재를 확인하는 일반 함수를 만들 수도 있습니다.

function has(obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
}

이제 작동합니다.

has(window, 'setTimeout'); // true

하더라도 window.hasOwnProperty === undefined(IE 버전 8 이하의 경우이다).


그것은 당신이 성취하고 싶은 것에 달려 있습니다. 호스트 객체 (예 : window및 DOM 노드) 에 대해 이야기하고 있습니까? 그렇다면 가장 안전한 검사는 typeof내가 아는 모든 호스트 개체에 대해 작동하는입니다.

 if (typeof object.property != "undefined") { ... }

메모:

  • object.hasOwnProperty()호스트 객체는 피해야 합니다. 호스트 객체는 상속 할 의무가 없기 때문에 메소드 Object.prototype가 없을 수 있습니다 hasOwnProperty()(실제로 IE <9에서는 일반적으로 그렇지 않습니다).
  • 간단한 부울 강제 변환 (예 if (object.property) { ... }:)은 거짓 값에 대해 거짓 부정을 제공하므로 속성의 존재 여부를 제대로 테스트하지 못합니다. 예를 들어 빈 텍스트 영역의 if (textarea.selectionStart) { ... }경우 속성이 존재하더라도 블록을 실행하지 않습니다. 또한 일부 호스트 개체 속성은 부울 (예 :)로 강제 변환하려고 할 때 이전 버전의 IE에서 오류를 발생시킵니다 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); if (xhr.responseXML) { ... }.
  • in연산자는 속성의 존재의 더 나은 테스트이지만, 호스트 오브젝트에 대한 지원에 대한 보장은 다시 한 번 없다.
  • 이런 종류의 작업에 대한 성능을 고려하지 않는 것이 좋습니다. 프로젝트에 가장 안전한 옵션을 선택하고 나중에 최적화하십시오. 속성 존재 확인보다 최적화를위한 훨씬 더 나은 후보가 거의 확실합니다.

이에 대한 배경 지식을 더 알고 싶다면 Peter Michaux의 훌륭한 기사를 추천 합니다 .


확실히 if ('property' in object)올바른 방법입니다. 실제로 속성이 객체에 있는지 (또는 프로토 타입 체인에 있는지, 아래에서 더 자세히) 테스트합니다.

if (object.property)다른 한편으로, '속성'을 진실 / 불확실한 가치로 강요합니다. 속성이 설정되지 않은 경우 "정의되지 않음"을 반환하고 false로 강제 변환되고 작동하는 것처럼 보입니다. 그러나 이것은 다른 여러 속성 값에 대해서도 실패합니다. 자바 스크립트는 진실과 거짓으로 취급하는 부분에서 일관성이없는 것으로 악명이 높습니다.

마지막으로 위에서 말했듯 'property' in 'object'이 프로토 타입 체인의 어느 곳에 나 있으면 true를 반환합니다. 체인의 상위 어딘가가 아닌 객체 자체에 있는지 테스트하려면 다음 hasOwnProperty과 같은 방법 을 사용합니다 .

if (object.hasOwnProperty('property')) ...

첫 번째는 "property"가 0의 false이면 실패합니다. 실제로 속성이 있는지 확인하려면 속성을 확인 object.property !== undefined하거나 키워드 내를 사용해야합니다.

[편집하다]

hasOwnProperty 함수도 있지만 실제로 사용하지 않았기 때문에 그것에 대해 많이 말할 수 없습니다. 속성이 프로토 타입에 설정되어 있으면 true를 반환하지 않을 것이라고 생각하지만 때로는 원하는 경우, 다른 경우에는 원하지 않습니다.


이렇게하면 스크립팅 호스트에 관계없이 window.hasOwnProperty를 자신이나 다른 것을 참조하는 것으로 사용할 수 있습니다.

// No enclosing functions here
if (!('hasOwnProperty' in this))
    function hasOwnProperty(obj, prop) {
        var method = Object.prototype.hasOwnProperty;
        if (prop === undefined)
            return method.call(this, obj);
        return method.call(obj, prop);
    }

//Example of use
var global = global || this; //environment-agnostic way to get the global object
var x = 'blah';
WScript.Echo(global.hasOwnProperty('x') ? 'true' : 'false'); //true

//Use as non-object method
var y = { z: false };
WScript.Echo(hasOwnProperty(y, 'z') ? 'true' : 'false'); //true
WScript.Echo(hasOwnProperty(y, 'w') ? 'true' : 'false'); //false

// true ಠ_ಠ
WScript.Echo(hasOwnProperty(global, 'hasOwnProperty') ? 'true' : 'false');

참고 URL : https://stackoverflow.com/questions/7174748/javascript-object-detection-dot-syntax-versus-in-keyword

반응형