[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain [Back]  [Original]

- JavaScript | MDN

MDN Web Docs

View in English Always switch to English

JavaScript class class-based Java C++ ES2015 class JavaScript prototype-based

JavaScript prototypeprivate property null null prototype chain

JavaScript Object

JavaScript classic classic

In this article

JavaScript

ECMAScript someObject.[[Prototype]] someObject ECMAScript 2015 [[Prototype]] Object.getPrototypeOf() Object.setPrototypeOf() accessors __proto__

someObject.[[Prototype]] func.prototype [[Prototype]] instanceObject.prototype Object

js
//  a  b  f  o 
let f = function () {
  this.a = 1;
  this.b = 2;
};
let o = new f(); // {a: 1, b: 2}

//  f 
f.prototype.b = 3;
f.prototype.c = 4;

//  f.prototype = {b:3,c:4}; 
// o.[[Prototype]]  b  c {b: 3, c: 4}
// 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
// o b
// property shadowing

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

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

getter setter

Javascript Javascript property shadowing method overriding

this

js
var o = {
  a: 2,
  m: function () {
    return this.a + 1;
  },
};

console.log(o.m()); // 3
//  o.m this o

var p = Object.create(o);
// p  o 

p.a = 4; //  p a
console.log(p.m()); // 5
//  p.m this p
//  p  o  m 
// this.a p.a p a

js
var o = { a: 1 };

//  o  [[Prototype]]  Object.prototype
// o hasOwnProperty
//  hasOwnProperty  Object.prototype 
//  o  Object.prototype  hasOwnProperty
// Object.prototype  null
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

//  Array.prototype  indexOfforEach
// 
// a ---> Array.prototype ---> Object.prototype ---> null

function f() {
  return 2;
}

//  Function.prototype  callbind
// f ---> Function.prototype ---> Object.prototype ---> null

JavaScript new

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

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

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

Object.create

ECMAScript 5 Object.create()

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

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

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

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty);
// undefined, because d doesn't inherit from Object.prototype

class

ECMAScript 2015 JavaScript classconstructorstaticextendssuper

js
"use strict";

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);

Object.prototype hasOwnProperty

js
console.log(g.hasOwnProperty("vertices"));
// true

console.log(g.hasOwnProperty("nope"));
// false

console.log(g.hasOwnProperty("addVertex"));
// false

console.log(g.__proto__.hasOwnProperty("addVertex"));
// true

JavaScript hasOwnProperty

undefined undefined

Object.prototype

monkey patchingencapsulation Prototype.js

JavaScript Array.forEach

B A

js
function A(a) {
  this.varA = a;
}

//  A.prototype.varA  this.varA shadowed
//  varA 
A.prototype = {
  varA: null, //  varA 
  // 
  // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
  //  varA 
  doSomething: function () {
    // ...
  },
};

function B(a, b) {
  A.call(this, a);
  this.varB = b;
}
B.prototype = Object.create(A.prototype, {
  varB: {
    value: null,
    enumerable: true,
    configurable: true,
    writable: true,
  },
  doSomething: {
    value: function () {
      // override
      A.prototype.doSomething.apply(this, arguments); // call super
      // ...
    },
    enumerable: true,
    configurable: true,
    writable: true,
  },
});
B.prototype.constructor = B;

var b = new B();
b.doSomething();

  • .prototype
  • Object.create()

prototype Object.getPrototypeOf

JavaScript Java C++ all runtime classclass

function A prototype new [[Prototype]] var a1 = new A() JavaScript this A() a1.[[Prototype]] = A.prototypeJavaScript [[Prototype]] prototype

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

prototype Object.getPrototypeOf()

[[Prototype]] a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething Object.getPrototypeOf null

js
var o = new Foo();

JavaScript

js
var o = new Object();
o.[[Prototype]] = Foo.prototype;
Foo.call(o);

js
o.someProp;

o someProp Object.getPrototypeOf(o).someProp Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp

JavaScript


Web Proxy Viewer  |  New URL  |  Original Page