JavaScript .prototype은 어떻게 작동하나요?

나는 다이나믹 프로그래밍 언어에 그렇게 흥미가 없지만, JavaScript 코드를 충분히 작성해왔습니다. 나는 이 프로토타입 기반 프로그래밍을 제대로 이해하지 못했는데, 누군가는 이게 어떻게 작동하는지 아는 사람이 있나요?

var obj = new Object();

obj.prototype.test = function() { alert('Hello?'); };

var obj2 = new obj();

obj2.test();

저는 얼마 전 사람들과 함께 했던 많은 토론을 기억합니다 (제가 정확히 뭘 하고 있는지는 정확히 모르겠지만) 그러나 내가 이해하기로, 클래스에 대한 개념이 없다는 것입니다. 그것은 그냥 객체이며 그 객체의 인스턴스는 원본의 복제본이 맞죠?

하지만 JavaScript에서 .prototype 속성의 정확한 목적은 무엇인가요? 이것은 객체 인스턴스화와 어떻게 관련이 있나요?

업데이트: 올바른 방법

var obj = new Object(); // not a functional object

obj.prototype.test = function() { alert('Hello?'); }; // this is wrong!

function MyObject() {} // a first class functional object

MyObject.prototype.test = function() { alert('OK'); } // OK

이 slides도 정말 많이 도움이 되었습니다.

답변 1

자바, C# 또는 C++과 같은 고전적 상속을 구현하는 언어에서는 먼저 클래스 - 객체에 대한 청사진 - 를 만들고 그 클래스에서 새로운 객체를 만들거나 클래스를 확장하여 기존 클래스를 보강하는 새로운 클래스를 정의할 수 있습니다.

자바 스크립트에서는 먼저 객체를 만들고(클래스 개념이 없습니다), 그 후 자신의 객체를 보강하거나 새 객체를 만들 수 있습니다. 어렵지 않지만, 기존의 고전적인 방식에 익숙한 사람들에게는 다소 낯설고 소화하기 어렵습니다.

Hello - 안녕하세요

//Define a functional object to hold persons in JavaScript

var Person = function(name) {

this.name = name;

};

//Add dynamically to the already defined object a new getter

Person.prototype.getName = function() {

return this.name;

};

//Create a new object of type Person

var john = new Person(John);

//Try the getter

alert(john.getName());

//If now I modify person, also John gets the updates

Person.prototype.sayMyName = function() {

alert('Hello, my name is ' + this.getName());

};

//Call the new method on john

john.sayMyName();

지금까지 나는 기본 객체를 확장해왔지만, 이제 다른 객체를 만들고 Person에서 상속합니다.

//Create a new object of type Customer by defining its constructor. It's not

//related to Person for now.

var Customer = function(name) {

this.name = name;

};

//Now I link the objects and to do so, we link the prototype of Customer to

//a new instance of Person. The prototype is the base that will be used to

//construct all new instances and also, will modify dynamically all already

//constructed objects because in JavaScript objects retain a pointer to the

//prototype

Customer.prototype = new Person();

//Now I can call the methods of Person on the Customer, let's try, first

//I need to create a Customer.

var myCustomer = new Customer('Dream Inc.');

myCustomer.sayMyName();

//If I add new methods to Person, they will be added to Customer, but if I

//add new methods to Customer they won't be added to Person. Example:

Customer.prototype.setAmountDue = function(amountDue) {

this.amountDue = amountDue;

};

Customer.prototype.getAmountDue = function() {

return this.amountDue;

};

//Let's try:

myCustomer.setAmountDue(2000);

alert(myCustomer.getAmountDue());

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('Hello, my name is ' + 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());

사람에 대해 setAmountDue (), getAmountDue ()를 호출할 수 없다고 말했듯이.

//The following statement generates an error.

john.setAmountDue(1000);

답변 2

JavaScript .prototype은 객체 지향 프로그래밍에서 사용되는 중요한 개념 중 하나입니다. 이것은 객체와 해당 속성 또는 메서드를 정의하기 위해 사용됩니다. 이번 글에서는 JavaScript .prototype의 작동 방식에 대해 살펴보겠습니다.

JavaScript .prototype

JavaScript의 .prototype은 생성자 함수에서 새로운 객체를 만들 때, 그 객체에 상속될 속성과 메서드를 정의하는 데 사용됩니다. 이러한 함수를 생성자 함수라고 하며, 이러한 방식으로 생성된 객체를 인스턴스라고 합니다.

생성자 함수 정의

생성자 함수는 다음과 같이 정의됩니다.

```

function Person(first, last, age) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.fullName = function() {

return this.firstName + + this.lastName;

};

}

```

위의 예시에서 Person은 생성자 함수입니다. 이 함수는 first, last, age 세 개의 인자를 받아들이며, 이를 사용하여 객체의 속성을 설정합니다. fullName은 객체의 속성 또는 메서드이며, 이를 사용하여 객체의 이름(full name)을 반환합니다.

인스턴스 생성

다음 예시에서는 위에서 만든 Person 생성자 함수를 사용하여 두 개의 인스턴스를 생성합니다.

```

var person1 = new Person(John, Doe, 25);

var person2 = new Person(Jane, Doe, 19);

```

위의 예시에서는 두 개의 인스턴스를 생성하고 있으며, 생성자 함수를 사용하여 firstName, lastName, age, fullName을 지정합니다.

결과 값 확인

다음 예시에서는 생성한 인스턴스의 값을 확인합니다.

```

console.log(person1.firstName); // John

console.log(person2.firstName); // Jane

console.log(person1.fullName()); // John Doe

console.log(person2.fullName()); // Jane Doe

```

위의 예시에서는 console.log 함수를 사용하여 각 인스턴스의 속성을 확인합니다. 결과값으로는 person1 인스턴스의 firstName, person2 인스턴스의 firstName, person1 인스턴스 fullName 함수 호출 결과값, person2 인스턴스 fullName 함수 호출 결과값이 반환됩니다.

JavaScript .prototype의 원리

JavaScript .prototype은 함수에 새로운 속성과 메서드를 추가하는 데 사용됩니다. 생성자 함수에서 .prototype 속성을 사용하여 새로운 속성 또는 메서드를 정의하면, 생성자 함수로부터 새로 생성된 객체는 해당 속성과 메서드를 상속받게 됩니다.

마치 마법처럼 보이지만 실제로는 아주 간단한 원리입니다. .prototype 속성을 사용하여 함수에 새로운 속성과 메서드를 추가하기 때문에, 해당 함수로부터 새로 생성된 객체는 상속받게 됩니다.

이것은 JavaScript의 객체 지향 프로그래밍에서 중요한 개념 중 하나이며, 객체의 상속 및 재사용성을 결정짓는 중요한 요소 중 하나입니다.

결론

JavaScript .prototype은 객체 지향 프로그래밍에서 핵심적인 개념 중 하나입니다. 이를 사용하여 생성자 함수로부터 새로 생성된 객체가 해당 속성과 메서드를 상속받을 수 있도록 지원합니다. 이를 사용하면 객체의 상속 및 재사용성을 결정짓는 중요한 요소를 결정할 수 있으며, JavaScript의 객체 지향 프로그래밍에서 매우 중요한 역할을 합니다.