자바스크립트 객체

JavaScript는 객체지향 프로그래밍 언어(OOP)이지만 C++, Java 등 일반적인 객체지향 언어와는 다릅니다. 예를 들어 JavaScript에는 클래스라는 개념이 없습니다. 그래서 OOP 사고방식에 따라 자바스크립트 코드를 작성할 때 항상 조금 부자연스러운 느낌이 듭니다.

사실 JavaScript는 객체 기반 언어입니다. JavaScript의 거의 모든 것이 객체라고 볼 수 있습니다. 이전 튜토리얼과 예제에서는 객체의 개념을 거의 언급하지 않았지만, 이 장을 공부하고 나면 객체가 실제로 객체를 기반으로 한다는 것을 알게 될 것입니다.

객체란 무엇인가요?

객체는 속성과 메서드의 모음입니다. 객체가 무엇인지, 그리고 객체와 관련된 몇 가지 개념을 이해하는 데 도움이 되는 간단한 예를 사용해 보겠습니다. 예를 들어, 사람은 객체이고 다음과 같습니다.

속성과 방법: 사람은 이름, 키, 몸무게 및 기타 특성을 가지고 있습니다. 이러한 특성을 객체의 속성이라고 합니다. 사람들은 말하고 걸을 수 있는 능력을 사물의 방법이라고 부릅니다.

프라이빗 메소드와 퍼블릭 메소드: 프로그래밍 언어를 배워서 프로그램을 작성할 수 있고, 외국어를 배워 번역가가 될 수 있는 이런 능력을 객체의 프라이빗 메소드라고 합니다. 반대로, 말하기, 걷기 등 누구나 가지고 있는 위의 방법을 객체의 공개 방법이라고 합니다.

캡슐화: 프로그래밍 언어를 배운 동일한 두 사람이 프로그램을 작성할 수 있지만, 서로 다른 객체이기 때문에 프로그램 작성 방법에 차이가 있는 경우가 많습니다. 객체의 일부 데이터와 코드는 비공개일 수 있으며 외부 세계에서 접근할 수 없습니다. 이를 캡슐화라고 합니다.

상속: 상속은 클래스 내의 개념입니다. 상속이란 하위 클래스가 상위 클래스에서 상속(확장)하여 상위 클래스의 속성과 메서드(전용 속성 및 메서드 제외)를 얻는 것을 의미합니다. 이는 마치 큰 나무와 같아서 상속을 통해 계층별로 최종 프로그램을 명확하고 강력하게 만듭니다. JavaScript 언어에는 클래스 개념이 없기 때문에 상속 기능을 직접 제공하지 않습니다. 그러나 현재 많은 사람들과 일부 JavaScript 프레임워크에서는 JavaScript에 상속 기능을 제공하려고 합니다.

다형성: 다형성은 다양한 사물이 다양한 표현을 가질 수 있는 능력을 말합니다. 다형성 메커니즘을 사용하면 내부 구조가 서로 다른 개체가 동일한 외부 인터페이스를 공유할 수 있으므로 이러한 방식으로 코드 복잡성이 줄어듭니다. 안타깝게도 상속과 마찬가지로 JavaScript는 OOP에서 매우 중요한 개념인 다형성을 지원하지 않습니다. 물론 JavaScript에서 다형성을 간접적으로 구현하려는 사람들과 JavaScript 프레임워크도 많이 있습니다.

이 튜토리얼의 길이와 목적을 고려하여 여기에는 개체에 대한 몇 가지 기본 개념이 간략하게 설명되어 있습니다. 객체 지향 프로그래밍은 전문 주제입니다. 관심 있는 학생들은 OOP에 대한 다른 전문 작품을 읽을 수 있습니다.

객체 속성 액세스

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

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

objectName.propertyName

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

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

위 코드가 실행된 후의 값은 객체에 대해 수행할 수 있는 액션입니다.

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

objectName.methodName()

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

var message="Hello world ! ";

var x=message.toUpperCase();

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

HELLO WORLD!

함수를 사용하여 객체 생성:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
function person(firstname,age){
this.firstname=firstname;
this.age=age;
}
myFather=new person("John",50);
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>

Create 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.age=30;
person.eyecolor="blue";

x=person.firstname;

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

John

사용자 정의 JavaScript 개체 만들기

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script>
  // 定义构造函数，并设定一个属性
    function Person(name)
    {
    this.name = name;
    }
    // 为 Person 增加一个方法
    Person.prototype.showName = function()
    {
    alert("我叫" + this.name);
    };
    // new 关键字实例化一个对象
    var Tom = new Person("Tom");
    // 运行该对象内的 showName() 方法
    Tom.showName();
</script>
</head>
<body>
</body>
</html>

위의 예에서 볼 수 있듯이 생성자에서 객체 이름 속성을 설정하고 객체의 프로토타입 속성을 통해 showName() 메서드를 추가한 다음 마지막으로 new 키워드를 통해 객체를 인스턴스화합니다.

JavaScript 클래스

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

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

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

JavaScript for...in 루프

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

Syntax

for(객체의 변수)

{코드 실행됨...}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
     var x;
     var txt="";
     var person={fname:"Bill",age:56}; 
     for (x in person){
        txt=txt + person[x];
     }
     document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

지속적인 학습

||

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </head> <body> </body> </html>

제출하다 코드 재설정
자동운전