xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

illustrating javascript prototype & prototype chain

图解 js 原型和原型链

proto & prototype

func;
// ƒ func (name) {
//   this.name = name || `default name`;
// }

// 构造函数具有一个 prototype 属性, 
func.prototype;
// {constructor: ƒ}

// 构造函数的 prototype 属性指向该构造函数的原型对象,

// 该构造函数的原型对象有一个 constructor 属性指向该构造函数本身,
func.prototype.constructor;
// ƒ func (name) {
//   this.name = name || `default name`;
// }

func.prototype.constructor === func;
// true


// var funcInstance = new func();
funcInstance = new func();
// func {name: "default name"}

// 构造函数生成的实例对象具有一个 __proto__ 属性,
funcInstance.__proto__;
// {constructor: ƒ}

// 生实例对象的  __proto__ 属性指向其构造函数的原型对象,
funcInstance.__proto__ == func.prototype;
// true

// 生实例对象的没有 prototype 属性,
funcInstance.prototype;
// undefined

Function

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-18
 * @modified
 *
 * @description
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

/************************************************/

Object;
// ƒ Object() { [native code] }

Object.prototype;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

Object.__proto__;
// ƒ () { [native code] }

Object.__proto__ === Object.prototype;
// false


/************************************************/

Function;
// ƒ Function() { [native code] }

Function.prototype;
// ƒ () { [native code] }

Function.__proto__;
// ƒ () { [native code] }

Function.__proto__ === Function.prototype;
// true


/************************************************/

Object.__proto__ === Function.__proto__;
// true

/************************************************/

function func (name) {
  this.name = name || `default name`;
}

func;
// ƒ func (name) {
//    this.name = name || `default name`;
// }

func.__proto__;
// ƒ () { [native code] }

func.__proto__.constructor;
// ƒ Function() { [native code] }

func.__proto__.constructor.prototype;
// ƒ () { [native code] }

func.__proto__.prototype;
// undefined

func.__proto__.__proto__;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

func.__proto__.__proto__.constructor;
// ƒ Object() { [native code] }

func.__proto__.__proto__.prototype;
// undefined

func.__proto__.__proto__.__proto__;
// null


/************************************************/

func.prototype;
// {constructor: ƒ}
// constructor: ƒ func(name)
// __proto__: Object

func.prototype.constructor;
// ƒ func (name) {
//    this.name = name || `default name`;
// }

func.prototype.constructor.prototype;
// {constructor: ƒ}
// constructor: ƒ func(name)
// __proto__: Object

func.prototype.prototype;
// undefined

func.prototype.__proto__;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

func.prototype.__proto__.constructor;
// ƒ Object() { [native code] }

func.prototype.__proto__.prototype;
// undefined
func.prototype.__proto__.__proto__;
// null


/************************************************/

// ❓compare

func.__proto__ === Function.prototype;
// true

func.__proto__ === Function.__proto__;
// true

func.__proto__ === Object.__proto__;
// true


func.prototype === Function.prototype;
// false

func.prototype === Object.prototype;
// false


func.prototype.constructor === func;
// true

Object

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-18
 * @modified
 *
 * @description
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

/************************************************/

Object;
// ƒ Object() { [native code] }

Object.prototype;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

Object.__proto__;
// ƒ () { [native code] }

Object.__proto__ === Object.prototype;
// false


/************************************************/

Function;
// ƒ Function() { [native code] }

Function.prototype;
// ƒ () { [native code] }

Function.__proto__;
// ƒ () { [native code] }

Function.__proto__ === Function.prototype;
// true


/************************************************/

Object.__proto__ === Function.__proto__;
// true

/************************************************/

var obj = {
  name: "xgqfrms",
};

obj;
// {name: "xgqfrms"}
// name: "xgqfrms"
// __proto__: Object

obj.__proto__;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

obj.__proto__.constructor;
// ƒ Object() { [native code] }

obj.__proto__.constructor.prototype;
// {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__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

obj.__proto__.prototype;
// undefined

obj.__proto__.__proto__;
// null

obj.__proto__.__proto__.constructor;
// Uncaught TypeError: Cannot read property 'constructor' of null

obj.__proto__.__proto__.prototype;
// Uncaught TypeError: Cannot read property 'prototype' of null

obj.__proto__.__proto__.__proto__;
// Uncaught TypeError: Cannot read property '__proto__' of null


/************************************************/

obj.prototype;
// undefined
​
obj.prototype.constructor;
// Uncaught TypeError: Cannot read property 'constructor' of undefined

obj.prototype.constructor.prototype;
// Uncaught TypeError: Cannot read property 'constructor' of undefined

obj.prototype.prototype;
// Uncaught TypeError: Cannot read property 'prototype' of undefined

obj.prototype.__proto__;
// Uncaught TypeError: Cannot read property '__proto__' of undefined

obj.prototype.__proto__.constructor;
// Uncaught TypeError: Cannot read property '__proto__' of undefined

obj.prototype.__proto__.prototype;
// Uncaught TypeError: Cannot read property '__proto__' of undefined

obj.prototype.__proto__.__proto__;
// Uncaught TypeError: Cannot read property '__proto__' of undefined


/************************************************/

// ❓compare

obj.__proto__ === Function.prototype;
// false

obj.__proto__ === Function.__proto__;
// false

obj.__proto__ === Object.__proto__;
// false


obj.prototype === Function.prototype;
// false

obj.prototype === Object.prototype;
// false

obj.prototype.constructor === obj;
// Uncaught TypeError: Cannot read property 'constructor' of undefined


obj.__proto__.constructor.prototype === Object.prototype;
//true

refs

Flag Counter

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xgqfrms/p/13340673.html