자바 스크립트에서 속성을 만들 때 올바른 방법이나 더 나은 구문이 무엇입니까?

Question

속성 (키)은 대괄호뿐만 아니라 점 표기법을 사용하여 액세스하고 설정할 수 있습니다. 어떤 조언 때 속성 추가는 myObj.myProp 또는 myObj["myProp"]이어야한다 점 프로토 타입 구문

var myObj = {}; 
myObj.myProp1 = 'value1'; //works, an expando property 
myObj[myProp2] = 'value2'; // FAILS, myProp2 is undefined 
myObj["myProp2"] = 'value2'; // works, an expando property 
myObj[2010]= 'value'; //note the key is number, still works, an expando property?? 
myObj.2010 = 'value'; // FAILS. to use dot notation, key must be a string 

myObj.prototype.myProp3 = 'value3' // whats the advantage? 

Answer 1

도트 구문을 사용하여 때에 프로퍼티 이름은 식별자이다

var myObj = {}; 
myObj.myProp1 = "value1"; 
myObj.myProp2 = "value2"; 

속성 이름으로하는 식별자 명명 규칙을 수행하는데, 이는 예를 들어 숫자로 시작할 수 없다.

var myObj = {}; 
var prop1 = "myProp1"; 
myObj[prop1] = "value1"; 
myObj["myProp" + 2] = "value2"; 

: 괄호에 사용되는 어떤

var myObj = {}; 
myObj["myProp1"] = "value1"; 
myObj["myProp2"] = "value2"; 

변수 또는 문자열 결과 표현의 모든 종류가 될 수 있습니다

브래킷 구문을 사용하여

는 속성 이름은 문자열입니다

숫자를 속성 이름으로 사용하면 자동으로 문자열로 변환되므로 결과는 같습니다.

myObj[2010] = "value"; 
myObj["2010"] = "value"; 

또한 값을 설정하는 객체 리터럴을 사용할 수 있습니다

var myObj = { myProp1: "value1", myProp2: "value2" }; 

(. 그 {} 만 등록하지 않고, 또한 객체 리터럴 주)

객체의 프로토 타입을 사용는 경우에만 유용합니다 객체 유형의 이름을 지정했거나 그렇지 않은 경우 객체에 프로토 타입을 할당했습니다. 객체 리터럴을 사용하여 객체를 만들면 각 객체에는 고유 한 프로토 타입이 있으므로 프로토 타입에 아무것도 넣지 않으면 객체에 넣는 것과 동일한 효과가 있습니다.

Answer 2

를 사용합니다. 이것은 자바 스크립트에서 사용될 때 이상적으로 따라하는 시나리오이자 좋은 연습입니다.

Answer 3

var myObj = function() { 

}; 
myObj.prototype.myProp3 = 'value3' // whats the advantage? 

myObj를 생성자로 사용하여 여러 객체를 작성하려는 경우이 옵션을 사용해야합니다. 즉.

var obj1 = new myObj(); 

다음으로 obj1 또한 myProp3 속성을

편집을 얻을 것이다 :는 위의 예를 편집했다. myObj를 생성자로 사용하려면 함수로 선언해야합니다.

Answer 4

개체 리터럴에 프로토 타입이 없기 때문에 myObj.prototype.myProp3 = 'value3'이 이 아닌이 사용되어야합니다. 글쎄요, 그들은 prototype 속성이 없습니다 (myObj.prototype은 정의되지 않음을 알 수 있습니다).

프로토 타입은 함수에 사용되어 new 키워드를 사용하여 해당 함수에서 생성 된 모든 개체의 기본 속성을 설정합니다. 개별 객체에 속성을 할당하는 데 사용하기위한 것이 아닙니다.

Answer 5

나를 위해, 그것은 내가 어떻게 개체를 사용 하느냐에 달려있다.

연관 배열, 해시지도 또는 도트 구문을 사용할 수없는 곳에서 사용하려는 경우 [ 및 ]을 사용합니다.

그러나 객체처럼 취급하고 있다면 . 구문을 사용합니다.

Answer 6

