Edit role permission Edit permission Query route assignment

this.$router.push({name:'monitoringDetail'.query: {id: id}});
this.$router.push({ name: 'home'.params: { userId: wise }})
this.$router.replace('position');
this.$router.go(-1);
const {href} = this.$router.resolve({ name: 'srvbotReqDetail', query})
window.open(href, '_blank');
Copy the code

Execution context

Variable/function promotion validation scope/chain validation this refers to constructor prototype/chain data type (stack, heap)

Scope and scope chain (closure)

Global scope functions scope block-level scope

Variable promotion/function promotion (promote function declaration first and then promote variable declaration)

(ERROR ‘fun’ has already been declared)

letFun = 'fun'function fun () {}
Copy the code

This points to the

Function Test() {return this} Test() this points to the window object. New Test() this points to the instance object

  • Module.exports function test() {this === global} global name = ‘node.js’ to global this.name = ‘node.js’ to module.exports function test() {this === global} to global
  • Browser global

    Name = ‘win’ points to window

    Object key value traversal output 
    let obj = {
    name: "zhu".age: 24[Symbol("bar")]: "symbol-bar"
}
Copy the code
  1. Symbol attribute
  2. Object.defineproperty (obj, “age”, {Enumerable: false}) cannot be enumerable
  3. Obj. Proto = {fa: “father”} attribute on the stereotype
for (let key in obj) {}
for (let key of obj) {}
Object.keys(obj) name
Object.getOwnPropertyNames(obj) name age
Object.getOwnPropertySymbols(obj) Symbol("bar")
Reflect.ownKeys(obj) name age Symbol("bar")
Copy the code

Memory leak -> Memory overflow

  1. Unexpected global variables
  2. Forgotten timer or callback function
  3. Out-of-dom references
  4. closure

The difference between arrow functions and normal functions:

  1. Function test () {} arrow () =>{}
  2. Arrow functions cannot be used for constructors 
    function Person(name,age){
    this.name=name;
    this.age=age;
}
let admin=new Person("Enno Strings.".18);
console.log(admin.name);
console.log(admin.age);
Copy the code
  3. This points differently
    1. The arrow function’s this always points to its context’s this, Call (obj,a,b) fn, fn.bind(obj,[a,b]), fn.apply(obj,a,b) document.onclick = fn.call(obj); Document.onclick = fn.bind(obj); Preprocessing this points to, and click executes fn
    2. The this of an ordinary function refers to the object on which it was called

Prototype and Prototype Chain (Class)

JavaScript prototype inheritance implementation

  • Define a new constructor and internally call the constructor you want to “inherit” with call() and bind this;
  • Inherits the prototype chain with an intermediate function F, preferably with the encapsulated inherits function.
  • Continue to define new methods on the prototype of the new constructor.
function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
Copy the code

es6 class extends

Super refers to the parent class

Class Rabbit extends Animal {
    hide() {
        alert(`The ${this.name}hides! `);
    }
    stop() {
        super.stop();// Call the stop function of the parent class
        this.hide();// Then hide}}Copy the code

What are the data types of JS and where are they stored

  1. Basic data type, stored on the stack
    1. Boolean(B)
    2. String(S)
    3. underfined(N)
    4. Null(N)
    5. Number(N)
    6. Symbol (ES6)
  2. Refers to a data type (complex type) that exists in the heap and holds a pointer to the address in the heap

Shallow copy (data type reasons)

let obj = {a: 1, b: 2};

Light:

  1. Object.assign()

    Object.assign({}, obj);
  2. Destruct assignment {… obj};

Deep:

  1. JSON. Parse and JSON. Stringfy 
    function deepClone(obj){
    let _obj = JSON.stringify(obj),// Convert the JSON object to a string
    objClone = JSON.parse(_obj);// Convert the JSON string to an object
    return objClone
}
export default deepClone
Copy the code
  2. Deeper level

    CloneDeep (obj) lodash library 
    let obj = {
    a: 'a'.b: ‘b’,
    c: { cc: 'cc'}} newObj = obj; The assignmentnewNewObj = {... obj }; Shallow copynewChange, a and B remain the same, cc change _obj =JSON.stringify(obj); newObj = JSON.parse(_obj); newGetting old is constantCopy the code

What does the new operator do

  1. Create an empty Object var obj = new Object();
  2. Set the prototype chain (when a constructor is called to create a new instance, the instance will contain a pointer (internal property) to the constructor’s prototype object) obj.proto= func.prototype;
  3. Var result = func.call (obj); let this in Func refer to obj and execute the function body of Func (after creating a new object, assign the scope of the constructor to the new object (so this refers to the new object).
  4. Determine the return type of Func: if it is a value type, return obj. If (typeof(result) == “object”){func=result; }else{ func=obj;; }

Native new

function Foo(name) {
    console.log(this)
    this.name = name;
    console.log(this)
    return this;
};
function _new(Func, ... args) {
    let obj = {};
    obj.__proto__ = Func.prototype;
    letresult = Func.call(obj, ... args);return result || obj;
}
Copy the code

The original call

Function.prototype._call = function(arg, ... args) {
    arg.fn = this;
    letres = arg.fn(... args);delete arg.fn;
    return res;
};
Copy the code

Instanceof principle

function instance_of(L, R) { // stu; R is the Person
    var O = R.prototype; / / O for the Person. The prototype
    L = L.__proto__; // L is stu._proto_, which now points to the per instance object
    while (true) { // Execute the loop
        if (L === null) return false; / / not through
        if (O === L) return true;
        L = L.__proto__; // set L = stu._proto_._proto_, and execute the loop
    } // stu._proto_._proto_.
} // Refers to person.prototype, so return true
Copy the code

Encryption problem

  1. HASH HASH
    • MD5
    • SHAencryption
    • HMACencryption
  2. Symmetric encryption
    • Data Encryption Standard (DES) : Data Encryption Standard (rarely used nowadays because its Encryption strength is not strong enough for brute force cracking)
    • 3DES: Encrypts the same data three times with three keys to enhance the encryption strength. (Disadvantages: Three keys need to be maintained, greatly increasing the maintenance cost)
    • Advanced Encryption Standard (AES) : Currently used by the NSA and used by Apple for keychain access. It is now recognized as the most secure encryption method and the most popular algorithm in symmetric key encryption.
  3. Asymmetric encryption
    • RSAEncryption (jsencrypt.js package)
    • sm2(Company Account Link Service)
  4. https (http+ssl)

    Asymmetric encryption + symmetric encryption

Buried point of front-end monitoring (event tracking)

  1. Destination data Monitoring (listening to user behavior)

    Performance Monitoring

    Exception monitoring (sentry.js, better.js, Logan)

    sentry: Work with SourceMaps in WebPack build to locate exceptions)
  2. Buried point visualization buried point (Baidu statistics, Umeng) no trace buried point (full buried point)
  3. Buried point attributes, events, cycles, data encryption, visual presentation