Viewing: developer.mozilla.org

JavaScript JavaScript

ECMAScript someObject.[[Prototype]] someObject Object.getPrototypeOf() Object.setPrototypeOf() [[Prototype]] JavaScript __proto__ JavaScript obj.__proto__ obj.[[Prototype]] Object.getPrototypeOf(obj)

func.prototype [[Prototype]] prototype

[[Prototype]] __proto__ { __proto__: ... } obj.__proto__

{ a: 1, b: 2, __proto__: c } c null [[Prototype]] a b [[Prototype]]

const o = {
  a: 1,
  b: 2,
  // __proto__  [[Prototype]]
  __proto__: {
    b: 3,
    c: 4,
  },
};

// o.[[Prototype]]  b  c
// o.[[Prototype]].[[Prototype]]  Object.prototype
// o.[[Prototype]].[[Prototype]].[[Prototype]]  null
// 
// null  [[Prototype]]
// 
// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> Object.prototype ---> null

console.log(o.a); // 1
// o a 1

console.log(o.b); // 2
// o b 2
// b
// Property Shadowing

console.log(o.c); // 4
// o c
// o.[[Prototype]] c 4

console.log(o.d); // undefined
// o d
// o.[[Prototype]] d
// o.[[Prototype]].[[Prototype]]  Object.prototype 
// d
// o.[[Prototype]].[[Prototype]].[[Prototype]]  null
//  undefined

getter setter

const o = {
  a: 1,
  b: 2,
  // __proto__  [[Prototype]]
  __proto__: {
    b: 3,
    c: 4,
    __proto__: {
      d: 5,
    },
  },
};

// { a: 1, b: 2 } ---> { b: 3, c: 4 } ---> { d: 5 } ---> Object.prototype ---> null

console.log(o.d); // 5

JavaScript JavaScript

this

const parent = {
  value: 2,
  method() {
    return this.value + 1;
  },
};

console.log(parent.method()); // 3
//  parent.method this parent

// child  parent 
const child = {
  __proto__: parent,
};
console.log(child.method()); // 3
//  child.method this child
//  child  parent 
//  child value
//  child value
//  [[Prototype]]  parent.value

child.value = 4; //  child value 4
//  parent value
// child 
// { value: 4, __proto__: { value: 2, method: [Function] } }
console.log(child.method()); // 5
//  child valuethis.value child.value

getValue

const boxes = [
  { value: 1, getValue() { return this.value; } },
  { value: 2, getValue() { return this.value; } },
  { value: 3, getValue() { return this.value; } },
];

getValue [[Prototype]]

const boxPrototype = {
  getValue() {
    return this.value;
  },
};

const boxes = [
  { value: 1, __proto__: boxPrototype },
  { value: 2, __proto__: boxPrototype },
  { value: 3, __proto__: boxPrototype },
];

getValue __proto__ [[Prototype]] new

// 
function Box(value) {
  this.value = value;
}

//  Box() 
Box.prototype.getValue = function () {
  return this.value;
};

const boxes = [new Box(1), new Box(2), new Box(3)];

new Box(1) Box Box.prototype boxPrototype prototype [[Prototype]]Object.getPrototypeOf(new Box()) === Box.prototypeConstructor.prototype constructorBox.prototype.constructor === Box

new [[Prototype]]

class Box {
  constructor(value) {
    this.value = value;
  }

  //  Box.prototype 
  getValue() {
    return this.value;
  }
}

Box.prototype

Box.prototype [[Prototype]] Box.prototype

function Box(value) {
  this.value = value;
}
Box.prototype.getValue = function () {
  return this.value;
};
const box = new Box(1);

//  Box.prototype
Box.prototype.getValue = function () {
  return this.value + 1;
};
box.getValue(); // 2

Constructor.prototypeConstructor.prototype = ...

[[Prototype]] [[Prototype]] [[Prototype]] [[Prototype]]
constructor instance.constructor constructor

Constructor.prototype Constructor.[[Prototype]] Function.prototypeObject.getPrototypeOf(Constructor) === Function.prototype

JavaScript [[Prototype]]

//  `__proto__`  `Object.prototype`  `[[Prototype]]`
const object = { a: 1 };
Object.getPrototypeOf(object) === Object.prototype; // true

//  `Array.prototype`  `[[Prototype]]`
const array = [1, 2, 3];
Object.getPrototypeOf(array) === Array.prototype; // true