기본적으로 "."문자를 통해 객체의 속성에 액세스하는 것의 차이는 없습니다. 구문 또는 키를 통해.

var obj = new function(){this.x = "value";} 
alert(obj.x === obj['x']); //it will output true 

"."문자를 사용할 수없는 경우가 있습니다. (당신이 당신의 숫자 키와 지적), 속성의 이름이 액세스하려는 때문에하는 것은 유효한 변수 이름이 아닙니다 :

var obj = new function(){this['my-value'] = "my value";} 
alert(obj['my-value']); // it will output "my value" 
alert(obj.my-value); // it will trigger an exception , because the javascript 
//interpretor interprets "obj.my-value" as the 
//property "my" of obj minus the variable "value" 

큰 차이는 브라우저가 구문을 처리하는 방식이다. here을 볼 수 있듯이, 내 친구가 몇 가지 테스트를 수행했으며 크롬과 IE는 도트 구문을 사용하여 훨씬 빠르게 작동하는 반면 Firefox와 Safari는 키 구문에 더욱 관심을 갖는 것으로 보입니다.
결론적으로 "."이있는 상황이 있지만 거의 항상 그 중 하나를 사용할 수 있습니다. 조금 준비가 안된다.

객체를 정의 할 때 모든 인스턴스에 멤버를 첨부 할 수 있지만 객체의 프로토 타입에 멤버를 연결할 수도 있습니다. 즉, 정의 된 유형의 새 객체가 만들어 질 때마다, 그 프로토 타입으로부터 그 멤버를 자동으로 상속받습니다. 나는 예와 더 잘 이해 생각 :

 
function Point(x,y){this.x = x;this.y = y;} 
Point.prototype.toString = function(){ 
    return "I am a point with my x coord at "+this.x+" and my y coord at "+this.y; 
} 

function Point2(x,y){ 
    this.x = x; 
    this.y = y; 
    this.toString = function(){ 
    return "I'm a point too.I'm at x:"+this.x+", y:"+this.y; 
    }; 
} 

당신이 new Point2을 만들 때, 그것은 toString 방법 인스턴스 메서드이고 자바 스크립트 통역원이 방법에 대한 메모리를 할당합니다.
'새 포인트'를 만들면 toString 메소드가 프로토 타입 속성에 연결됩니다. 이는 해당 메소드에 할당 된 메모리가 없음을 의미합니다.

 
var p = [], p2 = []; 
for(var i = 0; i < 100000000; i++) 
    { 
    p.push(new Point(0,0)); 
    p2.push(new Point2(0,0)); 
    } 

이를 테스트하는 경우, 당신은 개체를 모두 완벽하게 작동하는지 볼 수 있지만 Point2 객체가 시스템에서 좀 더 많은 메모리를 취할 것입니다. 왜 그런가요?
new Point() 메서드를 호출 할 때 객체는 "toString"이라는 멤버가 없다는 것을 인식하고 프로토 타입 체인을 검색하기 시작하고 'toString'멤버를 반환합니다. 객체의 선언에서.
위의 예에서 p의 모든 항목은 toString 메서드가 프로토 타입에 언급 된 메서드를 가리키고 p2의 모든 항목은 메서드의 각 복사본을 가리 킵니다. 나중에 toString 방법을 수정하려면
또한, 그것은 모든 Point 인스턴스를 수정하는 것은 매우 쉬운 것입니다 : 그 후
Point.prototype.toString = function(){return "I'm a smarter point";}; , new Point의 모든 인스턴스는 "나는 똑똑한 점이야"반환합니다 전화 할 때는 toString 메서드입니다.
Point2 인스턴스에 맞게 수정하려고하면 조금 더 어렵습니다.당신은 Point2.toString = function(){return "I'm a dumber point";}이 예상대로 수동으로 각 인스턴스에 대한 방법을 변경해야합니다 작동하지 않습니다 발견 할 것이다 :

이

 
for(var i in p2) 
    p2[i].toString = function(){return "I'm a dumber point";}; 

난 당신이 방법은 더 나은 어떤 결정 드리겠습니다 : P