당신은 주제를 찾고 있습니까 “prototype이란 – JavaScript – prototype (1/2) : prototype이란?“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 생활코딩 이(가) 작성한 기사에는 조회수 38,546회 및 좋아요 205개 개의 좋아요가 있습니다.
Table of Contents
prototype이란 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 JavaScript – prototype (1/2) : prototype이란? – prototype이란 주제에 대한 세부정보를 참조하세요
http://opentutorials.org/module/532/6573
prototype이란 주제에 대한 자세한 내용은 여기를 참조하세요.
[JS] Prototype이란? – velog
프로토타입 객체 이해하기. [출처: 생활코딩 JavaScript 객체 지향 프로그래밍 – 15. prototype vs proto]. 이처럼 우리는 함수라는 객체를 생성했을 …
Source: velog.io
Date Published: 6/13/2022
View: 758
JavaScript : 프로토타입(prototype) 이해 – nextree
3. 프로토타입이란? JavaScript에서 기본 데이터 타입을 제외한 모든 것이 객체입니다. 객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형 …
Source: www.nextree.co.kr
Date Published: 5/13/2021
View: 5052
[JavaScript] 프로토타입과 프로토타입 체인 – 하나몬
각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토 …
Source: hanamon.kr
Date Published: 12/3/2021
View: 6776
prototype 이란? – 기억보단 기록을
SF만화나 영화를 보면 프로토타입이란 단어가 간혹 들린다. … 자 생각해보자 기존에 우리는 prototype을 변경하면 해당 객체로 생성된 모든 하위 …
Source: jojoldu.tistory.com
Date Published: 4/5/2022
View: 2134
Javascript: prototype 이란 :: 마이구미
일반적으로 프로토타입(prototype)이란 시제품, 견본 등과 같은 의미로 일반적으로 원형이라는 뜻을 가진다. 질문은 “C++, JAVA 에서 Class 란 무엇인가?” …
Source: mygumi.tistory.com
Date Published: 10/1/2021
View: 2457
prototype – 생활코딩
그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 …
Source: www.opentutorials.org
Date Published: 9/10/2021
View: 163
자바스크립트 프로토타입(Prototype)이란? __ … – Zzolab Blog 🙂
원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로……. 블라블라…. 중요한 기능들이 포함된 시스템의 초기 모델 …
Source: okayoon.tistory.com
Date Published: 4/7/2021
View: 6751
프로토타입 – 위키백과, 우리 모두의 백과사전
프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로 개발 검증과 양산 검증을 거쳐야 시제품이 될 수 …
Source: ko.wikipedia.org
Date Published: 8/20/2021
View: 1823
프로토타입(prototype) – 코딩의 시작, TCP School
상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다. 상속을 통해 새로운 프로그램의 요구에 맞게 …
Source: www.tcpschool.com
Date Published: 5/16/2022
View: 6095
[JavaScript]프로토타입(Prototype)이란?
객체(Object) JavaScript의 프로토타입을 설명하기 전에 객체에 대해 살펴봅시다. JavaScript는 배열, 문자열 심지어 함수도 객체로 간주합니다.
Source: developer-talk.tistory.com
Date Published: 3/8/2021
View: 8658
주제와 관련된 이미지 prototype이란
주제와 관련된 더 많은 사진을 참조하십시오 JavaScript – prototype (1/2) : prototype이란?. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 prototype이란
- Author: 생활코딩
- Views: 조회수 38,546회
- Likes: 좋아요 205개
- Date Published: 2014. 4. 18.
- Video Url link: https://www.youtube.com/watch?v=yXnbvyl04V4
[JS] Prototype이란?
프로토타입 기반 언어?
javascript에서는 객체를 상속하기 위해서 프로토타입이라는 방식을 사용합니다.
JavaScript는 흔히 프로토 타입 기반 언어(prototype-basd language)라 불립니다.
프로토타입 객체 이해하기
[출처: 생활코딩 JavaScript 객체 지향 프로그래밍 – 15. prototype vs proto]이처럼 우리는 함수라는 객체를 생성했을 때 그 객체에는 prototype이라는 object가 자동으로 생성된다. 그 프로토타입에는 역시 constructor라는 객체가 자동으로 생성되어 서로를 참조할 수 있게 된다.
Person . prototype . sum = function ( ) { }
위의 코드를 통해서 prototype에 함수를 추가함으로써 여러 객체를 생성하였을 때 해당함수를 사용할 수 있게 한다.
그림에서의 객체에서
kim . sum ( ) lee . sum ( )
둘 다 사용이 가능하다.
Q. 그렇다면 이렇게 두 객체가 sum함수를 사용할 수 있는 이유는 무엇일까?
그건 바로 Person의 인스턴스를 새로 생성했을 때 해당 인스턴스의 Person의 prototype링크인 __proto__ object를 새로 부여받기 때문이다.
따라서 kim객체에는 없는 sum함수도 사용할 수 있게 된다.
javascript가 kim.sum()을 찾아서 실행시키는 방법 kim객체에 선언된 sum()함수를 찾는다. (요놈 자식 sum 갖고와!!) __proto__ 에 sum()함수가 있는지 찾는다. (부모님 모시고 와서 sum 갖고와!!) 만약 해당 객체의 Prototype 객체에 __proto__ 가 있다면 해당 객체에 sum()함수가 있는지 찾는다. (조부모님 모시고 와서 sum 갖고와!!) 더 있다면 있을 때까지 찾아서 결과 도출
Q. 만약에 sum()함수가 kim객체에도 있고 __proto__ 객체에도 sum()함수가 있다면 어떤 sum 함수가 실행될까??
앞서 javascript에서 kim.sum()함수를 실행시킬 때 자식의 sum()함수를 먼저 찾아서 실행시킨다. 따라서 자손에 있는 함수를 먼저 실행시킨다.
이렇게 프로토타입이 __proto__ 링크로 연결되어 있는 형태를 프로토타입 체인 형태 라고 한다.
예제 1
var A = function ( ) { this . x = function ( ) { console . log ( ‘hello’ ) ; } ; } ; A . prototype . x = function ( ) { console . log ( ‘world’ ) ; } var B = new A ( ) ; var C = new A ( ) ; B . x ( ) ; C . x ( ) ;
위의 코드를 간단하게 설명하자면 A라는 함수를 선언하여 생성자 x를 선언해주었다. 그리고 A의 프로토타입 x를 선언해 주었다. 이렇게 될 경우 hello가 출력이 되는 것을 볼 수가 있다.
간단하게도 이는 객체 인스턴스를 생성할 때 생성자를 통해서 B.x, C.x 가 생성이 된다. 그래서 hello가 출력되는 것을 알 수 있다. (== 자식 놈이 갖고 있는 걸 확인 했으니 끝)
예제 2
var A = function ( ) { } ; A . prototype . x = function ( ) { console . log ( ‘world’ ) ; } var B = new A ( ) ; var C = new A ( ) ; B . x ( ) ; C . x ( ) ;
위의 코드의 경우 예제 1과 유사하지만 생성자를 따로 설정해 주지 않았다. 따라서 객체 인스턴스 생성시 x()함수가 존재하지 않아 해당 객체의 __proto__ 링크에 있는 A.prototype.x를 찾게 된다. 따라서 world가 출력되는 것을 볼 수 있다.
프로토체인
앞서 예제에서 보여드린 코드들은 객체 인스턴스를 new 생성자를 통해 생성하는 classical 한 방식이다. 하지만 javascript의 경우 리터럴 또는 object.create()를 통해 객체를 생성 확장하는 방식을 좀 더 선호합니다.
프로토타입 패턴 예시:
https://zzossig.io/posts/javascript/what_is_the_prototype_oo_pattern/
new 생성자를 통한 객체 생성, object.create()를 통한 객체 생성을 하는
자바스크립트 생성자 패턴, 프로토타입 패턴에 대해 더 공부해보자.
참고 자료:
JavaScript : 프로토타입(prototype) 이해
JavaScript 객체지향 프로그래밍 – 7.1. prototype이 필요한 이유
JavaScript 객체지향 프로그래밍 – 7.2. prototype을 이용해서 재사용성을 높이기
자바스크립트 prototype 문법 10분만에 이해시켜줌
Javascript 기초 – Object prototype 이해하기
JavaScript : 프로토타입(prototype) 이해
JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 크게 두 가지로 해석됩니다. 프로토타입 객체를 참조하는 prototype 속성과 객체 멤버인 proto 속성이 참조하는 숨은 링크가 있습니다. 이 둘의 차이점을 이해하기 위해서는 JavaScript 함수와 객체의 내부적인 구조를 이해 해야합니다. 이번 글에서는 JavaScript의 함수와 객체 내부 구조부터 시작하여 프로토타입에 대해 알아보겠습니다.
1. 함수와 객체의 내부 구조
JavaScript에서는 함수를 정의하고, 파싱단계에 들어가면, 내부적으로 수행되는 작업이 있습니다. 함수 멤버로 prototype 속성이 있습니다. 이 속성은 다른 곳에 생성된 함수이름의 프로토타입 객체를 참조합니다. 프로토타입 객체의 멤버인 constructor 속성은 함수를 참조하는 내부구조를 가집니다. 아래의 그림 1과 같이 표현합니다.
[그림 1]function Person(){}
[소스 1]속성이 하나도 없는 Person이라는 함수가 정의되고, 파싱단계에 들어가면, Person 함수 Prototype 속성은 프로토타입 객체를 참조합니다. 프로토타입 객체 멤버인 constructor 속성은 Person 함수를 참조하는 구조를 가집니다. 여기서 알아야 하는 부분은 Person 함수의 prototype 속성이 참조하는 프로토타입 객체는 new라는 연산자와 Person 함수를 통해 생성된 모든 객체의 원형이 되는 객체입니다. 생성된 모든 객체가 참조한다는 것을 기억해야 합니다. 아래의 그림 2와 같이 표현합니다.
[그림 2]function Person(){} var joon = new Person(); var jisoo = new Person();
[소스 2]JavaScript에서는 기본 데이터 타입인 boolean, number, string, 그리고 특별한 값인 null, undefined 빼고는 모두 객체입니다. 사용자가 정의한 함수도 객체이고, new라는 연산자를 통해 생성된 것도 객체입니다. 객체 안에는 proto(비표준) 속성이 있습니다. 이 속성은 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 숨은 링크로 참조하는 역할을 합니다.
2. 프로토타입 객체란?
함수를 정의하면 다른 곳에 생성되는 프로토타입 객체는 자신이 다른 객체의 원형이 되는 객체입니다. 모든 객체는 프로토타입 객체에 접근할 수 있습니다. 프로토타입 객체도 동적으로 런타임에 멤버를 추가할 수 있습니다. 같은 원형을 복사로 생성된 모든 객체는 추가된 멤버를 사용할 수 있습니다.
[그림 3]function Person(){} var joon = new Person(); var jisoo = new Person(); Person.prototype.getType = function (){ return “인간”; }; console.log(joon.getType()); // 인간 console.log(jisoo.getType()); // 인간
[소스 3]위 소스 3 6라인은 함수 안의 prototype 속성을 이용하여 멤버를 추가하였습니다. 프로토타입 객체에 getType()이라는 함수를 추가하면 멤버를 추가하기 전에 생성된 객체에서도 추가된 멤버를 사용할 수 있습니다. 같은 프로토타입을 이용하여 생성된 joon과 jisoo 객체는 getType()을 사용할 수 있습니다.
여기서 알아두어야 할 것은 프로토타입 객체에 멤버를 추가, 수정, 삭제할 때는 함수 안의 prototype 속성을 사용해야 합니다. 하지만 프로토타입 멤버를 읽을 때는 함수 안의 prototype 속성 또는 객체 이름으로 접근합니다.
[그림 4]joon.getType = function (){ return “사람”; }; console.log(joon.getType()); // 사람 console.log(jisoo.getType()); // 인간 jisoo.age = 25; console.log(joon.age); // undefined console.log(jisoo.age); // 25
[소스 4]위 소스 4 1라인은 joon 객체를 이용하여 getType() 리턴 값을 사람으로 수정하였습니다. 그리고 joon과 jisoo에서 각각 getType()을 호출하면 joon 객체를 이용하여 호출한 결과는 사람으로 출력되고, jisoo로 호출한 결과는 인간이 출력됩니다. 생성된 객체를 이용하여 프로토타입 객체의 멤버를 수정하면 프로토타입 객체에 있는 멤버를 수정하는 것이 아니라 자신의 객체에 멤버를 추가하는 것입니다. joon 객체를 사용하여 getType()을 호출하면 프로토타입 객체의 getType()을 호출한 것이 아닙니다. joon 객체에 추가된 getType()을 호출한 것입니다. 프로토타입 객체의 멤버를 수정할 경우는 멤버 추가와 같이 함수의 prototype 속성을 이용하여 수정합니다.
Person.prototype.getType = function (){ return “사람”; }; console.log(jisoo.getType()); // 사람
[소스 5]소스 5를 보게 되면 함수의 prototype 속성을 이용하여 getType() 리턴 값을 사람으로 수정합니다. 그리고 jisoo 객체를 이용하여 호출한 결과 사람이 나옵니다.
결론을 내리면, 프로토타입 객체는 새로운 객체가 생성되기 위한 원형이 되는 객체입니다. 같은 원형으로 생성된 객체가 공통으로 참조하는 공간입니다. 프로토타입 객체의 멤버를 읽는 경우에는 객체 또는 함수의 prototype 속성을 통해 접근할 수 있습니다. 하지만 추가, 수정, 삭제는 함수의 prototype 속성을 통해 접근해야 합니다.
3. 프로토타입이란?
JavaScript에서 기본 데이터 타입을 제외한 모든 것이 객체입니다. 객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만듭니다. 이때 만들어진 객체 안에 __proto__ (비표준) 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 숨겨진 링크를 프로토타입이라고 정의합니다.
[그림 6]function Person(){} var joon = new Person();
[소스 6]위 그림 6 joon 객체의 멤버인 __proto__ (비표준) 속성이 프로토타입 객체를 가리키는 숨은 링크가 프로토타입이라고 합니다. 프로토타입을 크게 두 가지로 해석된다 했습니다. 함수의 멤버인 prototype 속성은 프로토타입 객체를 참조하는 속성입니다. 그리고 함수와 new 연산자가 만나 생성한 객체의 프로토타입 객체를 지정해주는 역할을 합니다. 객체 안의 __proto__(비표준) 속성은 자신을 만들어낸 원형인 프로토타입 객체를 참조하는 숨겨진 링크로써 프로토타입을 의미합니다.
JavaScript에서는 숨겨진 링크가 있어 프로토타입 객체 멤버에 접근할 수 있습니다. 그래서 이 프로토타입 링크를 사용자가 정의한 객체에 링크가 참조되도록 설정하면 코드의 재사용과 객체 지향적인 프로그래밍을 할 수 있습니다.
4. 코드의 재사용
코드의 재사용 하면 떠오르는 단어는 바로 상속입니다. 클래스라는 개념이 있는 Java에서는 중복된 코드를 상속받아 코드 재활용을 할 수 있습니다. 하지만 JavaScript에서는 클래스가 없는, 프로토타입 기반 언어입니다. 그래서 프로토타입을 이용하여 코드 재사용을 할 수 있습니다.
이 방법에도 크게 두 가지로 분류할 수 있습니다. classical 방식과 prototypal 방식이 있습니다. classical 방식은 new 연산자를 통해 생성한 객체를 사용하여 코드를 재사용 하는 방법입니다. 마치 Java에서 객체를 생성하는 방법과 유사하여 classical 방식이라고 합니다. prototypal 방식은 리터럴 또는 Object.create()를 이용하여 객체를 생성하고 확장해 가는 방식입니다. 두 가지 방법 중 JavaScript에서는 prototypal 방식을 더 선호합니다. 그 이유는 classical 방식보다 간결하게 구현할 수 있기 때문입니다. 밑의 예제 1 ~ 4번까지는 classical 방식의 코드 재사용 방법이고, 5번은 prototypal 방식인 Object.create()를 사용하여 코드의 재사용을 보여줍니다.
(1) 기본 방법
부모에 해당하는 함수를 이용하여 객체를 생성합니다. 자식에 해당하는 함수의 prototype 속성을 부모 함수를 이용하여 생성한 객체를 참조하는 방법입니다.
function Person(name) { this.name = name || “혁준”; } Person.prototype.getName = function(){ return this.name; }; function Korean(name){} Korean.prototype = new Person(); var kor1 = new Korean(); console.log(kor1.getName()); // 혁준 var kor2 = new Korean(“지수”); console.log(kor2.getName()); // 혁준
[소스 7]위 소스 7을 보면 부모에 해당하는 함수는 Person입니다. 10라인에서 자식 함수인 Korean 함수 안의 prototype 속성을 부모 함수로 생성된 객체로 바꿨습니다. 이제 Korean 함수와 new 연산자를 이용하여 생성된 kor 객체의 __proto__속성이 부모 함수를 이용하여 생성된 객체를 참조합니다. 이 객체가 Korean 함수를 이용하여 생성된 모든 객체의 프로토타입 객체가 됩니다. kor1에는 name과 getName() 이라는 속성이 없지만, 부모에 해당하는 프로토타입객체에 name이 있습니다. 이 프로토타입객체의 부모에 getName()을 가지고 있어 kor1에서 사용할 수 있습니다. 이 방법에도 단점이 있습니다. 부모 객체의 속성과 부모 객체의 프로토타입 속성을 모두 물려받게 됩니다. 대부분의 경우 객체 자신의 속성은 특정 인스턴스에 한정되어 재사용할 수 없어 필요가 없습니다. 또한, 자식 객체를 생성할 때 인자를 넘겨도 부모 객체를 생성할 때 인자를 넘겨주지 못합니다. 그림 7 소스 하단 두 번째 줄에서 kor2 객체를 생성할 때 Korean 함수의 인자로 지수라고 주었습니다. 객체를 생성한 후 getName()을 호출하면 지수라고 출력될 거 같지만, 부모 생성자에 인자를 넘겨주지 않았기 때문에 name에는 default 값인 혁준이 들어있습니다. 객체를 생성할 때마다 부모의 함수를 호출할 수도 있습니다. 하지만 매우 비효율적입니다. 그래서 다음 방법은 이 방법의 문제점을 해결하는 방법을 알아보겠습니다.
(2) 생성자 빌려 쓰기
이 방법은 기본 방법의 문제점인 자식 함수에서 받은 인자를 부모 함수로 인자를 전달하지 못했던 부분을 해결합니다. 부모 함수의 this에 자식 객체를 바인딩하는 방식입니다.
[그림 8]function Person(name) { this.name = name || “혁준”; } Person.prototype.getName = function(){ return this.name; }; function Korean(name){ Person.apply(this, arguments); } var kor1 = new Korean(“지수”); console.log(kor1.name); // 지수
[소스 8]위 소스 8 10라인을 보면 Korean 함수 내부에서 apply 함수를 이용합니다. 부모객체인 Person 함수 영역의 this를 Korean 함수 안의 this로 바인딩합니다. 이것은 부모의 속성을 자식 함수 안에 모두 복사합니다. 객체를 생성하고, name을 출력합니다. 객체를 생성할 때 넘겨준 인자를 출력하는 것을 볼 수 있습니다. 기본 방법에서는 부모객체의 멤버를 참조를 통해 물려받았습니다. 하지만 생성자 빌려 쓰기는 부모객체 멤버를 복사하여 자신의 것으로 만들어 버린다는 차이점이 있습니다. 하지만 이 방법은 부모객체의 this로 된 멤버들만 물려받게 되는 단점이 있습니다. 그래서 부모객체의 프로토타입 객체의 멤버들을 물려받지 못합니다. 위 그림 8 그림을 보시면 kor1 객체에서 부모객체의 프로토타입 객체에 대한 링크가 없다는 것을 볼 수 있습니다.
(3) 생성자 빌려 쓰고 프로토타입 지정해주기
이 방법은 방법 1과 방법 2 문제점들을 보완하면서 Java에서 예상할 수 있는 동작 방식과 유사합니다.
[그림 9]function Person(name) { this.name = name || “혁준”; } Person.prototype.getName = function(){ return this.name; }; function Korean(name){ Person.apply(this, arguments); } Korean.prototype = new Person(); var kor1 = new Korean(“지수”); console.log(kor1.getName()); // 지수
[소스 9]위 소스 9 9라인에서 부모 함수 this를 자식 함수 this로 바인딩합니다. 11라인에서 자식 함수 prototype 속성을 부모 함수를 사용하여 생성된 객체로 지정했습니다. 부모객체 속성에 대한 참조를 가지는 것이 아닌 복사본을 통해 내 것으로 만듭니다. 동시에 부모객체의 프로토타입 객체에 대한 링크도 참조됩니다. 부모객체의 프로토타입 객체 멤버도 사용할 수 있습니다. 그림 7과 비교했을 때 kor1 객체에 name 멤버가 없는 반면 그림 9에서는 name 멤버를 가지고 있는 것을 확인할 수 있습니다. 그림 8과 비교했을 때는 프로토타입 링크가 부모 함수로 생성한 객체에 대해 참조도 하고 있습니다. 그리고 부모 객체의 프로토타입 객체도 링크로 연결된 것을 볼 수 있습니다. 이 방법에도 문제점이 있습니다. 부모 생성자를 두 번 호출합니다. 생성자 빌려 쓰기 방법과 달리 getName()은 제대로 상속되었지만, name에 대해서는 kor1 객체와 부모 함수를 이용하여 생성한 객체에도 있는 것을 볼 수 있습니다.
(4) 프로토타입공유
이번 방법은 부모 생성자를 한 번도 호출하지 않으면서 프로토타입 객체를 공유하는 방법입니다.
function Person(name) { this.name = name || “혁준”; } Person.prototype.getName = function(){ return this.name; }; function Korean(name){ this.name = name; } Korean.prototype = Person.prototype; var kor1 = new Korean(“지수”); console.log(kor1.getName()); // 지수
[소스 10]위 소스 10 12라인에서 자식 함수의 prototype 속성을 부모 함수의 prototype 속성이 참조하는 객체로 설정했습니다. 자식 함수를 통해 생성된 객체는 부모 함수를 통해 생성된 객체를 거치지 않고 부모 함수의 프로토타입 객체를 부모로 지정하여 객체를 생성합니다. 부모 함수의 내용을 상속받지 못하므로 상속받으려는 부분을 부모 함수의 프로토타입 객체에 작성해야 사용자가 원하는 결과를 얻게 됩니다. 그림 9와 비교했을 때 중간에 부모 함수로 생성한 객체가 없고 부모 함수의 프로토타입 객체로 링크가 참조되는 것을 볼 수 있습니다.
(5) prototypal한 방식의 재사용
이 방법은 Object.create()를 사용하여 객체를 생성과 동시에 프로토타입객체를 지정합니다. 이 함수는 첫 번째 매개변수는 부모객체로 사용할 객체를 넘겨주고, 두 번째 매개변수는 선택적 매개변수로써 반환되는 자식객체의 속성에 추가되는 부분입니다. 이 함수를 사용함으로 써 객체 생성과 동시에 부모객체를 지정하여 코드의 재활용을 간단하게 구현할 수 있습니다.
var person = { type : “인간”, getType : function(){ return this.type; }, getName : function(){ return this.name; } }; var joon = Object.create(person); joon.name = “혁준”; console.log(joon.getType()); // 인간 console.log(joon.getName()); // 혁준
[소스 11]위 소스 1라인에서 부모 객체에 해당하는 person을 객체 리터럴 방식으로 생성했습니다. 그리고 11라인에서 자식 객체 joon은 Object.create() 함수를 이용하여 첫 번째 매개변수로 person을 넘겨받아 joon 객체를 생성하였습니다. 한 줄로 객체를 생성함과 동시에 부모객체의 속성도 모두 물려받았습니다. 위의 1 ~ 4번에 해당하는 classical 방식보다 간단하면서 여러 가지 상황을 생각할 필요도 없습니다. JavaScript에서는 new 연산자와 함수를 통해 생성한 객체를 사용하는 classical 방식보다 prototypal 방식을 더 선호합니다.
5. 마치며
지금까지 JavaScript 프로토타입에 대해 정리했습니다. 처음 프로토타입을 공부할 땐, 자바 OOP 관점에서 접근하여 혼란스러웠습니다. 하지만 함수의 내부구조부터 차근차근 접근하였더니 쉽게 이해할 수 있었습니다. 그리고 코드의 재사용 방식에 대해 공부하였던 것도 JavaScript 언어 자체를 이해하는 데 많은 도움이 되었습니다.
이 글이 JavaScript를 처음 접하거나 프로토타입에 대해 공부하는 분들에게 많은 도움이 되었으면 합니다.
참조 도서 및 사이트
[JavaScript] 프로토타입과 프로토타입 체인
결론
자바스크립트는 프로토타입 기반 언어이다.
프로토타입은 원형(유전자)라는 뜻이다. (객체의 원형, 즉 객체의 부모가 가지는 유전자 즉, 상속받은 데이터, 메소드)
함수 객체에는 프로토타입이라는 특수한 유형의 객체 프로퍼티(속성)가 존재한다. (객체와 프로터티가 같은 의미가 아니다.)
이러한 prototype 프로퍼티를 통해 생성자 함수는 인스턴스에게 프로토타입 객체에 있는 데이터, 메소드를 상속한다. (인스턴스는 사용 가능하다.)
인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 key가 있는지 확인한다.
없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. 이것을 프로토타입 체인이라고 한다.
아직 많이 다듬어 지지않은 글입니다.
앞으로 지속적으로 수정 및 보완할 예정입니다.
부족한 설명이나 잘못된 부분 있으면 댓글로 지적 부탁드립니다. 🙏
프로토타입을 알아보자!
자바스크립트는 프로토타입 언어이다.
여기에서 프로토타입이란 무엇이며 어떻게 동작하는 것인지 알아보자.
함수, 객체, 생성, 상속, 프로퍼티(속성), protorype, __protorype, 체이닝과 같은 키워드가 나온다.
프로토타입은 객체의 원형이다.
배열 자료형을 담은 변수에서 sort 메소드를 사용할 수 있는 이유는 무엇일까?
이는 뭔가 내부적으로 배열 자료형에는 위 메소드를 쓸 수 있게 처리해 놓았기 때문일 것이다.
어떻게 처리해 놓았을까? 바로 상속이라는 개념을 통해서이다.
위에서 arr 라는 변수를 배열 리터럴로 생성했지만 내부적으로는 new Array() 같이 생성자 함수로 선언한 것이다.
new 키워드는 객체를 생성하는 방법 중, 생성자 함수(Constructor)를 사용하여 객체를 만들 때 함께 쓰는 키워드이다.
new 생성자함수명() 의 형식을 통해 자바스크립트에서 동일한 구성을 가진 객체를 여러 개 만들어 낼 수 있다.
이렇게 생성된 인스턴스 arr는 생성자 함수에게서 sort 메소드 등을 상속받는다.
arr 배열 객체의 원형은 Array이다.
그렇다면 객체 == 프로퍼티일까? 정확히는 아니다.
함수 객체가 가지는 프로토타입이라는 특수한 형태의 객체 프로퍼티를 통해 상속받는다.
Array.prototype 객체를 살펴보면 배열에서 사용한 메소드들을 찾아 볼 수 있다.
Array로 생성한 모든 배열 인스턴스는 해당 프로토타입에 있는 데이터, 메소드를 사용할 수 있다.
Array.prototype를 통해 새롭게 데이터를 만들 수도 있다.
당연히 Array.prototype를 통해 기존 메소드를 오염시킬 수도 있다.
배열 arr과 Array, 프로토타입의 관계 모식도
상속은 .protorype 프로퍼티를 통해서 가능하다면 인스턴스가 자신의 프로토타입은 .__proto__를 통해서 가능하다.
prototype vs __proto
prototype: 내가 원형일 때 존재함.
함수 객체만 가지고 있다.
생성자를 가지는 원형으로 선언 가능
__proto__: 나의 원형을 가리킴
모든 객체가 가지고 있다.
하나의 링크라고 할 수 있다.
프로토타입 체인을 알아보자!
인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 key가 있는지 확인한다.
없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. 이것을 프로토타입 체인이라고 한다.
그렇다면 Array의 원형은 어떻게 될까? 바로 Object이다.
우선 Array는 함수이다. 함수는 객체이다.
함수 객체만 prototype 프로퍼티를 가질 수 있고 인스턴스를 생성할 수 있다.
그렇다면 프로토타입 체인의 종착역은 어디일까? null
상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 null 을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다.
원시 자료형으로 취급 받는 null 자료형이 엄밀히 말해서 원시 자료형이 아닌 이유는 빈 객체 주소를 참조하기 있기 때문이라는 것이 생각이 났다. 그리고 객체는 참조 자료형이기 때문에 Array.prototype.constructor === Array 식이 성립된다.
Array.prototype.constructor === Array; // 결과는 무엇일까요? true Array.prototype === [1,2,3].__proto__; // 결과는 무엇일까요? true Array.prototype.name === [1,2,3].name; // 결과는 무엇일까요? true
Reference
Javascript: prototype 이란 :: 마이구미 자바스크립트의 프로토타입(prototype) 에 대해 다뤄본다. 항상 필요할때마다 찾는 모습을 보니 완전히 내것이 아니라고 느껴 정리하게 되었다. 참고한 글은 오래된 글이지만 아직까지도 가장 잘 정리된 글이라고.. https://mygumi.tistory.com/312
The JavaScript Object Paradigm and Prototypes Explained Simply All the confusing points about JavaScript objects revealed so you can stop hating them as much https://levelup.gitconnected.com/the-javascript-object-paradigm-and-prototypes-explained-simply-e9cb9eaa49aa
상속과 프로토타입 – JavaScript | MDN Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.) https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
404 – velog 개발자들을 위한 블로그 서비스. 어디서 글 쓸지 고민하지 말고 벨로그에서 시작하세요. https://velog.io/@h0ngwon/Javascript-proto-vs-prototype-%EC%B0%A8%EC%9D%B4
colin’s 블로그 개발 강좌 블로그 https://colinch4.github.io/2021-01-14/new/
prototype 이란?
반응형
우선 이 포스트는 http://insanehong.kr/post/javascript-prototype/#toc_291 를 읽고
나름 정리와 추가코드를 작성한 것임을 미리 밝히고 시작하겠습니다.
그래서 해당 블로그의 글을 읽고 오시면 더 도움이 되실것 같습니다.
SF만화나 영화를 보면 프로토타입이란 단어가 간혹 들린다. 예를 들자면 어떤 사이보그들의 모체 혹은 처음 버전을 프로토타입이라고
얘기를 하는데, 자바스크립트에서의 프로토타입도 이와 크게 다르지 않다.
자바스크립트에서의 프로토타입은 객체생성의 모체가 되는 놈을 말한다.
여기까지는 대부분 아는데, 이 프로토타입에는 2가지 유형이 있다는 것을 대부분은 모르고 있다.
프로토타입에는 프로토타입 연결과 프로토타입 속성 2가지가 있다.
이때, 흔히 API나 책에서 정의 내리고 있는 프로토타입은 프로토타입 연결인데,
우리가 활용하고 작성하는 코드들은 프로토타입 속성을 이용한 것이다.
아래와 같은 코드를 chrome 개발자도구의 console에 입력해보자
function Member(){ this.x = “this”; }; Member.prototype.x = “protoX”; Member.prototype.y = “protoY”; Member.x = “x”; var a = new Member(); console.log(a.x);
실행을 하기전에 결과를 생각해보자.
자 생각해보자 기존에 우리는 prototype을 변경하면 해당 객체로 생성된 모든 하위객체들이 영향을 받는다고 알고 있었다.
그결과로 a.y에는 정상적으로 protoY가 출력됨을 확인할 수 있다.
그렇다면 Member.prototype.x 의 값을 protoX로 변경했으니 a.x 에도 protoX가 들어있어야 하지 않나??
하지만 결과는 this이다.
여기서 개발자도구의 watch Expressions로 각각 속성값들이 어떻게 할당되어있는지 확인해보겠다.
a의 속성에는 x와 _proto_ 2가지가 있음을 알 수 있다.
a의 _proto_는 어디에서 나온것일까? 추가적으로 Member의 속성도 확인해보겠다.
Member의 속성을 보면 특이한 점을 발견할 수 있다.
Member의 x라는 속성은 x라는 값을 가지고 있다.
a와 동일한 x값을 가지고 있지 않다.
또하나, prototype 이란 속성과 _proto_ 라는 속성 2가지가 있다는 점이다.
두 속성의 하위 속성들을 보면 a의 _proto_ 와 동일한 속성을 가진 놈을 찾을 수 있다.
바로 prototype 속성이다.
위 과정들을 보며 탁하고 감이 오는가?
a는 Member로 직접 객체생성이 된 것이 아니라, Member의 prototype 이란 속성으로 객체생성이 되었다는 것이다.
여기에서 Member.prototype을 프로토타입속성
a._proto_ 를 프로토타입 연결 이라고 한다.
즉, 자바스크립트에서는 최초 객체생성시 원형 객체의 prototype에 있는 원형의 복사본을 통해서 객체를 생성하는데,
이로인해 하위 객체들은 원형 객체인 Member의 영향을 받지 않고, 원형의 prototype 에 영향을 받게 되는 것이다.
응? 그렇다면 prototype.x = “protoX” 는 왜 동작하지 않는가? 라고 의문을 가질수도 있다.
이것은 자바스크립트 상속에 관한 개념인데,
자바스크립트에서는 해당 객체에 없는 속성은 자신의 _proto_로 계속해서 올라가면서 찾는다.
이로인해, y의 경우 a에 없는 속성이기에 a 의 _proto_인 Member.prototype 에게서 찾아낸 것이고,
x의 경우에는 a에게 있기에 prototype의 x를 쓰지 않은 것이다.
자 정리해보자.
자바스크립트객체에는 프로토타입 속성과 프로토타입 연결 2가지속성이 있는데,
프로토타입 속성이 흔히 우리가 사용하는 프로토타입이며, 이는 선언된 객체의 복사본이다.
프로토타입 연결은 생성된 객체의 원형을 나타내는 속성이다.
prototype에 속성을 추가한다고 하여 무조건 모든 하위 객체에 영향을 주는 것은 아니다.
상속개념으로 인해 하위 객체가 prototype에 추가된 속성과 동일한 이름을 가지고 있을 경우,
하위 객체가 가지고 있는 속성을 먼저 본다.
그리고 하위객체에 해당 속성이 없다면 하위객체의 모체로 찾아가서 속성을 할당받는다.
사용법만 익히면 될것같은 자바스크립트가 갈수록 너무너무 재밌어 진다.
다음 포스트에도 좀 더 개념적으로, 좋은코드로 정리해야겠다.
반응형
Javascript: prototype 이란 :: 마이구미
반응형
자바스크립트의 프로토타입(prototype) 에 대해 다뤄본다. 항상 필요할때마다 찾는 모습을 보니 완전히 내것이 아니라고 느껴 정리하게 되었다. 참고한 글은 오래된 글이지만 아직까지도 가장 잘 정리된 글이라고 생각한다. 참고 링크 – http://insanehong.kr/post/javascript-prototype/
자바스크립트는 프로토타입이라는 용어를 뗄 수 없다.
그만큼 매우 중요하기에 확실히 이해해야한다.
하지만 자바스크립트 프로토타입은 많은 이들에게 혼란을 주기도 한다.
이유는 천천히 읽어보자.
“자바스크립트의 프로토타입(Prototype)은 무엇인가?”
일반적으로 프로토타입(prototype)이란 시제품, 견본 등과 같은 의미로 일반적으로 원형 이라는 뜻을 가진다.
질문은 “C++, JAVA 에서 Class 란 무엇인가?” 와 같은 맥락이라고 볼 수 있다.
이러한 원천적인 질문의 답은 실질적으로는 “원형” 이라는 일반적인 의미를 벗어나지 않는다.
즉, 자바스크립트에서 프로토타입은 자신을 만들어낸 객체의 원형 을 뜻한다.
만약 반대로 프로토타입은 자신을 통해 만들어질 객체의 원형이라고 생각하고 있다면, 이건 다음 질문에 대한 답이 된다.
“자바스크립트에서 프로토타입(prototype)은 어떻게 사용되는가? ”
실질적인 자바스크립트 사용 질문으로써, 여기서 나타내는 프로토타입은 자신을 통해 만들어질 객체의 원형 을 뜻한다.
정확히는 용어로는 프로토타입보다는 프로토타입 프로퍼티(prototype property) 를 의미한다.
prototype 프로퍼티란 아래와 같이 실제 코드에서 볼 수 있는 것을 의미한다.
결과적으로 질문에 따른 프로토타입의 의미는 2 가지로 구분했다.
이러한 이유는 자바스크립트 자체의 프로토타입을 표현하는 용어는 두가지로 나뉘어있기 때문이다.
프로토타입의 2 가지 용어는 다음과 같다.
Prototype Link – 자신을 만들어낸 객체의 원형
Prototype Object – 자신을 통해 만들어질 객체의 원형
위와 같은 용어들은 예제 코드를 통해 확인해보자.
function person() { } console.dir(person)
위와 같은 결과를 그림으로 표현하면 다음과 같다.
__proto__ – 자신을 만들어낸 객체의 원형과 연결된 속성이다.
constructor – 생성자로써, 자신을 만들어낸 객체와 연결된 속성이다.
prototype – 자신을 원형으로 만들어진 새로운 객체들과 연결된 속성이다. person 의 Prototype Object 는 생성 당시의 정보를 가진 새로운 객체를 복제하여 생성한다. (아래 예제 참고)
prototype 프로퍼티와 연결된 Prototype Object 는 person 함수를 통해 생성되는 객체들의 원형이 되는 것이다.
이를 이해하기 위한 예제 코드를 통해 보자.
var person = function() { this.hp = function() { console.log(“100”); } } person.hp = function() { console.log(“50”); } var p1 = new person(); p1.hp() // 100 우리가 원하는 결과는 50 이지만 결과는 100 이다.
이러한 이유는 Prototype Object 는 생성 당시의 정보를 복제하기 때문이다.
그림으로 표현하면 다음과 같다.
원하는 결과를 위한 예제는 다음과 같다.
var person = function() {} person.hp = function() { console.log(“100”); } person.prototype.hp = function() { console.log(“50”); } var p1 = new person(); p1.hp() // 50
이것이 가능한 이유는 p1의 원형이 되는 Prototype Object 에 직접 접근 했기 때문이다.
지금까지는 이해를 위해 연결된 하나의 프로토타입만을 표현했다.
실제로 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장되었기 때문에 연결의 끝은 항상 Object 이다.
이를 표현하기 위한 예제와 이를 바탕으로 연결된 전체 그림은 다음과 같다.
var person = function() { this.hp = function() { // 상속 console.log(“100”); } } // 공유 person.prototype.power = 5; var p1 = new person(); var p2 = new person(); p1.hp = function() { console.log(“50”); } p1.mp = function() { console.log(“100”); } p1.hp(); // 50 p2.hp(); // 100 p1.mp(); // 100 p2.mp(); // p2.mp is not a function p1.power; // 5 p2.power; // 5 p1.toString(); // [object]
person.hp 는 복제를 통해 상속 메소드를 뜻한다.
prototype 을 이용한 power 변수 는 공유 변수를 뜻한다.
위처럼 연결이 이어진 관계를 프로토타입 체인(prototype chain) 이라고 한다.
연결은 __proto__ 프로퍼티를 통해 이어진다.
이것을 이용해 자바스크립트 내부에서는 하위에서 최 상위(Object)까지 탐색한다.
이로 인해, 연결된 모든 변수 및 메소드 등과 같은 것을 접근할 수 있게 된다.
탐색시 접근 대상을 찾는다면 더이상 탐색하지않는다.
반대로 찾을때까지 탐색하다가 연결의 끝인 Object 까지 원하는 것이 없다면, undefined 또는 에러를 발생하게 된다.
반응형
prototype
이번 수업은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 prototype에 대해서 자세히 알아보자.
prototype
그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다.
function Ultra(){} Ultra.prototype.ultraProp = true; function Super(){} Super.prototype = new Ultra(); function Sub(){} Sub.prototype = new Super(); var o = new Sub(); console.log(o.ultraProp);
결과는 true다.
생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.
객체 o에서 ultraProp를 찾는다. 없다면 Sub.prototype.ultraProp를 찾는다. 없다면 Super.prototype.ultraProp를 찾는다. 없다면 Ultra.prototype.ultraProp를 찾는다.
prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.
Super.prototype = Ultra.prototype 으로하면 안된다. 이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.
자바스크립트 프로토타입(Prototype)이란? __ 프로토타입링크(Prototype Link)__프로토타입객체(Prototype Object)
(ES6에서는 클래스 문법이 생겼다지만. 동작 및 방식에 대해 아직 공부하지 않았으므로 언급하지 않고 다음으로 미루겠습니다.)
자바(Java)나 파이썬(Python) 등, 보통 객체지향언어들은 클래스(Class) 기반의 언어라고 합니다.
하지만 자바스크립트는 프로토타입 기반(Prototype-based programming)의 객체지향언어입니다.
그래서 자바스크립트로 프로그래밍을 하다 보면
필수적으로 프로토타입 기반 프로그래밍이라는 말을 접하게 됩니다.
자바스크립트 그 자체로 불릴 만큼 중요한 개념인 프로토타입에 관해서 공부해보겠습니다.
프로토타입(Prototype)
”
원래의 형태 또는 전형적인 예, 기초 또는 표준이다.
시제품이 나오기 전의 제품의 원형으로……. 블라블라….
중요한 기능들이 포함된 시스템의 초기 모델이다.
”
– 위키백과
프로토타입에 대한 핵심 단어들을 기억하고 넘어가 보겠습니다.
핵심단어는 [기초, 표준, 제품의 원형, 초기 모델]입니다.
자바스크립트에서 프로토타입의 개념은 프로토타입 객체(Prototype Object), 프로토타입 링크(Prototype Link)를 통틀어 말합니다.
자바스크립트에서 객체가 생성될때, 생성된 객체의 부모가 되는 객체의 원형을 프로토타입 객체(Prototype Object)라고 하며 생성된 객체와 부모 객체와의 참조를 이어주는 링크를 프로토타입 링크(Prototype Link)라고 합니다.
그리고 이 프로토타입 객체를 프로토타입이라고 말하며 객체지향의 상속개념과 같이 부모객체의 속성, 메소드를 상속받아 객체를 재생성하며 프로그래밍하는 기법을 프로토타입 프로그래밍(Prototype-based programming)이라고합니다.
프로토타입 기반 프로그래밍(Prototype-based programming)
다른 명칭으로는
클래스 리스(class-less) 프로그래밍,
프로토타입 지향(prototype-oriented) 프로그래밍,
인스턴스(instance-based) 프로그래밍이라고 불리기도 합니다.
프로토타입 프로그래밍은 자바 클래스의 상속을 흉내 내는 방식의 프로그래밍인데, 클래스와의 차이점을 간단히 확인하고 넘어가겠습니다.
클래스 기반
클래스라는 추상화된 개념을 선언한 뒤, 이 클래스를 기반으로 객체에 상속을 지원합니다.
여기서 주목해야 할 점은 객체의 형식이 정의된 클래스는 객체가 아닌 개념이라는 점입니다.
// 1. 클래스 정의 public class Person{ public string country = “korea”; public string name; public int age; // 2. 클래스 생성자 정의 public Person(string name, int age){ this.name = name; this.age = age; } } // 3. 객체 생성 Person boy = new Person(“yoonhee”, “12”);
프로토타입 기반
프로토타입 원형 객체를 생성한 뒤, 이 객체를 이용해서 클래스의 상속을 흉내 냅니다.
여기서 주목해야 할 점은 프로토타입은 객체입니다.
// 1. 프로토타입 객체 정의 var base = function(){ this.country = “korea” } // 2. 프로토타입 객체 생성자 정의 var Person = function(name, age){ this.name = name; this.age = age; } // 3. 생성자에 프로토타입 상속 Person.prototype = base; // 4. 객체 생성 var boy = new Person(“yoonhee”, “12”);
매우 유사해 보이지만 프로토타입에서는 생성자에 프로토타입을 상속받는 절차가 필요한 것을 확인할 수 있습니다.
자바의 클래스를 흉내낸다고 하는 이유는,
클래스는 개념이며 이 개념을 통해 객체를 생성하여 인스턴스로 만듭니다.
하지만 프로토타입은 클래스와 같은 개발 방식을 흉내내지만, 인스턴스입니다.
클래스는 객체의 형식이 정의된 개념
프로토타입은 객체
인스턴스란(Instance)?
더보기 객체 지향 프로그래밍에서 인스턴스는 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미한다.
프로토타입 객체(Prototype Object)
자바스크립트는 함수(Function) 자료형으로 객체를 선언할 때 생성자(Constructor)를 부여받습니다.
함수 자료형
var func = new Function(); var protoFunc = new func(); var func2 = function(){}; var protoFunc2 = new func(); console.log(func.prototype); // { constructor : f(), __proto__ : Object } console.log(func2.prototype); // { constructor : f(), __proto__ : Object } function(){}는 new Function()으로 선언한것과 같습니다.
함수 자료형 외의 다른 자료형에서는 프로토타입 객체를 생성할 수 없습니다.
var obj = {}; var protoObj = new obj(); // obj is not a constructor var num = 123; var protoNum = new num(); // num is not a constructor var boolean = true; protoBoolean = new boolean() // boolean is not a constructor
그리고 이 생성자(Constructor)가 있는 객체만이 자바스크립트의 new 키워드를 통해 객체를 생성할 수 있습니다.
new 키워드를 통해 객체를 선언하면 함수의 생성과 함께 프로토타입 객체(Prototype Object)도 같이 생성됩니다.
Person 함수를 선언해보겠습니다.
function Person(){}
Person 함수 객체와
Person 함수의 프로토타입 객체가 생성되며
각 객체는 서로를 참조할 수 있게 연결되는 속성을 가지고 있습니다.
출처 https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
1.
Person 객체의 prototype을 통한 프로토타입 객체확인
2.
Person 객체의 constructor 는 Person 객체에 접근할 수 있다.
Person 객체의 __proto__는 Person 객체의 원형에 접근할 수 있습니다.
이때 Person 객체의 원형은 new Function이므로 자바스크립트 네이티브 코드가 반환됩니다.
__ proto __ 속성은(비표준) 모든 객체가 가지고 있다.
그리고 객체와 객체 사이에 참조하는 속성들을 레퍼런스 변수라고 합니다.
또한, 이 참조는 동적으로 추가된 사항에 대해서도 접근할 수 있습니다.
레퍼런스 변수 예제
1.생성자를 부여받은 객체만이 new 키워드를 통한 객체 생성이 가능하다고 한 것을 기억해야 합니다.
function Person(x) { this.x = x; }; // 프로토타입 객체 생성자 정의 var A = new Person(‘hello’); // 객체 생성 console.log(A.x); // hello // Person.x와 동일한 결과 console.log(A.prototype.x) // syntax error // A는 생성자의 권한이 없는 단일객체이기에 문법오류를 일으킨다.
2.프로토타입 원형 객체의 내부 스코프에 선언한 변수 x와 prototype으로 선언한 x의 위치를 확인합니다.
function Person(){ this.x = ‘Person x’; }; // 프로토타입 객체 생성자 정의 Person.prototype.x = ‘prototype x’; // 프로토타입 선언 var newPerson = new Person(); // 객체 생성 console.log(newPerson.x); // Person x console.log(newPerson.__proto__.x); // prototype x console.log(newPerson); /* { x : ‘Person x’, __proto__ : x : ‘prototype x’, constructor : f Person(), __proto__ : Object } */
new 키워드를 통해 생성한 객체 newPerson은 원형 객체 Person을 참조하고 있기 때문에
Person.x = newPerson.x이 됩니다.
prototype으로 선언한 x는 __proto__ 레퍼런스 변수를 통해 원형 객체 Person의 x를 참조할 수 있습니다.
프로토타입 링크(Prototype Link)
__proto__ 속성은 프로토타입 링크라고 불리며 모든 객체에 존재하는 레퍼런스 속성이자 객체의 원형을 참조합니다. 객체가 생성될 때 프로토타입이 결정되며 사용자가 임의로 변경할수도 있습니다.
사용자가 임의로 동적으로 변경하는 특징을 사용해 상속을 구현할 수도 있습니다.
이 프로토타입 링크를 통해 상위 __proto__를 접근할 수 있으며 이것을 프로토타입 체인(Prototype chain)이라고 합니다. __proto__ 속성의 동작은 내부적으로 Object.getPrototypeOf가 호출되며 프로토타입객체를 반환합니다.
__proto__와 prototype는 둘다 프로토타입객체를 가리키고 있지만 두 속성의 관점은 차이가 있다고합니다.
__proto__ prototype 모든 객체가 가지고 있다. 함수 객체만 가지고 있다. 부모 프로토타입 객체를 가리킨다. (함수의 경우 Function.prototype을 가리킨다.) 생성자를 가진 원형으로 생성할 수 있다.
참고 : https://poiemaweb.com/js-prototype
{}나 new Object로 선언한 객체는 자바스크립트에서 제공하는 네이티브 코드를 원형으로 두고 있어서 __proto__는 네이티브 코드를 contstuctor로 가지고 있습니다.
var object = {}; var object2 = new Object();
예제
원형 객체 Person의 prototype을 상속받습니다.
function Person(){} Person.prototype.getType = function(){ return “사람입니다”; }; var yoon = new Person(); var jun = new Person(); console.log(yoon.getType()); // 사람입니다 console.log(jun.getType()); // 사람입니다
1. __proto__와 prototype의 위치
function Person(){ this.x = ‘Person x’; }; Person.prototype.x = ‘prototype x’; var newPerson = new Person(); console.log(newPerson.x); // Person x console.log(newPerson.__proto__.x); // prototype x’
– Person 함수 내부 스코프에 this.x를 선언
– Person의 prototype에 x를 선언
newPerson 객체의 x에 접근할 때 Person 내부 스코프에 선언한 대로 반환합니다.
__proto__.x로 참조 시 newPerson의 prototype에 접근하여 x를 반환합니다.
그렇다면 프로토타입 객체 원형의 내부 스코프에 this.x를 선언하지 않고 진행했을때에는 어떤 결과가 나오는지 확인해봅니다.
2. 프로토타입체인, 내부에 선언된 값이 없다면 상위를 참조
function Person(){}; Person.prototype.x = ‘prototype x’; var newPerson = new Person(); console.log(newPerson.x); //prototype x console.log(newPerson.__proto__.x); // prototype x’
– Person 내부에 선언된 x의 값을 찾고 x의 값이 없으면 __proto__를 통해 상위 객체에서 x의 값을 찾는다.
위의 예제에서는 prototype.x가 있기 때문에 prototype.x의 값을 반환한다.
프로토타입객체 내부에 변수가 없으면 해당 변수의 값을 찾기 위해 상위 프로토타입을 이어 참조하면서 해당 변수가 있을때까지 반복하여 값을 찾습니다. 끝까지 값이 없으면 undefined를 반환합니다.
이렇게
객체와 객체의 단방향 공유관계를 프로토타입 체인(Prototype Chain)이라고 합니다.
프로토타입체인은 동적으로 상속된 내용을 참조하기 때문에 실행할 때 값이 변경될 수 있으며 동적으로 변경되는 객체의 메서드나 속성을 찾아가는 과정을 프로토타입 룩업이라고 합니다.
__proto__를 통한 직접적인 접근은 참조에 대한 확인일 뿐 개발 시에는 지양해야 하며 Object.getPrototypeOf() 메서드를 사용하여 프로그래밍해야 합니다.
상위 객체를 참조하는 예제는 아래와 같습니다.
var obj = function(){} console.log(obj.__proto__); // f(){[native code]}; console.log(obj.__proto__.__proto__); // { constructor : f, __defineGetter : f, ….. } console.log(obj.__proto__.__proto__.__proto__); // null
출처 및 참고
– https://meetup.toast.com/posts/104
– https://velog.io/@yhe228/prototype%EC%9D%B4%EB%9E%80-6dk3v32r55
– https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
위키백과, 우리 모두의 백과사전
일련의 프로토타입을 통하여 최종 디자인이 만들어진다.
프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로 개발 검증과 양산 검증을 거쳐야 시제품이 될 수 있다. 프로토타입은 ‘정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델’이다. 이 프로토타입은 사용자의 모든 요구사항이 정확하게 반영할 때까지 계속해서 개선/보완 된다. 실제로 많은 애플리케이션들이 지속적인 프로토타입의 확장과 보강을 통해 최종 설계가 승인된다.
프로토타입이라는 낱말은 원초적 형태라는 뜻의 그리스어 낱말 πρωτότυπον (프로토타이폰)에서 왔다. 이는 원초적이라는 뜻의 πρωτότυπος (프로토타이포스)의 중간음에서 온 것으로, 더 들어가서 “최초의”라는 뜻의 πρῶτος(프로토스)와 “인상”이라는 뜻의 τύπος(타이포스)에서 비롯된 것이다.[1]
프로토타이핑 [ 편집 ]
프로토타이핑은 개발접근법의 하나로서 개발초기에 시스템의 모형(원형, prototype)을 간단히 만들어 사용자에게 보여 주고, 사용자가 정보시스템을 직접 사용해 보게 함으로써 기능의 추가, 변경 및 삭제 등을 요구하면 이를 즉각 반영하여 정보시스템 설계를 다시 하고 프로토타입을 재구축하는 과정을 사용자가 만족할 때까지 반복해 나가면서 시스템을 개선시켜 나가는 방식이다.[2]
프로토타이핑은 시스템의 초기모델을 세우고 다듬고, 다시 세우고 다듬고 하는 반복적인 과정을 통해서 이루어진다. 그러나 프로토타이핑은 무계획적인 반복과정을 지양하고 계획된 반복과정을 통해서 한 과정이 끝날 때마다 사용자의 요구를 좀 더 정확하게 반영한 버전이 나오게 된다.
프로토타입은 실제 현장에서 쓰이는 시스템이 갖추어야 할 모든 기능을 갖고 있지는 않다. 보고서/입력처리 등은 대부분 미완성된 상태이며. 프로세스 처리 과정도 효율적이지 못하지만 프로토타입의 가장 큰 장점은 최종 사용자가 초기 모델을 사용하면서 평가할 수 있도록 도와준다는 데 있다. 사용자는 프로토타입을 실행시키면서 장단점과 필요없는 부분 또는 반드시 첨가되어야 할 부분들을 파악할 수 있다. [3]
프로토타이핑의 단계 [ 편집 ]
프로토타이핑의 과정은 4단계로 구분된다.
1단계
기본적인 사용자 요구사항을 분석한다. 시스템 설계자는 기본적인 요구사항이 도출되기까지 사용자와 함께 작업한다.
2단계
시스템 설계자가 위에 단계에서 도출된 요구사항을 만족시키는 프로토타입을 4세대언어(4GL : Fourth-Generation Language)로 알려진 프로그래밍 언어 또는 CASE 도구를 이용하여 개발한다. 이때 프로토타입은 앞으로 개발될 시스템의 가장 핵심적인 기능 위주로 개발된다.
3단계
사용자가 개발된 프로토타입을 실제 사용함으로써 요구사항이 이행되고 있는지를 확인하며 프로토타입의 보완을 위한 여러가지 제안을 하게 된다.
4단계
프로토타입의 수정과 보완이 이루어진다. 시스템 설계자는 사용자가 요구한 모든 제안사항과 이에 따르는 보완 작업을 하게 된다. 프로토타입이 수정된 후에는 3단계로 돌아간다. 사용자가 만족할 때까지 3단계와 4단계는 계속 반복된다.
프로토타이핑의 장단점 [ 편집 ]
장점 [ 편집 ]
프로토타이핑은 사용자 중심의 개발 방법이다. 프로토타이핑의 중요한 목적 중의 하나가 바로 최종 사용자의 요구를 극대화하는 것이다.
개발시간을 줄일 수 있다. 전통적인 방법으로는 운영 가능한 시스템이 나오기까지 오랜 시간이 걸리지만 프로토타이핑은 비교적 빠른 기간 안에 사용자가 평가할 수 있을 만한 결과를 만들어낸다.
오류를 초기에 발견할 수 있다. 전통적인 방법으로는 시스템이 완성된 후에야 오류를 발견할 수 있다. 따라서 시스템 개발기간이 3년이라면 오류를 발견하기까지 적어도 3년의 시간이 소요될 수 있다. 그러나 프로토타이핑은 개발 초기단계에서 오류를 판별 할 수 있도록 해준다.
변경이 용이하다. 사용자나 관리자는 현재까지의 개발 진행된 프로토타입을 직접 운영함으로써 여러 가지 제안과 변경할 점을 파악할 수 있고, 이러한 사항들은 진행되고 있는 개발과정에 반영하게 된다.
단점 [ 편집 ]
시스템의 유지보수에 필수적인 시스템의 문서화 과정이 지나치게 축소되거나 생략될 수 있다. 단기적으로 볼 때는 이런 문서들이 별로 도움이 되지 않을 수 있다. 그러나 시간이 흐름에 따라 시스템의 수정과 보수가 필요하게 될 때, 시스템에 관련된 문서가 없다면 유지보수에 불필요한 노력이 따른다.
최종적으로 시간과 비용이 훨씬 많이 들 수 있다. 프로토타이핑은 언제든지 변경이 용이하지만 이러한 시스템의 변경이 계속 될수록 시간과 비용은 많이 들게 된다.
프로토타이핑으로 완성된 시스템은 컴퓨터 자원의 활용 측면에서 볼 때 효율적이지 못하다. 이 개발 방법은 자원의 효율성보다는 사용자 요구에 의해 개발되기 때문에 저장장치, 파일시스템, 중앙처리장치 등 하드웨어나 주변기기의 효율성이 무시되기 쉽다. 그러나 최근 컴퓨터 관련 기기들의 성능은 좋아지는 반면 가격은 하락하면서 이 문제의 비중은 크게 감소되고 있다.
코딩교육 티씨피스쿨
프로토타입
상속(inheritance)
상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다.
상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다.
또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다.
따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다.
하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어입니다.
프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다릅니다.
자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 합니다.
프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.
프로토타입 체인(prototype chain)
자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가집니다.
또한, new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받습니다.
예제 var obj = new Object(); // 이 객체의 프로토타입은 Object.prototype입니다. var arr = new Array(); // 이 객체의 프로토타입은 Array.prototype입니다. var date = new Date(); // 이 객체의 프로토타입은 Date.prototype입니다.
하지만 Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않습니다.
또한, 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가집니다.
예제 var date = new Date(); // 이 객체는 Date.prototype 뿐만 아니라 Object.prototype도 프로토타입으로 가집니다.
위와 같이 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인(prototype chain)이라고 합니다.
Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입입니다.
따라서 자바스크립트의 모든 객체는 Object.prototype 객체를 프로토타입으로 상속받습니다.
프로토타입의 생성
프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(object constructor function)를 작성하는 것입니다.
생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토타입을 가지는 객체들을 생성할 수 있습니다.
예제 function Dog(color, name, age) { // 개에 관한 생성자 함수를 작성함. this.color = color; // 색에 관한 프로퍼티 this.name = name; // 이름에 관한 프로퍼티 this.age = age; // 나이에 관한 프로퍼티 } var myDog = new Dog(“흰색”, “마루”, 1); // 이 객체는 Dog라는 프로토타입을 가짐. document.write(“우리 집 강아지는 ” + myDog.name + “라는 이름의 ” + myDog.color + ” 털이 매력적인 강아지입니다.”); 코딩연습 ▶
객체 생성자 함수를 작성할 때에는 관례상 이름의 첫 문자만을 대문자로 작성합니다.
객체에 프로퍼티 및 메소드 추가
이미 생성된 객체에 새로운 프로퍼티나 메소드를 추가하는 방법은 다음과 같습니다.
예제 function Dog(color, name, age) { this.color = color; this.name = name; this.age = age; } var myDog = new Dog(“흰색”, “마루”, 1); myDog.family = “시베리안 허스키”; // 품종에 관한 프로퍼티를 추가함. myDog.breed = function() { // 털색을 포함한 품종을 반환해 주는 메소드를 추가함. return this.color + ” ” + this.family; } document.write(“우리 집 강아지는 ” + myDog.breed() + “입니다.”); 코딩연습 ▶
위의 예제에서 새롭게 추가된 weight 프로퍼티와 breed() 메소드는 오직 myDog 인스턴스에만 추가됩니다.
이미 생성된 다른 Dog 객체나 차후에 생성되는 어떠한 다른 Dog 객체에도 추가되지 않습니다.
프로토타입에 프로퍼티 및 메소드 추가
프로토타입에 새로운 프로퍼티나 메소드를 추가하는 것은 객체에 추가할 때와는 다른 방법을 사용해야 합니다.
프로토타입의 경우에는 생성자 함수에 직접 추가해야만 이후에 생성되는 모든 다른 객체에도 적용할 수 있습니다.
예제 function Dog(color, name, age) { this.color = color; this.name = name; this.age = age; this.family = “시베리안 허스키”; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게 할 수 있음. this.breed = function() { return this.color + ” ” + this.family; }; } var myDog = new Dog(“흰색”, “마루”, 1); var hisDog = new Dog(“갈색”, “콩이”, 3); document.write(“우리 집 강아지는 ” + myDog.family + “이고, 친구네 집 강아지도 ” + hisDog.family + “입니다.”); 코딩연습 ▶
prototype 프로퍼티
prototype 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있습니다.
예제 function Dog(color, name, age) { this.color = color; this.name = name; this.age = age; } // 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함. Dog.prototype.family = “시베리안 허스키”; // 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함. Dog.prototype.breed = function() { return this.color + ” ” + this.family; }; var myDog = new Dog(“흰색”, “마루”, 1); var hisDog = new Dog(“갈색”, “콩이”, 3); document.write(“우리 집 강아지는 ” + myDog.family + “이고, 친구네 집 강아지도 ” + hisDog.family + “입니다.”); document.write(“우리 집 강아지의 품종은 ” + myDog.breed() + “입니다.
“); document.write(“친구네 집 강아지의 품종은 ” + hisDog.breed() + “입니다.”); 코딩연습 ▶직접 생성한 프로토타입은 위와 같이 새로운 프로퍼티나 메소드를 마음껏 추가하거나 삭제할 수 있습니다.
물론 자바스크립트 표준 객체의 프로토타입도 임의로 수정할 수 있으나, 심각한 오류가 발생할 가능성이 있습니다.
따라서 자바스크립트 표준 객체의 프로토타입은 수정해서는 안됩니다.
연습문제
[JavaScript]프로토타입(Prototype)이란?
객체(Object)
JavaScript의 프로토타입을 설명하기 전에 객체에 대해 살펴봅시다. JavaScript는 배열, 문자열 심지어 함수도 객체로 간주합니다.
다음 예제는 배열 생성 후 요소 추가, 삭제 그리고 요소의 개수를 출력합니다.
const array = [1, 2, 3]; array.push(4); console.log(array); console.log(array.length); array.pop(); console.log(array);
실행 결과
array라는 변수를 대괄호로 초기화했으므로 array는 배열로 정의됩니다. 따라서 push()와 pop() 함수 그리고 length 프로퍼티를 사용할 수 있습니다.
그렇다면, 변수를 빈 객체로 초기화 후 push() 함수를 사용하면 어떻게 동작하는지 다음 예제로 알아봅시다.
const object = {}; object.push(1); object.push(2); console.log(object);
에러 내용
object라는 변수는 객체로 생성되었기 때문에 push() 함수가 상속되지 않습니다. 따라서, push() 함수를 호출하면 구문 에러가 발생합니다.
위 내용을 정리하자면, 변수를 대괄호([])로 초기화하면 해당 변수는 JavaScript 엔진에 의해 배열로 정의되고 배열에서 사용할 수 있는 함수와 프로퍼티가 상속된다는 것을 의미합니다.
프로토타입(Prototype)
함수와 프로퍼티가 상속된다는 것은 특정 객체가 push(), pop() 함수와 length 프로퍼티를 가지고 있다는 것을 의미합니다. 여기서 말하는 특정 객체를 프로토타입(Prototype)이라고 합니다.
아래는 프로토타입 정의입니다.
JavaScript의 모든 객체(배열, 객체, 함수 등)는 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다.
다음 예제는 배열의 프로퍼티를 확인합니다.
const array = []; console.dir(array);
실행 결과
다음 예제는 객체의 프로퍼티를 확인합니다.
const obj = {}; console.dir(obj);
실행 결과
실행 결과에 공통적으로 존재하는 [[Prototype]] 프로퍼티가 바로 프로토타입입니다. 프로토타입 체이닝에 의해 array는 Array의 함수 및 프로퍼티, obj는 Object의 함수 및 프로퍼티를 사용할 수 있습니다.
배열의 프로토타입을 확인해보면, push() 그리고 pop() 함수가 존재합니다.
그러나 객체의 프로토타입에는 push()와 pop() 함수가 존재하지 않으므로 push() 함수를 호출했을 때 구문 오류가 발생했습니다.
JavaScript의 모든 객체의 프로토타입은 값을 할당하는 시점에 결정되며, 프로토타입은 변경될 수 있습니다.
다음 예제는 변수를 선언 > 배열 할당 > 객체 할당 시점의 프로토타입을 보여줍니다.
let arr; // 초기값 없음 console.dir(arr); arr = []; // 배열 할당 console.dir(arr); arr = {}; // 객체 할당 console.dir(arr);
실행 결과
실행 결과에서 알 수 있듯이 초기값이 없으면, undefined로 출력되고 값을 할당하면 할당된 값에 따라 프로토타입이 변경됩니다.
정리
JavaScript는 값을 할당하는 시점에 프로토타입이 정해집니다.
프로토타입은 상위 객체를 의미합니다.
반응형
키워드에 대한 정보 prototype이란
다음은 Bing에서 prototype이란 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 JavaScript – prototype (1/2) : prototype이란?
- 생활코딩
- JavaScript
- 자바스크립트
- prototype
- 프로토타입
- 상속
- inheritance
JavaScript #- #prototype #(1/2) #: #prototype이란?
YouTube에서 prototype이란 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 JavaScript – prototype (1/2) : prototype이란? | prototype이란, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
