[JS] 프로토타입, 체인

프로토타입

학습 목표

• 프로토타입이 무엇인지 설명할 수 있다.
• 프로토타입과 클래스의 관계에 대해 설명할 수 있다.
• 프로토타입 체인에 대해 설명할 수 있다.

 

프로토타입

.prototype

.__proto__

클래스, 인스턴스, 프로토타입의 관계

 

프로토타입

JavaScript는 프로토타입 기반 언어이다.

• 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 **프로토타입(prototype)**이라고 한다.
• 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그상위 프로토 타입도 마찬가지로 상속을 계속 받는다.이렇게 프로토타입이 상속되는 가상의 연결 고리를 **프로토타입 체인(prototype chain)**이라고 한다
• 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype을 프로토타입으로 가진다.그러므로 Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입이다.

.prototype

Object.prototype.constructor : 개체의 프로토타입을 만드는 함수를 지정

.__ proto __

접근하고자 하는 객체의 내부 속성인 [ [ Prototype ] ](객체 또는 null)를 노출하는 접근자 속성(getter 및 setter 함수)이다.

__ proto __ 속성은 getter 및 setter 함수로 구성된 Object.prototype (en-US)의 간단한 접근자 속성이다.

---

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human;
Human.prototype === kimcoding.__proto__;
Human.prototype.sleep === kimcoding.sleep;

[코드] OOP 패턴으로 구현한 Human 예시

 

 

Human이라는 클래스 → 프로토타입 → 인스턴스 의 관계

 

Array(배열) 클래스 → 프로토타입 → 인스턴스 의 관계

우리가 흔히 쓰는 배열 역시 원리가 동일합니다.

배열(arr)은 Array 클래스의 인스턴스이며, 프로토타입에는 다양한 메서드가 존재합니다.

 

quiz

Array는? 클래스 입니다.

Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드가 있습니다.

 

---

프로토타입 체인

• 프로토타입이 상위 프로토타입까지 연결되는 구조를 말한다.
• 즉, 하위 프로토타입은 상위 프로토타입의 속성과 메소드를 공유 받는다.
• 모든 객체(String, Array 등등)는 위에서 설명한 프로토타입 기반 방식으로 정의, 생성된다.
• 모든 객체들은 Object 함수의 프로토타입인 Object.prototype을 시작으로 연결된다.

자바스크립트에서는 extends와 super키워드를 이용해서 상속을 구현할 수 있습니다.

→ https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#ecmascript_2015_클래스

참조

Object

실제 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스이다.

 

화살표 방향은 부모를 가리키고, EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재합니다.

• 인스턴스의 __proto__를 이용하면 이를 더 확실하게 확인할 수 있습니다.
• __proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.

__proto__를 이용하여 프로토타입 체인의 과정

const elemDiv = document.createElement('div');

div.__proto__ // HTMLDivElement
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // Object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // null

콘솔창에 나타난 세부 사항 >> 그냥 뭐가 있는지 보자?

let div = document.createElement('div');

undefined
div.__proto__ 
HTMLDivElement {Symbol(Symbol.toStringTag): 'HTMLDivElement', onmouseenter: undefined, onmouseleave: undefined, constructor: ƒ}

