navigation

• 2021/07/21 update

• 2021/07/22 update

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise

[react] Hooks

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] data Reactive and initial render

Disadvantages of constructors

• An instance object is generated by a constructor. Properties and methods are generated on the instance. Properties and methods cannot be shared between multiple instances

The prototype property

• JavaScript’s inheritance mechanism is designed with the idea that all properties and methods of the prototype object can be shared by the instance object
• All functions have a Prototype property that points to an object
• For constructors: when the constructor generates an instance, the constructor’s prototype property becomes the prototype of the instance object

A prototype object

• Properties on the stereotype object are not properties of the instance object itself. When you modify the stereotype object, the changes are immediately reflected on all instance objects
• How can an instance object and a stereotype object have properties and methods of the same name, so that when the instance object reads that property, it reads its own properties, but not the properties on the stereotype
• What stereotype objects do: define properties and methods that are shared by all instances

Prototype chain

• Js specifies that all objects have prototype objects
• All objects can become prototypes of other objects, prototype objects are also objects and have their own prototypes, forming a chain
• The prototype property of the Object constructor is the prototype property of the Object constructor
• That is, all objects inherit properties and methods from the Object.prototype Object, which is why all objects have valueOf and toString
• Null has no properties or methods. Null has no prototype of its own. The prototype chain terminates
• Null is to prevent dead chains

Covering the overriding

• When reading properties of an object that has properties and methods of the same name on itself and on the stereotype, it reads its own properties first. This is called overwriting
• When reading the properties of an Object, the Object itself does not look at the prototype, and the prototype does not look at the prototype, until object.prototype, undefined
• Looking for a particular attribute across the prototype chain, level by level, has an impact on performance.
• Unifying: Meaning, overburden

Function A () {} / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the constructor defined A Amy polumbo rototype = new Array () / / -- -- -- -- -- -- -- -- -- -- pointed to Amy polumbo rototype instance Array, // constructor = A // -------- Const a = new a () a.ush (1) a instanceof Array // trueCopy the code

constructor

• A Prototype object has a constructor property that, by default, points to the constructor in which the prototype property resides
• Because the constructor property is on the Prototype object, the constructor property is inherited by all instances
• Function:
  • (1) Constructor allows you to determine which constructor generated an instance object
  • (2) Another effect of constructor: you can use an instance to create another instance
• Note: => constructor => constructor => constructor => constructor => constructor => constructor This constructor is not referred to as A. This constructor is referred to by the latest object assigned to the prototype object
• Modify the prototype object along with the constructor to prevent references from reporting errors ！！！！！！！
• The name attribute
  • Constructor. Name => name of the constructor

<script> function A(){} const a = new A() console.log(A.prototype.constructor === A) // true console.log(a.constructor === a.constructor) // true, constructor property is on the prototype object, so it can be inherited by the instance and access console.log(a.onstructor === = A) // true, The function of constructor is to determine from which constructor an instance is generated console.log(A.constructor === RegExp) // false Console. log(a.constructor ('constructor'), "a.constructor ('constructor')") // Constructor is not an instance property, Inherited console.log(new A.constructor (), 'constructor ' Const b = new a.structor () console.log(b instanceof A) // true </script>Copy the code

