JavaScript는 객체 지향 언어이며 according to Wilkipedia:

Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

이제 간단한 객체를 구축하여 Javascript 객체와 해당 프로토타입에 대해 자세히 살펴보겠습니다.

익명 기능과 함께 "메시지"메서드가 추가되었습니다. 메소드의 "This"는 메소드 내부의 변수를 객체와 연결하는 데 사용됩니다.

const object = {
 user: "guest",
 where: "dev.to",
 message: function () {
   console.log(`${this.user}, welcome to ${this.where}`)
 }
}

console.log(object) // result from the console
// {user: 'guest', where: 'dev.to', message: ƒ}
// message: ƒ ()
// user: "guest"
// where: "dev.to"
// [[Prototype]]: Object

console.log(object.message()) // guest, welcome to dev.to

console.log(object.__proto__)// result from the console

//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, //hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
//constructor: ƒ Object()
//hasOwnProperty: ƒ hasOwnProperty()
//isPrototypeOf: ƒ isPrototypeOf()
//propertyIsEnumerable: ƒ propertyIsEnumerable()
//toLocaleString: ƒ toLocaleString()
//toString: ƒ toString()
//valueOf: ƒ valueOf()
//__defineGetter__: ƒ __defineGetter__()
//__defineSetter__: ƒ __defineSetter__()
//__lookupGetter__: ƒ __lookupGetter__()
//__lookupSetter__: ƒ __lookupSetter__()
//__proto__: (...)
//get __proto__: ƒ __proto__()
//set __proto__: ƒ __proto__()

객체의 프로토타입에는 하나 이상의 프로토타입의 속성이 있으며 이 프로토타입 내부에는 하나 이상의 프로토타입이 있을 수 있습니다.

객체의 프로토타입을 얻는 또 다른 방법은 다음과 같습니다.

Object.getPrototypeOf(object)

프로토타입의 메서드 중 하나를 추출해 봅시다.

console.log(object.hasOwnProperty()) // false 

효과가있다!

동일한 속성을 개체에 추가하고 console.log에 기록해 보겠습니다.

const object = {
 user: "guest",
 where: "dev.to",
 message: function () {
   console.log(`${this.user}, welcome to ${this.where}`)
 },
 hasOwnProperty : function () {
  console.log("the method was added to the object")
 }
}

console.log(object.hasOwnProperty()) // the method was added to the object

따라서 개체에서 검색 순서가 무엇인지 가정할 수 있습니다.

개체에서 첫 번째 검색

개체의 프로토타입에서 이후

프로토타입의 시제품에 이어…

프로토타입 설정 방법:

Object.create() 사용

const objectWithProto = Object.create(object)

console.log(objectWithProto)// {} - empty object
console.log(objectWithProto.message()) // guest, welcome to dev.to - message method of prototype

console.log(objectWithProto.__proto__)// results from the console
//{user: 'guest', where: 'dev.to', message: ƒ}
//message: ƒ ()
//user: "guest"
//where: "dev.to"
//[[Prototype]]: Object

생성자 포함

생성자 생성

function User (user, where) {
  this.user = user;
  this.where = where
}

프로토타입 제작 방법

const userPrototype = {
 message () {
    console.log(`${this.user}, welcome to ${this.where}`)  }
}

객체의 프로토타입에 메서드 추가

User.prototype = userPrototype;

사용자 생성자를 프로토타입에 추가(생성자에서 매개변수를 가져오고 프로토타입의 메시지 메서드에 전달할 수 있음)

User.prototype.constructor = User;

console.log(User) // ƒ User (user, where) {
  this.user = user;
  this.where = where
}

console.log(User.__proto__) // ƒ () { [native code] }

우리가 가진 것을 확인해 봅시다:

const myUser = new User('Julie Cherner', ‘dev.to - author’);

myUser.message() // Julie Cherner, welcome to dev.to - author

console.log(myUser) // User {user: 'Julie Cherner', where: 'dev.to - author'}

console.log(myUser.__proto__) // results from console
//{message: ƒ, constructor: ƒ}
//constructor: ƒ User(user, where)
//message: ƒ message()
//[[Prototype]]: Object

따라서 프로토타입은 Javascript에서 개체의 속성을 상속할 수 있는 좋은 기회를 제공합니다.