div.__proto__.__proto__
HTMLElement {…}accessKey: (...)attachInternals: ƒ attachInternals()attributeStyleMap: (...)autocapitalize: (...)autofocus: (...)blur: ƒ blur()click: ƒ click()contentEditable: (...)dataset: (...)dir: (...)draggable: (...)enterKeyHint: (...)focus: ƒ focus()hidden: (...)inert: (...)innerText: (...)inputMode: (...)isContentEditable: (...)lang: (...)nonce: (...)offsetHeight: (...)offsetLeft: (...)offsetParent: (...)offsetTop: (...)offsetWidth: (...)onabort: (...)onanimationend: (...)onanimationiteration: (...)onanimationstart: (...)onauxclick: (...)onbeforeinput: (...)onbeforematch: (...)onbeforexrselect: (...)onblur: (...)oncancel: (...)oncanplay: (...)oncanplaythrough: (...)onchange: (...)onclick: (...)onclose: (...)oncontextlost: (...)oncontextmenu: (...)oncontextrestored: (...)oncopy: (...)oncuechange: (...)oncut: (...)ondblclick: (...)ondrag: (...)ondragend: (...)ondragenter: (...)ondragleave: (...)ondragover: (...)ondragstart: (...)ondrop: (...)ondurationchange: (...)onemptied: (...)onended: (...)onerror: (...)onfocus: (...)onformdata: (...)ongotpointercapture: (...)oninput: (...)oninvalid: (...)onkeydown: (...)onkeypress: (...)onkeyup: (...)onload: (...)onloadeddata: (...)onloadedmetadata: (...)onloadstart: (...)onlostpointercapture: (...)onmousedown: (...)onmouseenter: undefinedonmouseleave: undefinedonmousemove: (...)onmouseout: (...)onmouseover: (...)onmouseup: (...)onmousewheel: (...)onpaste: (...)onpause: (...)onplay: (...)onplaying: (...)onpointercancel: (...)onpointerdown: (...)onpointerenter: (...)onpointerleave: (...)onpointermove: (...)onpointerout: (...)onpointerover: (...)onpointerrawupdate: (...)onpointerup: (...)onprogress: (...)onratechange: (...)onreset: (...)onresize: (...)onscroll: (...)onsecuritypolicyviolation: (...)onseeked: (...)onseeking: (...)onselect: (...)onselectionchange: (...)onselectstart: (...)onslotchange: (...)onstalled: (...)onsubmit: (...)onsuspend: (...)ontimeupdate: (...)ontoggle: (...)ontransitioncancel: (...)ontransitionend: (...)ontransitionrun: (...)ontransitionstart: (...)onvolumechange: (...)onwaiting: (...)onwebkitanimationend: (...)onwebkitanimationiteration: (...)onwebkitanimationstart: (...)onwebkittransitionend: (...)onwheel: (...)outerText: (...)spellcheck: (...)style: (...)tabIndex: (...)title: (...)translate: (...)virtualKeyboardPolicy: (...)constructor: ƒ HTMLElement()Symbol(Symbol.toStringTag): "HTMLElement"ariaAtomic: (...)ariaAutoComplete: (...)ariaBrailleLabel: (...)ariaBrailleRoleDescription: (...)ariaBusy: (...)ariaChecked: (...)ariaColCount: (...)ariaColIndex: (...)ariaColSpan: (...)ariaCurrent: (...)ariaDescription: (...)ariaDisabled: (...)ariaExpanded: (...)ariaHasPopup: (...)ariaHidden: (...)ariaInvalid: (...)ariaKeyShortcuts: (...)ariaLabel: (...)ariaLevel: (...)ariaLive: (...)ariaModal: (...)ariaMultiLine: (...)ariaMultiSelectable: (...)ariaOrientation: (...)ariaPlaceholder: (...)ariaPosInSet: (...)ariaPressed: (...)ariaReadOnly: (...)ariaRelevant: (...)ariaRequired: (...)ariaRoleDescription: (...)ariaRowCount: (...)ariaRowIndex: (...)ariaRowSpan: (...)ariaSelected: (...)ariaSetSize: (...)ariaSort: (...)ariaValueMax: (...)ariaValueMin: (...)ariaValueNow: (...)ariaValueText: (...)assignedSlot: (...)attributes: (...)baseURI: (...)childElementCount: (...)childNodes: (...)children: (...)classList: (...)className: (...)clientHeight: (...)clientLeft: (...)clientTop: (...)clientWidth: (...)elementTiming: (...)firstChild: (...)firstElementChild: (...)id: (...)innerHTML: (...)isConnected: (...)lastChild: (...)lastElementChild: (...)localName: (...)namespaceURI: (...)nextElementSibling: (...)nextSibling: (...)nodeName: (...)nodeType: (...)nodeValue: (...)onbeforecopy: (...)onbeforecut: (...)onbeforepaste: (...)onfullscreenchange: (...)onfullscreenerror: (...)onsearch: (...)onwebkitfullscreenchange: (...)onwebkitfullscreenerror: (...)outerHTML: (...)ownerDocument: (...)parentElement: (...)parentNode: (...)part: (...)prefix: (...)previousElementSibling: (...)previousSibling: (...)role: (...)scrollHeight: (...)scrollLeft: (...)scrollTop: (...)scrollWidth: (...)shadowRoot: (...)slot: (...)tagName: (...)textContent: (...)get accessKey: ƒ accessKey()set accessKey: ƒ accessKey()get attributeStyleMap: ƒ attributeStyleMap()get autocapitalize: ƒ autocapitalize()set autocapitalize: ƒ autocapitalize()get autofocus: ƒ autofocus()set autofocus: ƒ autofocus()get contentEditable: ƒ contentEditable()set contentEditable: ƒ contentEditable()get dataset: ƒ dataset()get dir: ƒ dir()set dir: ƒ dir()get draggable: ƒ draggable()set draggable: ƒ draggable()get enterKeyHint: ƒ enterKeyHint()set enterKeyHint: ƒ enterKeyHint()get hidden: ƒ hidden()set hidden: ƒ hidden()get inert: ƒ inert()set inert: ƒ inert()get innerText: ƒ innerText()set innerText: ƒ innerText()get inputMode: ƒ inputMode()set inputMode: ƒ inputMode()get isContentEditable: ƒ isContentEditable()get lang: ƒ lang()set lang: ƒ lang()get nonce: ƒ nonce()set nonce: ƒ nonce()get offsetHeight: ƒ offsetHeight()get offsetLeft: ƒ offsetLeft()get offsetParent: ƒ offsetParent()get offsetTop: ƒ offsetTop()get offsetWidth: ƒ offsetWidth()get onabort: ƒ onabort()set onabort: ƒ onabort()get onanimationend: ƒ onanimationend()set onanimationend: ƒ onanimationend()get onanimationiteration: ƒ onanimationiteration()set onanimationiteration: ƒ onanimationiteration()get onanimationstart: ƒ onanimationstart()set onanimationstart: ƒ onanimationstart()get onauxclick: ƒ onauxclick()set onauxclick: ƒ onauxclick()get onbeforeinput: ƒ onbeforeinput()set onbeforeinput: ƒ onbeforeinput()get onbeforematch: ƒ onbeforematch()set onbeforematch: ƒ onbeforematch()get onbeforexrselect: ƒ onbeforexrselect()set onbeforexrselect: ƒ onbeforexrselect()get onblur: ƒ onblur()set onblur: ƒ onblur()get oncancel: ƒ oncancel()set oncancel: ƒ oncancel()get oncanplay: ƒ oncanplay()set oncanplay: ƒ oncanplay()get oncanplaythrough: ƒ oncanplaythrough()set oncanplaythrough: ƒ oncanplaythrough()get onchange: ƒ onchange()set onchange: ƒ onchange()get onclick: ƒ onclick()set onclick: ƒ onclick()get onclose: ƒ onclose()set onclose: ƒ onclose()get oncontextlost: ƒ oncontextlost()set oncontextlost: ƒ oncontextlost()get oncontextmenu: ƒ oncontextmenu()set oncontextmenu: ƒ oncontextmenu()get oncontextrestored: ƒ oncontextrestored()set oncontextrestored: ƒ oncontextrestored()get oncopy: ƒ oncopy()set oncopy: ƒ oncopy()get oncuechange: ƒ oncuechange()set oncuechange: ƒ oncuechange()get oncut: ƒ oncut()set oncut: ƒ oncut()get ondblclick: ƒ ondblclick()set ondblclick: ƒ ondblclick()get ondrag: ƒ ondrag()set ondrag: ƒ ondrag()get ondragend: ƒ ondragend()set ondragend: ƒ ondragend()get ondragenter: ƒ ondragenter()set ondragenter: ƒ ondragenter()get ondragleave: ƒ ondragleave()set ondragleave: ƒ ondragleave()get ondragover: ƒ ondragover()set ondragover: ƒ ondragover()get ondragstart: ƒ ondragstart()set ondragstart: ƒ ondragstart()get ondrop: ƒ ondrop()set ondrop: ƒ ondrop()get ondurationchange: ƒ ondurationchange()set ondurationchange: ƒ ondurationchange()get onemptied: ƒ onemptied()set onemptied: ƒ onemptied()get onended: ƒ onended()set onended: ƒ onended()get onerror: ƒ onerror()set onerror: ƒ onerror()get onfocus: ƒ onfocus()set onfocus: ƒ onfocus()get onformdata: ƒ onformdata()set onformdata: ƒ onformdata()get ongotpointercapture: ƒ ongotpointercapture()set ongotpointercapture: ƒ ongotpointercapture()get oninput: ƒ oninput()set oninput: ƒ oninput()get oninvalid: ƒ oninvalid()set oninvalid: ƒ oninvalid()get onkeydown: ƒ onkeydown()set onkeydown: ƒ onkeydown()get onkeypress: ƒ onkeypress()set onkeypress: ƒ onkeypress()get onkeyup: ƒ onkeyup()set onkeyup: ƒ onkeyup()get onload: ƒ onload()set onload: ƒ onload()get onloadeddata: ƒ onloadeddata()set onloadeddata: ƒ onloadeddata()get onloadedmetadata: ƒ onloadedmetadata()set onloadedmetadata: ƒ onloadedmetadata()get onloadstart: ƒ onloadstart()set onloadstart: ƒ onloadstart()get onlostpointercapture: ƒ onlostpointercapture()set onlostpointercapture: ƒ onlostpointercapture()get onmousedown: ƒ onmousedown()set onmousedown: ƒ onmousedown()get onmousemove: ƒ onmousemove()set onmousemove: ƒ onmousemove()get onmouseout: ƒ onmouseout()set onmouseout: ƒ onmouseout()get onmouseover: ƒ onmouseover()set onmouseover: ƒ onmouseover()get onmouseup: ƒ onmouseup()set onmouseup: ƒ onmouseup()get onmousewheel: ƒ onmousewheel()set onmousewheel: ƒ onmousewheel()get onpaste: ƒ onpaste()set onpaste: ƒ onpaste()get onpause: ƒ onpause()set onpause: ƒ onpause()get onplay: ƒ onplay()set onplay: ƒ onplay()get onplaying: ƒ onplaying()set onplaying: ƒ onplaying()get onpointercancel: ƒ onpointercancel()set onpointercancel: ƒ onpointercancel()get onpointerdown: ƒ onpointerdown()set onpointerdown: ƒ onpointerdown()get onpointerenter: ƒ onpointerenter()set onpointerenter: ƒ onpointerenter()get onpointerleave: ƒ onpointerleave()set onpointerleave: ƒ onpointerleave()get onpointermove: ƒ onpointermove()set onpointermove: ƒ onpointermove()get onpointerout: ƒ onpointerout()set onpointerout: ƒ onpointerout()get onpointerover: ƒ onpointerover()set onpointerover: ƒ onpointerover()get onpointerrawupdate: ƒ onpointerrawupdate()set onpointerrawupdate: ƒ onpointerrawupdate()get onpointerup: ƒ onpointerup()set onpointerup: ƒ onpointerup()get onprogress: ƒ onprogress()set onprogress: ƒ onprogress()get onratechange: ƒ onratechange()set onratechange: ƒ onratechange()get onreset: ƒ onreset()set onreset: ƒ onreset()get onresize: ƒ onresize()set onresize: ƒ onresize()get onscroll: ƒ onscroll()set onscroll: ƒ onscroll()get onsecuritypolicyviolation: ƒ onsecuritypolicyviolation()set onsecuritypolicyviolation: ƒ onsecuritypolicyviolation()get onseeked: ƒ onseeked()set onseeked: ƒ onseeked()get onseeking: ƒ onseeking()set onseeking: ƒ onseeking()get onselect: ƒ onselect()set onselect: ƒ onselect()get onselectionchange: ƒ onselectionchange()set onselectionchange: ƒ onselectionchange()get onselectstart: ƒ onselectstart()set onselectstart: ƒ onselectstart()get onslotchange: ƒ onslotchange()set onslotchange: ƒ onslotchange()get onstalled: ƒ onstalled()set onstalled: ƒ onstalled()get onsubmit: ƒ onsubmit()set onsubmit: ƒ onsubmit()get onsuspend: ƒ onsuspend()set onsuspend: ƒ onsuspend()get ontimeupdate: ƒ ontimeupdate()set ontimeupdate: ƒ ontimeupdate()get ontoggle: ƒ ontoggle()set ontoggle: ƒ ontoggle()get ontransitioncancel: ƒ ontransitioncancel()set ontransitioncancel: ƒ ontransitioncancel()get ontransitionend: ƒ ontransitionend()set ontransitionend: ƒ ontransitionend()get ontransitionrun: ƒ ontransitionrun()set ontransitionrun: ƒ ontransitionrun()get ontransitionstart: ƒ ontransitionstart()set ontransitionstart: ƒ ontransitionstart()get onvolumechange: ƒ onvolumechange()set onvolumechange: ƒ onvolumechange()get onwaiting: ƒ onwaiting()set onwaiting: ƒ onwaiting()get onwebkitanimationend: ƒ onwebkitanimationend()set onwebkitanimationend: ƒ onwebkitanimationend()get onwebkitanimationiteration: ƒ onwebkitanimationiteration()set onwebkitanimationiteration: ƒ onwebkitanimationiteration()get onwebkitanimationstart: ƒ onwebkitanimationstart()set onwebkitanimationstart: ƒ onwebkitanimationstart()get onwebkittransitionend: ƒ onwebkittransitionend()set onwebkittransitionend: ƒ onwebkittransitionend()get onwheel: ƒ onwheel()set onwheel: ƒ onwheel()get outerText: ƒ outerText()set outerText: ƒ outerText()get spellcheck: ƒ spellcheck()set spellcheck: ƒ spellcheck()get style: ƒ style()set style: ƒ style()get tabIndex: ƒ tabIndex()set tabIndex: ƒ tabIndex()get title: ƒ title()set title: ƒ title()get translate: ƒ translate()set translate: ƒ translate()get virtualKeyboardPolicy: ƒ virtualKeyboardPolicy()set virtualKeyboardPolicy: ƒ virtualKeyboardPolicy()[[Prototype]]: Element

