preface

  • In JavaScriptObjectIs the constructor (wrapper that creates the object)
  • Constructor, which uses Prototype to store properties and methods to be shared, or you can set Prototype to point to an existing object to inherit that object.
  • Object.getPrototypeOf(Object) 和 Object.prototypeNot the same
  • Object.getPrototypeOf()Method returns the prototype (inside) of the specified object[[Prototype]]Property value)
  • Object.getPrototypeOf(Object)Is equivalent toObject.__proto__([[prototype]] === __proto__)

content

Object, Function, and New Object()

test

console.log(Object)                                 ƒ Object() {[native code]}
console.log(Object.prototype)                       // {constructor: ƒ, __defineGetter__: ƒ,... }
console.log(Object.prototype.constructor === Object)// true
console.log(typeof Object.prototype)                // "object"
console.log(Object.getPrototypeOf(Object))          ƒ () {[native code]}
console.log(Object.__proto__)                       ƒ () {[native code]}
console.log(Object.getPrototypeOf(Object.prototype))// null

console.log(Function)                               ƒ Function() {[model]}
console.log(Function.prototype)                     ƒ () {[native code]}
console.log(Object.getPrototypeOf(Function))        ƒ () {[native code]}
console.log(typeof Function)                        // function
console.log(typeof Function.prototype)              // function
console.log(Object.getPrototypeOf(Function) = = =Function.prototype)             // true
console.log(Object.getPrototypeOf(Function) = = =Object.getPrototypeOf(Object))  // true
console.log(Function= =Object)                                                 // false

let obj = new Object(a);// let obj = {}
console.log(obj)                                     [[Prototype]]: Object
console.log(typeof obj)                              // "object"
console.log(obj.prototype)                           // undefined
console.log(Object.getPrototypeOf(obj))              // {constructor: ƒ, __defineGetter__: ƒ,... }
console.log(typeof(Object.getPrototypeOf(obj)))      // "object"

console.log(Object.getPrototypeOf(Function.prototype))    / / {constructor: ƒ,... }
Copy the code

parsing

  1. A separateObjectIs a constructor of type Object that has an associatedThe Object prototype ObjectYou can do this by callingObject.prototypeTo access the
  2. The Object prototype ObjectContains all shared methods and properties, and oneconstructorProperty equal to the Object constructor
  3. The Object prototype ObjectThe prototype object of[[prototype]](also known as__proto__, but not recommended) is the end of the prototype chain and has a value ofnull
  4. Object Is a prototype Object[[prototype]](also known as__proto__Is equal to the prototype object of the Function constructor[[prototype]]Also equal to the Function constructorprotytype
  5. A separateFunctionIs a constructor of type Function
  6. FunctiontheFunction.protytypeAnd prototype objects[[protytype]]It’s equal, and they’re both equalObjectThe prototype object of[[prototype]](also known as__proto__)

conclusion

Object.prototype.constructor === Object
Object.prototype.__proto__ === null
Object.__proto__ === Function.__proto__ == Function.prototype
Copy the code

Examples, prototypes, and constructors

test

function fn() {
    let x = 1;
    this.y = 2;
    console.log("In fn: ".this)
}
fn.prototype.z = 3;

console.log(fn)                                      // f fn() {let x = 1; this.y = 2; }
console.log(fn.prototype)                            // {z: 4, constructor: ƒ
console.log(Object.getPrototypeOf(fn))               ƒ () {[native code]}


let instance = new fn();
console.log(instance)                                // fn {y: 2} // fn {y: 2} [[Prototype]]: Object
console.log(instance.prototype)                      // undefined
console.log(Object.getPrototypeOf(instance))         [[Prototype]]: ƒ
Copy the code

parsing

In general, when we define a function fn, if we call the function directly with (), then the function is a normal function; If this function is called with the new operator and assigned to a variable, the function is the constructor of type FN, and the variable is the instance.

As a general function fn:

  1. Its first level of execution environment is the object that contains it, i.ethisIs the object that contains it, if the function is globalThe window object.
  2. It also has one associated with itFn. Prototype objectThrough thefn.prototypeAccess,
  3. Fn. Prototype objectYou can add custom methods and properties, it’s internal propertiesconstructorEquals the FN constructor.
  4. Fn. Prototype objectThe prototype object of[[prototype]]isObject
  5. Its prototype object[[prototype]]A prototype Object equal to Object[[prototype]]

As a constructor fn called with the new operator, for instance:

  1. The instanceinstanceThe first level of execution environment is the current constructor itself, which is internalthisPoints inside its own constructor
  2. It also has one associated with itFn. Prototype objectThrough thefn.prototypeAccess,
  3. Fn. Prototype objectYou can add custom methods and properties, it’s internal propertiesconstructorEquals the FN constructor.
  4. Fn. Prototype objectThe prototype object of[[prototype]]isObject
  5. Its prototype object[[prototype]]Is equal to theObjectThe prototype object of[[prototype]]
  6. instanceThe prototype object of the instance[[protytype]]Equals the fn. Prototype object
  7. instanceThe instanceprototype 是 undefined

When we use the new operator to create an instance of the Object constructor, the instance’s prototype Object [[prototype]] is equal to the Object.prototype Object. This instance does not have its own ProtyType attribute

summary

fn.prototype.constructor === fn
fn.prototype.__proto__ = Object.prototype
fn.__proto__ === Object.__proto__

instance.__proto__ === fn.prototype
instance.__proto__.constructor === fn
instance.__proto__.__proto__ === Object.prototype
instance.__proto__.__proto__.__proto__ === null
Copy the code