//  `RegExp.prototype`  `[[Prototype]]`
const regexp = /abc/;
Object.getPrototypeOf(regexp) === RegExp.prototype; // true

de-sugar

const array = new Array(1, 2, 3);
const regexp = new RegExp("abc");

map() Array.prototype

misfeature Object.prototype Array.prototype.myMethod = function () {...} myMethod

monkey patching SmooshGate JavaScript web

JavaScript Array.prototype.forEach

prototype Number.prototype 0Array.prototype RegExp.prototype /(?:)/

Number.prototype + 1; // 1
Array.prototype.map((x) => x + 1); // []
String.prototype + "a"; // "a"
RegExp.prototype.source; // "(?:)"
Function.prototype(); // Function.prototype

Map

Map.prototype.get(1);
// Uncaught TypeError: get method called on incompatible Map.prototype

Constructor.prototype [[Prototype]] Constructor.prototype [[Prototype]]Constructor.prototype Object.getPrototypeOf(Constructor.prototype) === Object.prototype Object.prototype [[Prototype]] null Object.getPrototypeOf(Object.prototype) === null

function Constructor() {}

const obj = new Constructor();
// obj ---> Constructor.prototype ---> Object.prototype ---> null

Object.setPrototypeOf() Constructor.prototype [[Prototype]]

function Base() {}
function Derived() {}
//  `Derived.prototype`  `[[Prototype]]`
//  `Base.prototype`
Object.setPrototypeOf(Derived.prototype, Base.prototype);

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

extends

class Base {}
class Derived extends Base {}

const obj = new Derived();
// obj ---> Derived.prototype ---> Base.prototype ---> Object.prototype ---> null

Object.create() prototype constructor

function Base() {}
function Derived() {}
//  `Derived.prototype` 
//  `Base.prototype`  `[[Prototype]]`
//  Object.setPrototypeOf 
Derived.prototype = Object.create(Base.prototype);

JavaScript prototype JavaScript console JavaScript web Firefox Chrome Edge

function doSomething() {}
console.log(doSomething.prototype);
// 
// JavaScript 
// 
// 
const doSomethingFromArrowFunction = () => {};
console.log(doSomethingFromArrowFunction.prototype);

doSomething() prototype

{
  constructor:  doSomething(),
  [[Prototype]]: {
    constructor:  Object(),
    hasOwnProperty:  hasOwnProperty(),
    isPrototypeOf:  isPrototypeOf(),
    propertyIsEnumerable:  propertyIsEnumerable(),
    toLocaleString:  toLocaleString(),
    toString:  toString(),
    valueOf:  valueOf()
  }
}

Chrome [[Prototype]] Firefox <prototype> [[Prototype]]

doSomething()

function doSomething() {}
doSomething.prototype.foo = "bar";
console.log(doSomething.prototype);

{
  foo: "bar",
  constructor:  doSomething(),
  [[Prototype]]: {
    constructor:  Object(),
    hasOwnProperty:  hasOwnProperty(),
    isPrototypeOf:  isPrototypeOf(),
    propertyIsEnumerable:  propertyIsEnumerable(),
    toLocaleString:  toLocaleString(),
    toString:  toString(),
    valueOf:  valueOf()
  }
}

new doSomething() new new new

function doSomething() {}
doSomething.prototype.foo = "bar"; // 
const doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value"; // 
console.log(doSomeInstancing);

{
  prop: "some value",
  [[Prototype]]: {
    foo: "bar",
    constructor:  doSomething(),
    [[Prototype]]: {
      constructor:  Object(),
      hasOwnProperty:  hasOwnProperty(),
      isPrototypeOf:  isPrototypeOf(),
      propertyIsEnumerable:  propertyIsEnumerable(),
      toLocaleString:  toLocaleString(),
      toString:  toString(),
      valueOf:  valueOf()
    }
  }
}

doSomeInstancing [[Prototype]] doSomething.prototype doSomeInstancing doSomeInstancing

doSomeInstancing doSomeInstancing.[[Prototype]] doSomething.prototype doSomeInstancing.[[Prototype]] doSomeInstancing.[[Prototype]]

doSomeInstancing.[[Prototype]] doSomeInstancing.[[Prototype]].[[Prototype]] prototype [[Prototype]] Object.prototype doSomeInstancing.[[Prototype]].[[Prototype]] doSomething.prototype.[[Prototype]] Object.prototype

