자바스크립트 객체

JavaScript 개체는 속성과 메서드가 있는 데이터입니다.

실제 객체, 속성 및 방법

실생활에서 자동차는 객체입니다.

객체에는 무게, 색상 등과 같은 속성이 있으며 메서드에는 시작 및 중지 등이 포함됩니다.

모든 자동차에는 이러한 메서드가 있지만 실행되는 시간은 다릅니다. 모든 자동차에는 이러한 속성이 있지만 각 자동차의 속성은 다릅니다.

JavaScript 객체

JavaScript에서는 거의 모든 것이 객체입니다.

JavaScript에서는 객체가 매우 중요합니다. 객체를 이해하면 JavaScript도 이해할 수 있습니다.

JavaScript 변수 할당에 대해 배웠습니다.

다음 코드는 car 변수의 값을 "Fiat"로 설정합니다.

var car = "Fiat";

객체도 변수이지만 객체는 여러 값을 포함할 수 있습니다. (여러 변수).

var car = {유형:"Fiat", 모델:500, 색상:"흰색"};

위의 예에서는 3개의 값 ("Fiat", 500, "white")이 할당됩니다. 가변 자동차.

위의 예에서는 자동차 변수에 3개의 변수(유형, 모델, 색상)가 할당되었습니다.

Tip: JavaScript 개체는 변수의 컨테이너입니다.

객체 정의

문자를 사용하여 JavaScript 객체를 정의하고 생성할 수 있습니다.

Instances

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
            person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>

프로그램을 실행하여 사용해 보세요

정의 JavaScript 객체는 여러 줄에 걸쳐 있을 수 있습니다. 공백 및 줄 바꿈 필요하지 않음:

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
    </head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
    var person = {
        firstName : "John",
        lastName  : "Doe",
        age       : 50,
        eyeColor  : "blue"
    };
    document.getElementById("demo").innerHTML =
            person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요

객체 속성

"JavaScript 객체는 변수의 컨테이너"라고 말할 수 있습니다.

그러나 우리는 일반적으로 "JavaScript 객체를 키-값 쌍의 컨테이너"로 생각합니다.

키-값 쌍은 일반적으로 이름 : 값으로 작성됩니다(키와 값은 콜론으로 구분됩니다).

JavaScript 객체의 키-값 쌍을 종종 객체 속성이라고 합니다.

Tip: JavaScript 객체는 속성 변수의 컨테이너입니다.

객체 키-값 쌍은 다음과 같이 작성됩니다.

PHP의 연관 배열
Python의 사전
C 언어의 해시 테이블
Java의 해시 맵
Ruby 및 Perl의 해시 테이블

개체 속성에 액세스

두 가지 방법으로 개체 속성에 액세스할 수 있습니다.

방법 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网（php.cn)</title>
    </head>
<body>
<p>
    有两种方式可以访问对象属性：
</p>
<p>
    你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName : "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person.firstName + " " + person.lastName;
</script>
</body>
</html>

프로그램을 실행하여 시도해 보세요.

방법 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> PHP中文网</title>
</head>
<body>
<p>
    有两种方式可以访问对象属性:
</p>
<p>
    你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

프로그램을 실행하고 사용해 보세요

객체 메소드에 액세스

다음 구문을 사용하여 객체 메소드를 생성할 수 있습니다.

methodName : function() { 코드 라인 }

다음 구문을 사용하여 개체 메서드에 액세스할 수 있습니다.

objectName.methodName()

일반적으로 fullName()은 person 개체의 메서드이고 fullName은 속성입니다.

JavaScript 개체를 생성, 사용 및 수정하는 방법에는 여러 가지가 있습니다.

속성과 메서드를 생성, 사용, 수정하는 방법도 다양합니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网（php.cn)</title> </head> <body> <p>创建 JavaScript 对象。</p> <p id="demo"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo").innerHTML = person.firstName + " 现在 " + person.age + " 岁."; </script> </body> </html>

제출하다 코드 재설정

자동운전