div.__proto__.__proto__.__proto__
Element {…}after: ƒ after()animate: ƒ animate()append: ƒ append()ariaAtomic: (...)ariaAutoComplete: (...)ariaBrailleLabel: (...)ariaBrailleRoleDescription: (...)ariaBusy: (...)ariaChecked: (...)ariaColCount: (...)ariaColIndex: (...)ariaColSpan: (...)ariaCurrent: (...)ariaDescription: (...)ariaDisabled: (...)ariaExpanded: (...)ariaHasPopup: (...)ariaHidden: (...)ariaInvalid: (...)ariaKeyShortcuts: (...)ariaLabel: (...)ariaLevel: (...)ariaLive: (...)ariaModal: (...)ariaMultiLine: (...)ariaMultiSelectable: (...)ariaOrientation: (...)ariaPlaceholder: (...)ariaPosInSet: (...)ariaPressed: (...)ariaReadOnly: (...)ariaRelevant: (...)ariaRequired: (...)ariaRoleDescription: (...)ariaRowCount: (...)ariaRowIndex: (...)ariaRowSpan: (...)ariaSelected: (...)ariaSetSize: (...)ariaSort: (...)ariaValueMax: (...)ariaValueMin: (...)ariaValueNow: (...)ariaValueText: (...)assignedSlot: (...)attachShadow: ƒ attachShadow()attributes: (...)before: ƒ before()checkVisibility: ƒ checkVisibility()childElementCount: (...)children: (...)classList: (...)className: (...)clientHeight: (...)clientLeft: (...)clientTop: (...)clientWidth: (...)closest: ƒ closest()computedStyleMap: ƒ computedStyleMap()elementTiming: (...)firstElementChild: (...)getAnimations: ƒ getAnimations()getAttribute: ƒ getAttribute()getAttributeNS: ƒ getAttributeNS()getAttributeNames: ƒ getAttributeNames()getAttributeNode: ƒ getAttributeNode()getAttributeNodeNS: ƒ getAttributeNodeNS()getBoundingClientRect: ƒ getBoundingClientRect()getClientRects: ƒ getClientRects()getElementsByClassName: ƒ getElementsByClassName()getElementsByTagName: ƒ getElementsByTagName()getElementsByTagNameNS: ƒ getElementsByTagNameNS()getInnerHTML: ƒ getInnerHTML()hasAttribute: ƒ hasAttribute()hasAttributeNS: ƒ hasAttributeNS()hasAttributes: ƒ hasAttributes()hasPointerCapture: ƒ hasPointerCapture()id: (...)innerHTML: (...)insertAdjacentElement: ƒ insertAdjacentElement()insertAdjacentHTML: ƒ insertAdjacentHTML()insertAdjacentText: ƒ insertAdjacentText()lastElementChild: (...)localName: (...)matches: ƒ matches()namespaceURI: (...)nextElementSibling: (...)onbeforecopy: (...)onbeforecut: (...)onbeforepaste: (...)onfullscreenchange: (...)onfullscreenerror: (...)onsearch: (...)onwebkitfullscreenchange: (...)onwebkitfullscreenerror: (...)outerHTML: (...)part: (...)prefix: (...)prepend: ƒ prepend()previousElementSibling: (...)querySelector: ƒ querySelector()querySelectorAll: ƒ querySelectorAll()releasePointerCapture: ƒ releasePointerCapture()remove: ƒ remove()removeAttribute: ƒ removeAttribute()removeAttributeNS: ƒ removeAttributeNS()removeAttributeNode: ƒ removeAttributeNode()replaceChildren: ƒ replaceChildren()replaceWith: ƒ replaceWith()requestFullscreen: ƒ requestFullscreen()requestPointerLock: ƒ requestPointerLock()role: (...)scroll: ƒ scroll()scrollBy: ƒ scrollBy()scrollHeight: (...)scrollIntoView: ƒ scrollIntoView()scrollIntoViewIfNeeded: ƒ scrollIntoViewIfNeeded()scrollLeft: (...)scrollTo: ƒ scrollTo()scrollTop: (...)scrollWidth: (...)setAttribute: ƒ setAttribute()setAttributeNS: ƒ setAttributeNS()setAttributeNode: ƒ setAttributeNode()setAttributeNodeNS: ƒ setAttributeNodeNS()setHTML: ƒ setHTML()setPointerCapture: ƒ setPointerCapture()shadowRoot: (...)slot: (...)tagName: (...)toggleAttribute: ƒ toggleAttribute()webkitMatchesSelector: ƒ webkitMatchesSelector()webkitRequestFullScreen: ƒ webkitRequestFullScreen()webkitRequestFullscreen: ƒ webkitRequestFullscreen()constructor: ƒ Element()Symbol(Symbol.toStringTag): "Element"Symbol(Symbol.unscopables): {slot: true, popUp: true, prepend: true, append: true, replaceChildren: true, …}baseURI: (...)childNodes: (...)firstChild: (...)isConnected: (...)lastChild: (...)nextSibling: (...)nodeName: (...)nodeType: (...)nodeValue: (...)ownerDocument: (...)parentElement: (...)parentNode: (...)previousSibling: (...)textContent: (...)get ariaAtomic: ƒ ariaAtomic()set ariaAtomic: ƒ ariaAtomic()get ariaAutoComplete: ƒ ariaAutoComplete()set ariaAutoComplete: ƒ ariaAutoComplete()get ariaBrailleLabel: ƒ ariaBrailleLabel()set ariaBrailleLabel: ƒ ariaBrailleLabel()get ariaBrailleRoleDescription: ƒ ariaBrailleRoleDescription()set ariaBrailleRoleDescription: ƒ ariaBrailleRoleDescription()get ariaBusy: ƒ ariaBusy()set ariaBusy: ƒ ariaBusy()get ariaChecked: ƒ ariaChecked()set ariaChecked: ƒ ariaChecked()get ariaColCount: ƒ ariaColCount()set ariaColCount: ƒ ariaColCount()get ariaColIndex: ƒ ariaColIndex()set ariaColIndex: ƒ ariaColIndex()get ariaColSpan: ƒ ariaColSpan()set ariaColSpan: ƒ ariaColSpan()get ariaCurrent: ƒ ariaCurrent()set ariaCurrent: ƒ ariaCurrent()get ariaDescription: ƒ ariaDescription()set ariaDescription: ƒ ariaDescription()get ariaDisabled: ƒ ariaDisabled()set ariaDisabled: ƒ ariaDisabled()get ariaExpanded: ƒ ariaExpanded()set ariaExpanded: ƒ ariaExpanded()get ariaHasPopup: ƒ ariaHasPopup()set ariaHasPopup: ƒ ariaHasPopup()get ariaHidden: ƒ ariaHidden()set ariaHidden: ƒ ariaHidden()get ariaInvalid: ƒ ariaInvalid()set ariaInvalid: ƒ ariaInvalid()get ariaKeyShortcuts: ƒ ariaKeyShortcuts()set ariaKeyShortcuts: ƒ ariaKeyShortcuts()get ariaLabel: ƒ ariaLabel()set ariaLabel: ƒ ariaLabel()get ariaLevel: ƒ ariaLevel()set ariaLevel: ƒ ariaLevel()get ariaLive: ƒ ariaLive()set ariaLive: ƒ ariaLive()get ariaModal: ƒ ariaModal()set ariaModal: ƒ ariaModal()get ariaMultiLine: ƒ ariaMultiLine()set ariaMultiLine: ƒ ariaMultiLine()get ariaMultiSelectable: ƒ ariaMultiSelectable()set ariaMultiSelectable: ƒ ariaMultiSelectable()get ariaOrientation: ƒ ariaOrientation()set ariaOrientation: ƒ ariaOrientation()get ariaPlaceholder: ƒ ariaPlaceholder()set ariaPlaceholder: ƒ ariaPlaceholder()get ariaPosInSet: ƒ ariaPosInSet()set ariaPosInSet: ƒ ariaPosInSet()get ariaPressed: ƒ ariaPressed()set ariaPressed: ƒ ariaPressed()get ariaReadOnly: ƒ ariaReadOnly()set ariaReadOnly: ƒ ariaReadOnly()get ariaRelevant: ƒ ariaRelevant()set ariaRelevant: ƒ ariaRelevant()get ariaRequired: ƒ ariaRequired()set ariaRequired: ƒ ariaRequired()get ariaRoleDescription: ƒ ariaRoleDescription()set ariaRoleDescription: ƒ ariaRoleDescription()get ariaRowCount: ƒ ariaRowCount()set ariaRowCount: ƒ ariaRowCount()get ariaRowIndex: ƒ ariaRowIndex()set ariaRowIndex: ƒ ariaRowIndex()get ariaRowSpan: ƒ ariaRowSpan()set ariaRowSpan: ƒ ariaRowSpan()get ariaSelected: ƒ ariaSelected()set ariaSelected: ƒ ariaSelected()get ariaSetSize: ƒ ariaSetSize()set ariaSetSize: ƒ ariaSetSize()get ariaSort: ƒ ariaSort()set ariaSort: ƒ ariaSort()get ariaValueMax: ƒ ariaValueMax()set ariaValueMax: ƒ ariaValueMax()get ariaValueMin: ƒ ariaValueMin()set ariaValueMin: ƒ ariaValueMin()get ariaValueNow: ƒ ariaValueNow()set ariaValueNow: ƒ ariaValueNow()get ariaValueText: ƒ ariaValueText()set ariaValueText: ƒ ariaValueText()get assignedSlot: ƒ assignedSlot()get attributes: ƒ attributes()get childElementCount: ƒ childElementCount()get children: ƒ children()get classList: ƒ classList()set classList: ƒ classList()get className: ƒ className()set className: ƒ className()get clientHeight: ƒ clientHeight()get clientLeft: ƒ clientLeft()get clientTop: ƒ clientTop()get clientWidth: ƒ clientWidth()get elementTiming: ƒ elementTiming()set elementTiming: ƒ elementTiming()get firstElementChild: ƒ firstElementChild()get id: ƒ id()set id: ƒ id()get innerHTML: ƒ innerHTML()set innerHTML: ƒ innerHTML()get lastElementChild: ƒ lastElementChild()get localName: ƒ localName()get namespaceURI: ƒ namespaceURI()get nextElementSibling: ƒ nextElementSibling()get onbeforecopy: ƒ onbeforecopy()set onbeforecopy: ƒ onbeforecopy()get onbeforecut: ƒ onbeforecut()set onbeforecut: ƒ onbeforecut()get onbeforepaste: ƒ onbeforepaste()set onbeforepaste: ƒ onbeforepaste()get onfullscreenchange: ƒ onfullscreenchange()set onfullscreenchange: ƒ onfullscreenchange()get onfullscreenerror: ƒ onfullscreenerror()set onfullscreenerror: ƒ onfullscreenerror()get onsearch: ƒ onsearch()set onsearch: ƒ onsearch()get onwebkitfullscreenchange: ƒ onwebkitfullscreenchange()set onwebkitfullscreenchange: ƒ onwebkitfullscreenchange()get onwebkitfullscreenerror: ƒ onwebkitfullscreenerror()set onwebkitfullscreenerror: ƒ onwebkitfullscreenerror()get outerHTML: ƒ outerHTML()set outerHTML: ƒ outerHTML()get part: ƒ part()set part: ƒ part()get prefix: ƒ prefix()get previousElementSibling: ƒ previousElementSibling()get role: ƒ role()set role: ƒ role()get scrollHeight: ƒ scrollHeight()get scrollLeft: ƒ scrollLeft()set scrollLeft: ƒ scrollLeft()get scrollTop: ƒ scrollTop()set scrollTop: ƒ scrollTop()get scrollWidth: ƒ scrollWidth()get shadowRoot: ƒ shadowRoot()get slot: ƒ slot()set slot: ƒ slot()get tagName: ƒ tagName()[[Prototype]]: Node

div.__proto__.__proto__.__proto__.__proto__
Node {…}

div.__proto__.__proto__.__proto__.__proto__.__proto__
EventTarget {Symbol(Symbol.toStringTag): 'EventTarget', addEventListener: ƒ, dispatchEvent: ƒ, removeEventListener: ƒ, constructor: ƒ}addEventListener: ƒ addEventListener()dispatchEvent: ƒ dispatchEvent()removeEventListener: ƒ removeEventListener()constructor: ƒ EventTarget()Symbol(Symbol.toStringTag): "EventTarget"[[Prototype]]: Object

div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
null