JS: Property Key "prototype"

By Xah Lee. Date: . Last updated: .

In JavaScript, all constructor function has a magical property key "prototype".

( except arrow function [see JS: Arrow Function] )

// every function has a property key "prototype" except arrow functions

// standard function objects
console.log (
 Function.hasOwnProperty ( "prototype" ) &&
 Array.hasOwnProperty ( "prototype" ) &&
 Object.hasOwnProperty ( "prototype" ) &&
 Date.hasOwnProperty ( "prototype" )
);

// user-defined function
console.log( (function () {}).hasOwnProperty("prototype") );

console.log( ! ((x) => (x+1)).hasOwnProperty("prototype") );

// all true

[see JS: Property Overview]

Here's code to print all global function objects and report if they have key “prototype”.

// if in nodejs, replace all “window” by “global”
// if in browser, replace all “global” by “window”

const yes = [];
const no = [];

( Reflect.ownKeys ( global ) ).forEach (
    (x) => {
        if ( typeof global[x] === "function" ) {
            if ( global[x].hasOwnProperty ( "prototype" ) ) {
                yes.push(x);
            } else { no.push(x); }
        }
    }
)

console.log ( "Has key prototype", yes );
// Has key prototype
// [ 'Object',
//   'Function',
//   'Array',
//   'Number',
//   'Boolean',
//   'String',
//   'Symbol',
//   'Date',
//   'Promise',
//   'RegExp',
//   'Error',
//   'EvalError',
//   'RangeError',
//   'ReferenceError',
//   'SyntaxError',
//   'TypeError',
//   'URIError',
//   'ArrayBuffer',
//   'Uint8Array',
//   'Int8Array',
//   'Uint16Array',
//   'Int16Array',
//   'Uint32Array',
//   'Int32Array',
//   'Float32Array',
//   'Float64Array',
//   'Uint8ClampedArray',
//   'BigUint64Array',
//   'BigInt64Array',
//   'DataView',
//   'Map',
//   'Set',
//   'WeakMap',
//   'WeakSet',
//   'SharedArrayBuffer',
//   'BigInt',
//   'DTRACE_NET_SERVER_CONNECTION',
//   'DTRACE_NET_STREAM_END',
//   'DTRACE_HTTP_SERVER_REQUEST',
//   'DTRACE_HTTP_SERVER_RESPONSE',
//   'DTRACE_HTTP_CLIENT_REQUEST',
//   'DTRACE_HTTP_CLIENT_RESPONSE',
//   'Buffer',
//   'clearImmediate',
//   'clearInterval',
//   'clearTimeout',
//   'setImmediate',
//   'setInterval',
//   'setTimeout',
//   'URL',
//   'URLSearchParams' ]

console.log ( "No key prototype", no );
// No key prototype 
// [ 'parseFloat',
//   'parseInt',
//   'Proxy',
//   'decodeURI',
//   'decodeURIComponent',
//   'encodeURI',
//   'encodeURIComponent',
//   'escape',
//   'unescape',
//   'eval',
//   'isFinite',
//   'isNaN' ]

console.log ( process.version )
// nodejs v10.5.0

The value of a property key "prototype" of a object X is NOT the prototype (aka parent) of object X. (it's possible to make it so, but that basically never happens.)

[see JS: Prototype and Inheritance]

Where Does Key "prototype" Came From?

Every function has a property key "prototype", by spec.

Purpose

The property key "prototype" is a mechanism for object created using new F() to link to a parent.

You can set a function F's prototype property F.prototype = obj before calling new F(), so that the newly created object's parent will be obj.

[see JS: Operator “new”]

// ff.prototype is parent of 「new ff()」, at time of call of 「new ff()」

function ff () {};

const x = new ff();

console.log(
    Object.getPrototypeOf(x) === ff.prototype
); // true

// note: provided ff does not return a object in definition

[see JS: Create Object with Parent X]

Default Value

For user-defined function f, the value of f.prototype by default is a newly created object {"constructor":f} (that is, a newly created object, with only one property key, this property key is named "constructor", and value of property key "constructor" is the function itself. The parent of this newly created object, is Object.prototype). ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-makeconstructor

// every function has a property key "prototype"
function FF() {};
 console.log ( FF.hasOwnProperty("prototype")
); // true

// its value is a object, with just 1 property
console.log (
 Object.getOwnPropertyNames(FF.prototype).length === 1
); // true

// the property key is "constructor"
console.log (
 FF.prototype.hasOwnProperty ( "constructor" )
); // true

// the value of the property key "constructor" is the function
console.log ( FF.prototype.constructor === FF ); // true

// show its attributes
console.log (
 Object.getOwnPropertyDescriptor( FF.prototype, "constructor" )
);
// { value: [Function: FF],
//   writable: true,
//   enumerable: false,
//   configurable: true }

// show its parent
console.log ( Reflect.getPrototypeOf ( FF.prototype ) === Object.prototype ); // true

[see JS: Property Key “constructor”]

Builtin Function's Value of Property Key "prototype"

For any JavaScript's buildin constructor B, the value of B.prototype is a object, and the only way to express that object is just via the “prototype” property access, that is B.prototype.

For example:

And, just like user-defined function, the following is true:

For any JavaScript's buildin constructor B, the parent of new B(…) is always B.prototype. Because the value B.prototype can never change.

console.log (
 Object.getPrototypeOf ( new Object() ) === Object.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Function() ) === Function.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Array() ) === Array.prototype
); // true