Const constructor (); const constructor (); const constructor (); <script> function A () {console.log('A constructor ')} console.log(a.rototype, 'modify previous A.prototype') console.log(a.prototype.constructor, 'modify before Amy polumbo rototype. Constructor). / / A console log (Amy polumbo rototype. Constructor. The name, 'modify before Amy polumbo rototype. Constructor. Name = > modify constrctor in front of the name') Amy polumbo rototype = {name: 'woow_wu7'} console.log(A.prototype.constructor, 'Amy polumbo rototype after modification. The constructor') / / Object console. The log (Amy polumbo rototype. Constructor. The name, 'modified Amy polumbo rototype. Constructor. Name = > modified constrctor name' Amy polumbo rototype) constructor = A Console. log(a.construct. constructor, 'constructor=A ') </script>Copy the code

instanceof

• Returns a Boolean value indicating whether the object is an instance of a constructor
• The left side of instanceof is the instance object and the right side is the constructor
• Instanceof checks whether the right constructor’s prototype is on the left constructor’s prototype chain
• Since instanceof checks the entire prototype chain, it is possible for the same instance object to return true for multiple constructors
• There is a special case where the instanceof judgment is distorted if there is only null on the stereotype chain for the left object
• One of the uses of instanceof is to determine the value type (but only for objects, not primitive types).
• For undefined and null, the instanceOf operator always returns false
• Instanceof is a clever way to solve the problem of forgetting to add the new command to the constructor

instanceof function A(){} const a = new A() console.log(a instanceof A, 'instanceof principle is to check on the right side of the prototype of the constructor object is on the left on the prototype chain of'). The console log (Amy polumbo rototype. IsPrototypeOf (a), Var d = new Date(); D instanceof Date // true d instanceof Object // true Var obj = object.create (null); var obj = object.create (null); Typeof obj // "object" object. create(null) instanceof object // falseCopy the code

Function A() {if(! (this instanceof A)) {// if this is not an instanceof A, } else {this.name = 'woow_wu7'}} const A = new A() console.log(A)Copy the code

Object.getPrototypeOf

• Returns the prototype object of the parameter object
• Object.getPrototypeOf is the standard method for getting a prototype Object
• Note: The argument is either an Object or a function, since functions are also objects. In ES6 you can determine the inheritance of the class, object.getPrototypeof (ColorPoint) === Point

// True, ColorPoint is a class, i.e. a function

Object.getPrototypeOf - Gets the prototype Object of the parameter Object, GetPrototypeOf (object.prototype) === null // True object.getPrototypeof (function.prototype) === = Object.prototype // true Object.getPrototypeOf({}) === Object.prototype // trueCopy the code

Object.setPrototypeOf

• Sets the prototype of the first parameter object to the second parameter objectObject.setprototypeof (existing Object, prototype Object)
• Return value: returns the first argument object
• Parameters: The first parameter is an existing object, and the second parameter is a prototype object

const a = {} const b = {name: 'woow_wu7'} const res = object.setprototypeof (a, b) // set b to the prototype of a, Note that the return value is a object.getPrototypeof (a) === b // true console.log(a.name) console.log(res) // a, the return value is aCopy the code

• The new command can be simulated with object.setprototypeof

var F = function () { this.foo = 'bar'; }; var f = new F(); Var f = object.setPrototypeof ({}, f.protototype); // the return value f is the first argument {} // object.setPrototypeof ({}, f.protototype) => equivalent to {}.__proto__ = f.protototype f.all (f);Copy the code

Object.create

• Generate instance objects
  • Generated by executing the constructor with the new command(The constructor is a normal function, except that when called with the new command, this refers to the instance, and the first letter is uppercase, or not, but the convention.)
  • Generated from an object,Sometimes you can only get one object, so you have to generate instance objects. Object.create, which fully inherits the properties and methods of the prototype Object
• Object.create() returns an instance Object prototyped from a parameter Object that fully inherits the properties and methods of the prototyped Object

Create object._create = function(obj) {function F(){} f.rototype = obj Return new F()} return new F()}Copy the code

• To generate an Object that does not inherit any properties or methods, use object.create (null)
• An error is reported if the argument to object.create () is null or not an Object

Object.prototype.isPrototypeOf

• The isPrototypeOf property of the instance object is used to determine whether the object is the prototype of the parameter object

Object.prototype.__proto__

• Prototype object of the instance object
• According to the language standard, only the browser needs to be deployed__proto__Not in other environments__proto__attribute
• Not recommended__proto__
• I’m going to use standardObject.getPrototypeOf Reads the prototype.Object.setprototypeof (existing Object, prototype Object) to set the prototype

Method comparison to get the prototype object

- ` obj. __proto__ ` / / only available in the browser, and is not recommended - obj. Constructor. The prototype / / manually modify the prototype, may distortion - Object. GetPrototypeOf () / / recommend obtaining methodCopy the code

When modifying the prototype object directly, Function A(){} const A = new A() function B() {} b.rototype = A const B = new B() B. constructor === a // constructor === a // constructor === a // constructor === a // B. constructor === a. prototype. constructor === a. protototype (important) // If: Function A(){} const A = new A() function B() {} b.prototype. constructor = B Const b = new b () b.constructor === a // trueCopy the code

Object.prototype.hasOwnProperty

• Returns a Boolean value indicating whether it is a property of the object itself, excluding properties on the stereotype chain

Date.hasOwnProperty('length') // true
Date.hasOwnProperty('toString') // false
Copy the code

The in operator.

• The in operator returns a Boolean value indicating whether the property exists in the object, regardless of whether it is its own property or an inherited property
• Note: The in operator does not distinguish between its own properties and inherited properties

Example: function X(){} x.rototype. name = 'woow_wu7'; Let x = new x () 'name' in x // true // Because the: in operator returns a Boolean value indicating whether the property exists in the object, regardless of itself or inheritance // so: 'name' in x => returns trueCopy the code

For in and for of

• For in can iterate over objects and arrays
• For of can only traverse groups

For in - for arrays, I for: key - for objects, I for: key - for objects, for... For of - is used for array: I = value const objP = {sex: 'man'} const obj = {name: 'woow_wu7', age: 20, address: 'hangzhou'}; Object.setprototypeof (obj, objP) for(let I in obj) {console.log(I, 'for in loop => for Object, // name,age,address,sex if (obj.hasownProperty (I)) {console.log(I, 'if you only want to iterate over its own properties, Can use the Object. The prototype. HanOwnProperty (property names) to filter the ') / / the name, age, address}}Copy the code

Easy to error point summary

• I’m Jane books: www.jianshu.com/p/1a2182e3a…

- constructor-constructor indicates the association between the constructor and the prototype object. If the prototype object is modified, the constructor needs to be modified together to prevent reference errors. Each constructor has a prototype property. The constructor of the prototype refers to the constructor of the prototype. Instanceof is to check whether (the right constructor's prototype property) is on the prototype chain (the left object) - in case of instanceof failure: - If an object's __proto__ attribute points to null, Instanceof is invalid - because the right is the constructor's prototype => end point is object.prototype, whether it is on the left Object's prototype chain - object.prototype. __prototo__ === null - Object.prototype instanceof Ojbect // false // object.create (null) instanceof Object // falseCopy the code

2021/07/24 update

• Null has no properties or methods
• How do I generate an object without any properties or methods
  • Object.create(null)
• How to simulate an object.create
• When modifying the prototype property, be sure to modify the constructor property as well to prevent reference errors that might point to constructor on the prototype of the assigned object’s constructor