JavaScript .prototype은 어떻게 작동합니까?

나는 동적 프로그래밍 언어에 그렇게 관심이 없지만 JavaScript 코드를 상당히 작성해 왔습니다. 나는 이 프로토타입 기반 프로그래밍에 대해 제대로 이해하지 못했는데, 누가 이것이 어떻게 작동하는지 알고 있을까요?

var obj = new Object();
obj.prototype.test = function() { alert('안녕하세요?'); };
var obj2 = new obj();
obj2.test();

짧은 시간 동안 많은 사람들과 토론을 한 것 같은데 (나는 정확히 무엇을 하고 있는지 정확히는 모르겠지만), 클래스 개념이 없다는 것을 알게 되었습니다. 그냥 객체인데, 해당 객체의 인스턴스는 원본의 클론이 맞나요?

그렇다면 JavaScript의 .prototype 속성의 정확한 목적은 무엇인가요? 이것이 객체의 인스턴스 생성에 어떻게 관련이 있는지 설명해 주세요.

업데이트: 올바른 방법

var obj = new Object(); // 기능적인 객체가 아님
obj.prototype.test = function() { alert('안녕하세요?'); }; // 잘못된 코드입니다!
function MyObject() {} // 일등급 함수형 객체
MyObject.prototype.test = function() { alert('OK'); } // OK

또한 이 슬라이드들이 도움됐습니다.

답변 1

var Person = function (name) {
    this.name = name;
};
Person.prototype.getName = function () {
    return this.name;
};
var john = new Person(John);
alert(john.getName());
Person.prototype.sayMyName = function () {
    alert('안녕하세요, 제 이름은 ' + this.getName() + '입니다.');
};
john.sayMyName();
var Customer = function (name) {
    this.name = name;
};
Customer.prototype = new Person();
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue = function (amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function () {
    return this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());

하지만 Person에서 setAmountDue() 및 getAmountDue()를 호출할 수는 없습니다.

//다음 명령은 오류를 생성합니다.
john.setAmountDue(1000);

답변 2

JavaScript .prototype는 JavaScript 객체 지향 프로그래밍에서 중요한 개념 중 하나입니다. 이는 객체의 기능과 속성을 공유하고 상속받을 수 있는 메커니즘을 제공합니다. 이 글에서는 JavaScript .prototype이 어떻게 동작하는지에 대해 자세히 알아보겠습니다. JavaScript .prototype에 대한 SEO를 고려하여 기사를 작성해 보겠습니다.
제목: JavaScript .prototype 이해하기: 객체 상속과 메커니즘 설명
서론:
JavaScript는 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 언어는 객체 지향 프로그래밍의 개념을 지원하여 코드의 재사용성과 확장성을 높일 수 있도록 도와줍니다. JavaScript .prototype은 객체 지향 프로그래밍의 핵심 개념 중 하나로, 객체 간에 기능과 속성을 공유하고 상속을 구현할 수 있게 해줍니다. 이번 기사에서는 JavaScript .prototype의 작동 방식과 활용 방법에 대해 자세히 알아보겠습니다.
JavaScript .prototype의 작동 방식:
JavaScript .prototype은 객체 지향 프로그래밍의 핵심 부분입니다. 모든 JavaScript 객체는 내부에 .prototype이라는 속성을 가지고 있습니다. 이 속성은 원래 객체를 기반으로 다른 객체를 생성함으로써 상속을 구현하는 데 사용됩니다. 상속된 객체는 원래 객체의 속성과 메소드를 사용할 수 있습니다. 이를테면, 예를 들어 Person이라는 객체가 있을 때, Student라는 객체를 생성하여 Person 객체의 속성과 메소드를 상속받을 수 있습니다.
JavaScript .prototype의 활용 방법:
JavaScript .prototype의 활용은 다양한 객체 지향 프로그래밍 시나리오에서 유용하게 사용될 수 있습니다. 이를테면, 상속, 메소드 추가, 속성 공유 등의 기능을 구현할 때 JavaScript .prototype을 사용할 수 있습니다. 객체 간의 코드 재사용성을 높일 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
JavaScript .prototype 예시 코드:
아래는 JavaScript .prototype을 사용한 예시 코드입니다.
```javascript
// Person이라는 객체 정의
function Person(name) {
this.name = name;
}
// Person 객체의 속성과 메소드 설정
Person.prototype.greet = function() {
console.log(안녕하세요, 저는 + this.name + 입니다.);
}
// Student 객체 정의
function Student(name, grade) {
Person.call(this, name);
this.grade = grade;
}
// Student 객체가 Person 객체의 속성과 메소드를 상속받음
Student.prototype = Object.create(Person.prototype);
// Student 객체만의 메소드 추가
Student.prototype.getGrade = function() {
console.log(저의 학년은 + this.grade + 입니다.);
}
// 객체 생성 및 메소드 호출
var student1 = new Student(홍길동, 3);
student1.greet(); // 안녕하세요, 저는 홍길동입니다.
student1.getGrade(); // 저의 학년은 3입니다.
```
결론:
JavaScript .prototype은 객체 지향 프로그래밍에서 상속과 객체 간의 기능 및 속성 공유를 가능하게 하는 중요한 개념입니다. 이를 통해 코드의 재사용성과 확장성을 높일 수 있으며, 객체 간의 계층 구조를 효과적으로 구현할 수 있습니다. JavaScript .prototype을 이해하고 활용하는 것은 JavaScript 개발자로서 핵심적인 기술과 지식입니다. 이 글을 통해 JavaScript .prototype의 개념과 작동 방식에 대해 더욱 깊이 이해할 수 있었기를 바랍니다.