| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain | [Back] [Original] |
Get to know MDN better
JavaScript class class-based Java C++ ES2015 class JavaScript prototype-based
JavaScript prototypeprivate property null null prototype chain
JavaScript Object
JavaScript classic classic
JavaScript
ECMAScript someObject.[[Prototype]] someObject ECMAScript 2015 [[Prototype]] Object.getPrototypeOf() Object.setPrototypeOf() accessors __proto__
someObject.[[Prototype]] func.prototype [[Prototype]] instanceObject.prototype Object
// 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
Javascript Javascript property shadowing method overriding
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
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
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.createECMAScript 5 Object.create()
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
classECMAScript 2015 JavaScript classconstructorstaticextendssuper
"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
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
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();
.prototypeObject.create() prototype Object.getPrototypeOfJavaScript 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
var o = new Foo();
JavaScript
var o = new Object();
o.[[Prototype]] = Foo.prototype;
Foo.call(o);
o.someProp;
o someProp Object.getPrototypeOf(o).someProp Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp
JavaScript
This page was last modified on 2025716 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |