자바스크립트 객체를 이해하는 방법

JS 또는 객체 지향 프로그래밍 언어에서 객체는 속성과 메서드의 조합입니다. 속성에는 속성 이름과 속성 값이 포함됩니다. 이 값은 모든 유형의 데이터 또는 함수일 수 있습니다. 이 경우 함수를 메서드라고도 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1.1 객체란 무엇인가요?

실제 세계에서는 공, 테이블, 자동차 등이 모두 사물입니다.

물체는 우리가 특정한 방식으로 영향을 미치고 조작할 수 있는 설명 가능한 특성을 가진 것입니다.

JS 또는 객체 지향 프로그래밍 언어에서 객체는 속성과 메서드의 조합입니다.

속성은 속성 이름과 속성 값을 포함합니다. 이 값은 모든 유형의 데이터 또는 함수일 수 있습니다. 이 경우 함수를 메서드라고도 합니다.

JS에서는 접하는 거의 모든 것이 객체이므로 객체의 세부 사항에 대해 알아 보겠습니다.

1.2 물체의 특징?

객체에는 객체의 특징인 속성이 있습니다. 점 표기법을 통해 객체의 속성에 접근할 수 있습니다.

objectName.propertyName;

실제로 물체를 공과 비교하면 이 공은 속성, 색상 및 크기를 가진 물체입니다. 이는 다음과 같이 표현될 수 있습니다:

var ball = new Object();
ball.color = “red";
ball.size = 12;

객체에는 객체의 동작 방식을 정의하는 데 사용되는 메서드도 있습니다.

예를 들어, 이 공에는 얼마나 멀리 굴러갈 수 있는지 계산하는 롤링 방식과 얼마나 높이 점프할 수 있는지 계산하는 바운드 방식이 있을 수 있습니다.

는 다음과 같이 표현될 수 있습니다:

ball.roll = function() {
return this.size * laps
}

1.3 객체의 속성에 액세스

앞서 언급했듯이 점 표기법을 통해 객체의 속성에 액세스할 수 있지만, 이 경우에도 객체의 속성에 액세스할 수 있습니까? 점 표기법을 통한 객체:

var ball = new Object();
ball.color = “red";
ball.size = 12;
var spec = “color”;
ball.spec ??

여기서 변수 사양이 있고 이 변수 ​​사양을 통해 객체 속성에 액세스해야 한다고 가정합니다.

그러나 점 표기법을 사용하면 ball의 spec 속성에 액세스하고 정의되지 않은 값을 반환하게 되는데, 이는 spec이 변수가 아닌 속성으로 직접 처리됨을 나타냅니다.

변수의 값을 객체의 속성으로 가져오려면 어떻게 해야 하나요?

대괄호 표기법을 사용하여 액세스할 수 있습니다. 이 표기법은 속성 이름에서 동적으로 결정되므로 변수에 저장된 문자열을 통해 속성에 액세스할 수 있습니다.

ball[spec]; // red

1.4 열거된 개체 속성

또한 열거할 수 있습니다. for in 루프 문을 통해 객체의 모든 속성:

var ball = {color: “red”, size: 12, border: 2};
for (var prop in ball) {
console.log(“ball.” + prop + “=“ + obj[prop]);
}
// ball.color = red
// ball.size = 12
// ball.border = 2
// 如果希望继承的属性不显示，那么可以用hasOwnProperty函数来过滤一遍
var bar = {a: 1, b: 2, c: 3};
function Foo() {
this.color = 'red';
}
Foo.prototype = bar;
var obj = new Foo();
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(prop);
}
}

Object.keys(obj) 메서드를 사용하여 속성 이름 컬렉션의 배열을 반환할 수도 있습니다:

var obj = {a: “123”, b: “das”, c: “web”};
console.log(Object.keys(obj)); // [“a”,”b”,”c”];
var arr = [“a”, “b”, “c”];
console.log(Object.keys(arr)); // [“0”,”1”,”2”];

[권장 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트 객체를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!