자바스크립트 객체



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

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


모든 것은 객체입니다

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

  • 부울은 객체가 될 수 있습니다.

  • 숫자 유형은 객체일 수 있습니다.

  • 문자열도 객체가 될 수 있습니다

  • 날짜는 객체입니다

  • 수학과 규칙성 표현식도 객체입니다

  • 배열도 객체입니다

  • 함수도 객체가 될 수 있습니다


JavaScript 객체

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


객체 속성에 접근하기

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

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

objectName.propertyName

이 예에서는 문자열의 길이 속성을 사용합니다. 문자열 길이를 가져옵니다.

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

위 코드 뒤 x가 실행되면 값은 다음과 같습니다.

12


객체에 액세스하는 방법

메서드는 다음과 같은 작업입니다. 개체에 대해 수행할 수 있습니다.

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

objectName.methodName()

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

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

위의 코드가 실행된 후 JavaScript의 값을 사용하면 자신만의 개체를 정의하고 생성할 수 있습니다.

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

객체의 인스턴스를 정의하고 생성합니다.

사용 객체를 정의한 다음 객체의 새 인스턴스를 생성하는 함수

  • 직접 인스턴스 생성

    이 예에서는 객체의 새 인스턴스를 생성하고 4개를 추가합니다. 속성:
  • 인스턴스

  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    </head>
    <body>
    
    <script>
    var person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue"; 
    document.write(person.firstname + " is " + person.age + " years old.");
    </script>
    
    </body>
    </html>

인스턴스 실행»

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

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


객체 생성자 사용

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

실행 인스턴스»

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

JavaScript에서 이는 일반적으로 우리가 실행 중인 함수 또는 함수가 실행되는 함수를 가리킵니다. 객체(런타임)


JavaScript 객체 인스턴스 생성

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

var myFather=새 사람("John","Doe",50,"blue");
var myMother=새 사람("Sally","Rally",48,"green");


JavaScript 객체에 속성 추가

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

personObj가 이미 존재한다고 가정 - 다음을 수행할 수 있습니다. 이름, 성, 나이 및 눈 색깔과 같은 새로운 속성을 추가합니다:

person.firstname="John";
person.lastname="Doe";
person.age=30 ;
person.eyecolor="blue";

x=person.firstname;

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

John


JavaScript 객체에 메소드 추가

메소드는 객체에 첨부된 함수일 뿐입니다.

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

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() 함수 이름의 값은 사람의 성 속성에 할당됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
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;
	}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

</body>
</html>

인스턴스 실행»

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


JavaScript 클래스

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

JavaScript에서는 클래스가 생성되지 않으며 다른 객체 지향 언어와 마찬가지로 클래스에서 객체가 생성되지 않습니다.

JavaScript는 클래스 기반이 아닌 프로토타입 기반입니다.


JavaScript for...in 루프

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

구문

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

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

인스턴스

객체의 속성을 반복합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</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>

인스턴스 실행»

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