자바스크립트 객체
JavaScript 객체는 속성과 메소드를 가진 데이터입니다.
실제 객체, 속성 및 메서드
실생활에서 자동차는 객체입니다.
객체에는 무게, 색상 등과 같은 속성이 있고 메서드에는 시작 및 중지 등이 포함됩니다.
对象 | 属性 | 方法 |
---|---|---|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white | car.start() car.drive() car.brake() car.stop() |
모든 자동차에는 이러한 속성이 있지만 속성은 차마다 다릅니다.
모든 자동차에는 이러한 방법이 있지만 실행되는 시간은 다릅니다.
JavaScript 객체
JavaScript에서는 거의 모든 것이 객체입니다.
在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。 |
JavaScript 변수 할당에 대해 배웠습니다.
다음 코드는 car 변수의 값을 "Fiat"로 설정합니다:
객체도 변수이지만 객체는 여러 값(여러 변수)을 포함할 수 있습니다.
위의 예에서는 3개의 값 ("Fiat", 500, "white")이 변수 car에 할당됩니다.
위의 예에서는 자동차 변수에 3개의 변수(유형, 모델, 색상)가 할당되었습니다.
JavaScript 对象是变量的容器。 |
객체 정의
문자를 사용하여 JavaScript 객체를 정의하고 생성할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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.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>
Run Instance»
"Run Instance" 버튼을 클릭하면 줄 바꿈이 필요하지 않습니다. 온라인 인스턴스 보기
객체 속성
"JavaScript 객체는 변수의 컨테이너"라고 말할 수 있습니다.
그러나 우리는 일반적으로 "JavaScript 객체를 키-값 쌍의 컨테이너"라고 생각합니다.
키-값 쌍은 일반적으로 이름 : 값으로 작성됩니다(키와 값은 콜론으로 구분됩니다).
JavaScript 객체의 키-값 쌍을 객체 속성이라고도 합니다.
JavaScript 对象是属性变量的容器。 |
객체 키-값 쌍은 다음과 같이 작성됩니다.
PHP의 연관 배열
Python 사전
C 해시 테이블
Java 해시 맵
-
C 해시 테이블 Ruby 및 Perl
객체 속성 액세스
두 가지 방법으로 객체 속성에 액세스할 수 있습니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
객체 메서드
객체의 메서드는 함수를 정의하고 객체의 속성으로 저장됩니다.
()를 추가하여 객체 메소드를 (함수로) 호출합니다.
이 인스턴스는 person 객체의 fullName() 메서드에 액세스합니다:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
인스턴스 실행 중»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
person 개체의 fullName 속성에 액세스하려는 경우 함수를 정의하는 문자열로 반환됩니다.
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法是一个函数定义,并作为一个属性值存储。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
JavaScript 对象是属性和方法的容器。 |
나중에 이 튜토리얼에서 함수, 속성 및 메서드에 대해 자세히 알아보게 됩니다.
객체 메소드 액세스
다음 구문을 사용하여 객체 메소드를 생성할 수 있습니다:
다음 구문을 사용하여 객체 메서드에 액세스할 수 있습니다:
일반적으로 fullName()은 person 객체의 메서드입니다. fullName은 속성으로 사용 가능합니다.
JavaScript 객체를 생성, 사용, 수정하는 방법은 다양합니다.
속성과 메서드를 생성, 사용, 수정하는 방법도 다양합니다.
在随后的教程中,你将学习到更多关于对象的知识。 |
추가 인스턴스
JavaScript 개체 만들기 I
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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 객체 II 생성
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
객체 속성에 액세스 I
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
액세스 개체 속성 II
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phn.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>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기
함수 속성은 메서드로 액세스됩니다
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
속성으로 액세스되는 함수 속성
인스턴스
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法是一个函数定义,并作为一个属性值存储。</p> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; </script> </body> </html>
인스턴스 실행 중»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요