illustrating javascript prototype & prototype chain

本文轉載自查看原文 2020-07-19 18:10 246 prototype chain/ __proto__/ 原型/ 原型鏈/ js/ prototype

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

©xgqfrms 2012-2020
www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 全面了解 Javascript Prototype Chain 原型鏈 JavaScript prototype prototype javascript中的prototype和constructor JavaScript prototype 使用介紹 javascript--prototype javascript原型對象prototype javascript 中 this 與 prototype 的3個區別 Javascript中的Prototype到底是啥 Javascript中prototype屬性詳解

illustrating javascript prototype & prototype chain

illustrating javascript prototype & prototype chain

proto & prototype

Function

Object

refs

©xgqfrms 2012-2020 www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

免責聲明！

©xgqfrms 2012-2020
www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！