doSomeInstancing.[[Prototype]].[[Prototype]] doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]] doSomeInstancing.[[Prototype]].[[Prototype]].[[Prototype]] Object.prototype.[[Prototype]] null [[Prototype]] undefined

function doSomething() {}
doSomething.prototype.foo = "bar";
const doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";
console.log("doSomeInstancing.prop:     ", doSomeInstancing.prop);
console.log("doSomeInstancing.foo:      ", doSomeInstancing.foo);
console.log("doSomething.prop:          ", doSomething.prop);
console.log("doSomething.foo:           ", doSomething.foo);
console.log("doSomething.prototype.prop:", doSomething.prototype.prop);
console.log("doSomething.prototype.foo: ", doSomething.prototype.foo);

doSomeInstancing.prop:      some value
doSomeInstancing.foo:       bar
doSomething.prop:           undefined
doSomething.foo:            undefined
doSomething.prototype.prop: undefined
doSomething.prototype.foo:  bar

const o = { a: 1 };
//  o  Object.prototype  [[Prototype]]
// Object.prototype  null  [[Prototype]]
// o ---> Object.prototype ---> null

const b = ["yo", "whadup", "?"];
//  Array.prototype indexOfforEach 
// 
// b ---> Array.prototype ---> Object.prototype ---> null

function f() {
  return 2;
}
//  Function.prototype callbind 
// f ---> Function.prototype ---> Object.prototype ---> null

const p = { b: 2, __proto__: o };
//  __proto__  Object.prototype.__proto__ 
// [[Prototype]] 
// p ---> o ---> Object.prototype ---> null

__proto__ __proto__ Object.prototype.__proto__ setter __proto__ Object.create Object.create

function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype.addVertex = function (v) {
  this.vertices.push(v);
};

const g = new Graph();
// g verticesedges
//  new Graph() g.[[Prototype]]  Graph.prototype

JavaScript JIT

Object.create()

Object.create() [[Prototype]]

const a = { a: 1 };
// a ---> Object.prototype ---> null

const b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1

const c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

const d = Object.create(null);
// d ---> nulld  null 
console.log(d.hasOwnProperty);
// undefined d  Object.prototype

__proto__ Object.create() Object.create(null) null Object.create()

class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}

const filledRectangle = new FilledRectangle(5, 10, "blue");
// filledRectangle ---> FilledRectangle.prototype ---> Rectangle.prototype ---> Object.prototype ---> null

Object.setPrototypeOf()

Object.setPrototypeOf() [[Prototype]] Object.create(null) null

const obj = { a: 1 };
const anotherObj = { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null

proto

Object.prototype.__proto__ setter [[Prototype]] __proto__

Object.prototype.__proto__ Object.setPrototypeOf

const obj = {};
// 
obj.__proto__ = { barProp: "bar val" };
obj.__proto__.__proto__ = { fooProp: "foo val" };
console.log(obj.fooProp);
console.log(obj.barProp);

Object.setPrototypeOf __proto__ Object.setPrototypeOf

hasOwnProperty Object.hasOwn [[Prototype]] null Object.prototype hasOwnProperty

function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype.addVertex = function (v) {
  this.vertices.push(v);
};

const g = new Graph();
// g ---> Graph.prototype ---> Object.prototype ---> null

g.hasOwnProperty("vertices"); // true
Object.hasOwn(g, "vertices"); // true

g.hasOwnProperty("nope"); // false
Object.hasOwn(g, "nope"); // false

g.hasOwnProperty("addVertex"); // false
Object.hasOwn(g, "addVertex"); // false

Object.getPrototypeOf(g).hasOwnProperty("addVertex"); // true

undefined undefined

Java C++ JavaScript Function

JavaScript prototype new [[Prototype]] const a1 = new A() JavaScript this A() a1.[[Prototype]] = A.prototypeJavaScript [[Prototype]] [[Prototype]] a1.doSomethingObject.getPrototypeOf(a1).doSomethingObject.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething Object.getPrototypeOf null prototype prototype

const a1 = new A(); const a2 = new A(); a1.doSomething Object.getPrototypeOf(a1).doSomething A.prototype.doSomething Object.getPrototypeOf(a1).doSomething === Object.getPrototypeOf(a2).doSomething === A.prototype.doSomething

JavaScript

MDN

2025716 MDN

GitHub