Function and Object should know

javascript has five kinds of objects built base (Fundamental Objects) , , Object, Function, Error, Symbol, Booleanand Object/ Functionis particularly special is the basis for the definition of other built-in objects or objects and ordinary methods.

Detailed understanding Objectand Functionobjects contribute to a better understanding of some of the works of javascript.

And other reference types like Object/ Functionare both objects have their own methods and properties, but also function as a constructor. This article focuses on the following questions:

• Fucntion.prototypeAnd ordinary objects prototypeWhat is the difference?
• Object.prototype.__proto__ = ？
• Object.__proto__ = ?
• Object, FunctionWhat is special about the prototype object?

Function

Function properties

In standard ES6, Function object has two attributes:

• length value is 1, this property is characteristic { [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: true }, that is, not covered, can not be for...intraversed, but can Object.definePropertymodify its properties above

• prototype prototype object ( see ES latest standard instructions Function.prototpye ) it with the general function of prototypethat difference

  • ❗️ it can not write, can not be configured, can not traverse. That is, it always points to a fixed object and other prototype object of all the functions , all the function itself __proto__point to it.

  const o = {number: 20}
  Function.prototype = o // 依然是原来的值，未改变
  
  
  typeof Array.__proto__ // 'function' [=== Function.prototype]
  typeof Object.__proto__ // 'function' [=== Function.prototype]
  
  typeof Array.prototype.__proto__ // 'object' [=== Object.prototype]
  
  function F () {}
  F.__proto__ === Function.prototype // true
  
  F.prototype = o     // prototype指向o
  

  • ❗️ it is a function. Function generally prototypeis having a constructorgeneral object properties, but Functionis prototypea function object ( built-in function object), is jsonly a default prototypeas a function of object

  typeof Function.prototype // 'function'
  
  function F () {}
  typeof F.prototype  // ☘ 'object'
  typeof Object.prototype // 'object'
  

This is a requirement of the ES standard Functiontwo properties of the object, but in fact in FireFox Chrome at the time of implementation, there is one nameattribute, its value is 'Function'. There is also a property, that is,__proto__

Compared to Object, Functionthe object comes attributes is relatively small

★ Function.prototype

In ES specification, the relevant portion Function.prototype definition Functionof the prototypemethod are

Function.prototype.apply
Function.prototype.bind
Function.prototype.call
Function.prototype.contructor
Function.prototype.toString
Function.prototype[@@hasInstance](V)

Functions and objects have __proto__attributes, point constructor prototypeObject attribute points, i.e., its prototype object.

And the function of the __proto__attribute (❗️ prototype object which is not prototypeon the __proto__attribute) point Function.prototype, so that Function.prototypethe properties and methods that will be the object function ( function Object ) inherited.

Through the above description, I believe that to understand why these less interesting equation holds

Function.__proto__ === Function.prototype // true ❗️
Object.__proto__ === Function.prototype // true
Object.prototype.__proto__ === null // true
Function.prototype.__proto__ === Object.prototype // true
Object.prototype === Object.__proto__ // false

At the same time, because the function object itself has prototypeproperties that Objectinstance, it also inherited the Object.prototypeproperty .

Object

★ Object Properties function object

ObjectAs a function, and normal function, have length, prototype, __proto__, nameproperty, in addition, there are still many inherited私有方法

// 方法
Object.assign()
Object.create()
Object.defineProperties()
Object.defineProperty()
Object.entries()
Object.freeze()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.getPrototypeOf()
Object.is()
Object.isExtensible()
Object.isFrozen()
Object.isSealed()
Object.keys()
Object.preventExtensions()
Object.seal
Object.setPrototypeOf()
Object.values()

ObjectMethod function object is not the point here, it is no longer expand.

★ Object.prototype

And Function.prototypeother reference types ( Array.prototype, ) String.prototypeis the same as not write , can not be configured , not for ... in traverse , but still can be extended to the past, Object.prototypenew properties and methods

Object.isExtensible(Object.prototype) // true

• ❗️ Object.prototypeAn important feature is that it is the end of all the object prototype chain as a Object.prototype.__proto__value null, i.e.,

Object.prototype.__proto__ === null

Examples of an object, along its prototype chain, through __proto__layers up to find a single property, if Object.prototypenot found on, it will return undefined, so the prototype chain is not unlimited looking down.

function F () {}
F.prototype.age = 20
let f = new F()
f.__proto__ === F.prototype // true
f.__proto__.__proto__ === Object.prototype //true
f.__proto__.proto__.__proto__ === null // true

/**
 * 查找过程 
 * f.color -> 没找到，继续
 * f.__proto__.color(F.prototype) -> 没找到，继续
 * f.__proto__.__proto__.color(F.prototype.__proto__，Object.prototype) 没找到，返回undefined
 * 如果继续 f.__proto__.__proto__.__proto__ (Object.prototype.__proto__) === null 结果跟上面一样
*/
console.log(f.color) // undefined

Object.prototypeThe properties and methods, will be inherited by all of the methods and objects js, ES specification attributes

Object.prototype.constructor
Object.prototype.hasOwnProperty()
Object.prototype.isPrototypeOf()
Object.prototype.propertyIsEnumerable()
Object.prototype.toLocaleString()
Object.prototype.toString()
Object.prototype.valueOf()
Object.prototype.__proto__

The figure is Function, Objectand Function.prototype, Object.prototyerelated to each other in FIG.

Relationship Object, Function of

ObjectAnd Functionmost people between blurred, is their relationship

Object instanceof Object // true
Object instanceof Function // true
Function instanceof Function // true
Function instanceof Object // true

const o = {}
o instanceof Object //true
o instanceof Function // false

function F () {}
F instanceof Object //true
F instanceof Function //true

To be continued ~ ~ ~