자바스크립트 객체



JavaScript 객체는 속성과 메소드를 가진 데이터입니다.


실제 객체, 속성 및 메서드

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

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

对象属性方法

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

모든 자동차에는 이러한 속성이 있지만 속성은 차마다 다릅니다.

모든 자동차에는 이러한 방법이 있지만 실행되는 시간은 다릅니다.


JavaScript 객체

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


Note在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。


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

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

var car = "Fiat" ;

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

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

위의 예에서는 3개의 값 ​​("Fiat", 500, "white")이 변수 car에 할당됩니다.

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


NoteJavaScript 对象是变量的容器。



객체 정의

문자를 사용하여 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 객체의 키-값 쌍을 객체 속성이라고도 합니다.


NoteJavaScript 对象是属性变量的容器。


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

  • 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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

NoteJavaScript 对象是属性和方法的容器。

나중에 이 튜토리얼에서 함수, 속성 및 메서드에 대해 자세히 알아보게 됩니다.


객체 메소드 액세스

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

methodName : function() { 코드 라인 }

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

objectName.methodName()

일반적으로 fullName()은 person 객체의 메서드입니다. fullName은 속성으로 사용 가능합니다.

JavaScript 객체를 생성, 사용, 수정하는 방법은 다양합니다.

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


Note在随后的教程中,你将学习到更多关于对象的知识。



추가 인스턴스

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>

인스턴스 실행 중»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요