[JavaScript ] prototype vs __proto__ + 객체 지향 프로그래밍

자바스크립트의 함수는 객체 

function Person(){}

var Person = new Function();

객체이기 때문에 property를 가질 수 있음 

 

 

 

↓  함께 이해하는 것이 중요

https://rrecoder.tistory.com/87?category=947948

JavaScript 프로토타입(prototype) 이해

---

 

prototype 과 __proto__

예시) 

Person	Person.prototype	kim	lee	__proto__
생성자 함수	Person의 prototype 객체	생성자 함수의 객체	생성자 함수의 객체 2	생성자함수의 prototype 객체 가르킴

 

function Person(name, first, second, third) {
    this.name= name;
    this.first = first;
    this.second = second;
}

Person.prototype.sum = function(){
    return 'prototype' + (this.first + this.second);
}


var kim = new Person('kim',10,20);
var lee = new Person('lee',10,10);


kim.sum = function(){
    return 'this'+(this.first + this.second);
}


console.log("kim.sun()",kim.sum());
console.log("lee.sun()",lee.sum());

 

출처 https://opentutorials.org/module/4047/24629

 

 

1️⃣  function Person	2️⃣Person.prototype.sum	3️⃣ new Person
Person 이라는 생성자 함수 객체 생성  - prototype 속성 생성    Person.prototype 객체 추가로 생성   - constructor 속성 생성 상호참조	Person 의 contructor 함수가 생성됨  (Person으로 생성된 객체들이 모두 공유할 수 있는 함수)	kim 객체 생성  - name, first, second 생성 - __proto__ 속성

 

 

Person의 prototype -> Persons.prototype <- kim의 __proto__

 

 

4️⃣ kim.sum()	5️⃣lee.sum()
1) kim.sum() 찾기 (있음)      kim.sum = funtion (){          this ~~       }	1) lee.sum 찾기 (없음) 2) lee.__proto__에 sum 찾기 (있음) lee.__proto__ -> Person's prototype sum

 

 

 

 

 

 

---

🧐생각해볼 것 

 

객체 자체적으로 갖고 있지 않은 값 어떻게 사용하나?

 

생성자로 만들어진 객체라면, 

객체의 property 중 __proto__를 통해 부모.prototype 객체에서 값 찾아호출 

 

 

__proto__와 prototype의 차이점

 

prototype 은 따로 객체를 두어 자식 객체에서 호출할 수 있도록 했고,

__proto__ 는 부모 prototype객체와 연결하여 부모의 프로퍼티,메서드를 호출할 수 있도록 함