자바스크립트 객체

JavaScript 개체

JavaScript의 모든 것은 문자열, 값, 배열, 함수 등 개체입니다.

또한 JavaScript는 사용자 정의 개체를 허용합니다.

모든 것은 객체입니다

JavaScript는 문자열, 날짜, 배열 등과 같은 여러 내장 객체를 제공합니다. 객체는 속성과 메소드를 가진 특별한 데이터 유형입니다.

부울 유형은 객체가 될 수 있습니다. 숫자 유형은 객체일 수 있습니다. 문자열도 객체가 될 수 있습니다. 수학과 정규 표현식도 객체입니다.

JavaScript 객체

객체는 단지 특별한 종류의 데이터일 뿐입니다. 객체에는 속성과 메서드가 있습니다.

객체의 속성에 액세스하기

속성은 객체와 관련된 값입니다.

객체 속성에 액세스하기 위한 구문은 다음과 같습니다.

objectName.propertyName

이 예에서는 String 객체의 길이 속성을 사용하여 문자열의 길이를 가져옵니다.

var message="Hello World!";
var x= message.length ;

위 코드가 실행된 후 x의 값은 다음과 같습니다.

객체에 액세스하는 방법

메소드는 객체에 대해 수행할 수 있는 작업입니다.

다음 구문을 사용하여 메서드를 호출할 수 있습니다.

objectName.methodName()

이 예에서는 String 개체의 toUpperCase() 메서드를 사용하여 텍스트를 대문자로 변환합니다.

var message="Hello world!" ;
var x=message.toUpperCase();

위 코드가 실행된 후 x 값은 다음과 같습니다.

HELLO WORLD!

JavaScript 개체 만들기

JavaScript를 사용하면 자신만의 개체를 정의하고 만들 수 있습니다. .

새 객체를 생성하는 방법에는 두 가지가 있습니다.

객체의 인스턴스 정의 및 생성 함수를 사용하여 객체를 정의한 다음 객체의 새 인스턴스를 생성합니다.

직접 인스턴스 생성

이 예에서는 다음을 생성합니다. 객체의 새 인스턴스를 만들고 여기에 네 가지 속성을 추가했습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var person=new Object();
person.firstname="jack";
person.lastname="Doe";
person.age=35;
person.eyecolor="blue"; 
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>

대체 구문(객체 리터럴 사용):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>

객체 생성자 사용

이 예에서는 함수를 사용하여 객체를 구성합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("jack","Doe",35,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>

JavaScript에서 이는 일반적으로 실행 중인 함수 자체를 가리키거나 함수가 속한 개체(런타임)를 가리킵니다.

JavaScript 객체 인스턴스 생성

객체 생성자가 있으면 다음과 같이 새 객체 인스턴스를 생성할 수 있습니다.

var myFather=new person("John","Doe",50," blue") ;
var myMother=new person("Sally","Rally",48,"green");

JavaScript 개체에 속성 추가

개체에 값을 할당하여 기존 개체에 새 속성을 추가할 수 있습니다.

personObj가 이미 존재한다고 가정하면 여기에 다음과 같은 새로운 속성을 추가할 수 있습니다: 이름, 성, 나이 및 눈 색깔:

person.firstname="John";
person.lastname="Doe"; person.eyecolor="blue";
x=person.firstname;

T위 코드가 실행된 후, 객체에 대한 Functions의 값.

생성자 함수 내에 정의된 객체의 메서드:

function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}

changeName() 함수 이름의 값은 사람의 성 속성에 할당됩니다.

JavaScript 클래스

JavaScript는 객체 지향 언어이지만 JavaScript는 클래스를 사용하지 않습니다.

JavaScript에서는 클래스가 생성되지 않으며 다른 객체 지향 언어와 마찬가지로 클래스에서 객체가 생성되지 않습니다. JavaScript는 클래스 기반이 아닌 프로토타입 기반입니다. JavaScript for...in 루프

JavaScript for...in 문은 객체의 속성을 반복합니다.

Syntax

for (variable in object)
{
执行的代码……
}

참고: for...in 루프의 코드 블록은 각 속성에 대해 한 번씩 실행됩니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>点击下面的按钮，循环遍历对象 "person" 的属性。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body> </html>

제출하다 코드 재설정

자동운전