console.log (
 Object.getPrototypeOf ( new Date() ) === Date.prototype
); // true

console.log (
 Object.getPrototypeOf ( new RegExp() ) === RegExp.prototype
); // true

Standard Constructor's Prototype Property Cannot be Changed

Standard constructor's prototype property cannot be changed, because its writable attribute is false.

// Standard constructor's prototype property cannot be changed, because its writable attribute is false
console.log(
    Object.getOwnPropertyDescriptor(Array, "prototype")
 );

// prints
// { value: [],
//   writable: false,
//   enumerable: false,
//   configurable: false }

[see JS: Property Attributes, writable, enumerable, configurable]

Changing it results in error.

// builtin constructor's prototype property cannot be changed
"use strict";

Array.prototype = {};

// Array.prototype = {};
//                 ^

// TypeError: Cannot assign to read only property 'prototype' of function Array() { [native code] }

JS Constructor/Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

JavaScript in Depth

Basics

  1. JavaScript Basics
  2. true, false
  3. Operators
  4. Branch Control
  5. Loop
  6. Array Basics
  7. Object Basics
  8. RegExp Basics

Variable

  1. Value Types
  2. let
  3. const
  4. var
  5. var Order
  6. var Scope
  7. Global Variable
  8. Destructuring Assignment

String

  1. String Overview
  2. Template String
  3. Char, Code Unit, Codepoint
  4. String Escape Sequence
  5. Unicode Escape Sequence

Function

  1. Define Function
  2. Arrow Function ⭐
  3. Function Params
  4. “arguments” Object
  5. Rest Params ⭐
  6. Arg Default Value ⭐
  7. Arg Destructure ⭐
  8. f Declaration vs Expression
  9. Closure
  10. f call apply bind
  11. Functional Programing

Object Property

  1. Property Overview
  2. Property Key
  3. Dot vs Bracket Notation
  4. Create/Delete Property
  5. Get/Set Property
  6. Check Property Existence
  7. Access Property
  8. List Properties
  9. Property Attributes
  10. Getter/Setter
  11. Property Descriptor
  12. Symbol

Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype

Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”

Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

Misc

  1. Set Object
  2. Map Object
  3. Try Catch Throw Finally
  4. Import/Export
  5. Promise
  6. Proxy
  7. ES2015 Features
  8. How to Convert ES5 to ES2015
  9. Style Guide
  10. Semicolon Rules
  11. Exclamation Before Function
  12. How to Determine Strict Mode?
  13. x.y.z Associativity
  14. Function Chain
  15. Random Number, Range, Integer, Element
  16. Timing JS Code
  17. Range Function for Array
  18. Random Array Element, Randomize Array
  19. Tagged Template String
  20. String to Number
  21. Format Number

Object Reference

  1. the Global Object
  2. Object 🙼 Object.prototype
  3. Array 🙼 Array.prototype
  4. Function 🙼 Function.prototype
  5. String 🙼 String.prototype
  6. RegExp 🙼 RegExp.prototype 🙼 RegExp Syntax
  7. Date 🙼 Date.prototype
  8. Set ⭐🙼 Set.prototype
  9. Map ⭐🙼 Map.prototype
  10. JSON
  11. Math
  12. Reflect
  13. Symbol ⭐🙼 Symbol.prototype
  14. Number 🙼 Number.prototype
  15. Boolean 🙼 Boolean.prototype

DOM How-To

  1. Basic DOM Methods
  2. Get Elements by ID, Tag, Name, Class, CSS Selector
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Element's Attribute Value
  8. Set Element's Attribute Value
  9. Remove Element's Attribute Value
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree

DOM Overview

  1. Browser Window Object, Document Object Model
  2. Intro to Event-Based Programing
  3. JavaScript Load Order
  4. What is Live Object
  5. NodeList vs HTMLCollection
  6. DOM: Whitespace Nodes

Basic DOM Methods

  1. Basic DOM Methods
  2. Node Type, Name, Value
  3. Navigate DOM Tree

HTML Form

  1. HTML Form
  2. Visit URL in a New Window
  3. Instant Field Validation
  4. Input Field Validation
  5. HTML: Input Range Slider

DOM How To

  1. Encode URL, Escape String
  2. Browser Info, Navigator Object
  3. Get URL (window.location)
  4. Web Cookies
  5. Web Storage
  6. Find Window Width
  7. Find Element Width
  8. WebSocket

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll

DOM Misc

  1. Value of “this” in Event Handler
  2. Event Delegation
  3. Get Current Script Tag
  4. insertAfter Element
  5. Randomize List
  6. create Document Fragment
  7. innerHTML, nodeValue, textContent, innerText?

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js