In-depth analysis of the use of With

with is used to extend the scope chain of a statement, but it is generally not recommended to use the with statement because it may be the source of confusing errors and compatibility issues. There are functional points using the with statement in the Vue source code, so its functions will be introduced here to help read the framework source code.

Performance pros and cons

Pros

with statement can reduce the length of variables without causing performance loss. The additional computational effort is minimal. Using 'with' can reduce unnecessary pointer path resolution operations. But in most cases, even without using with, using temporary variables to save pointers or using call can achieve the same effect.

Disadvantages

with statement causes the program to first search in the specified object when looking for variable values. Therefore, those variables that are not attributes of this object will be very slow to find.

Example

let obj = {
    a: 1,
    b: 2,
    c: 3
}
with(obj){
    console.log(a)    //1
    console.log(b)    //2
    console.log(c)    //3
}

In this code, the obj object associated with with, in the with code block, each variable is first considered to be a local variable, if this local variable is related to the obj object If a property has the same name, this local variable will point to the obj object property.

function fn(obj){
    with(obj){
        a = 1;
    }
}
let obj1 = {
    a: 2
}
let obj2 = {
    b: 3
}

fn(obj1);
console.log(obj1.a)     //1

fn(obj2)
console.log(obj2.a)     //undefined
console.log(a)          //1，变量a被泄漏到全局作用域链上

In the above example, obj1 has an attribute a, but obj2 does not have an attribute a. fn(obj) receives an obj formal parameter, which is an object reference, and executes with(obj). Inside the with code block, a is actually a reference, and 1 is assigned to a.

When passing obj2 to with, the scope declared by with is obj2, and the query for a starts from this scope. The identifier a was not found in the scope of obj2, the scope of fn and the global scope, so in non-strict mode a global variable will be automatically created in the global scope, and strict In mode , a ReferenceError error will be thrown.

Performance reduction

If with is used in the code, the JS engine can only simply assume that the judgment about the identifier will be invalid during the compilation phasebecause the compilation The implementer also has no way of knowing who the scope object passed to with is. Therefore, the performance optimization performed by the JS engine during the compilation phase will be invalid. The worst case scenario is that if with appears, all optimizations will become meaningless. The simplest way is not to do any optimization, then it will run very slowly, which will be an unavoidable fact.

With

Vue in Vue will generate the corresponding render function from the template when compiling, and the with statement happens to be used in this render function. According to the above, it is not recommended to use the with statement. Why is it used in Vue?

Related recommendations: "vue.js Tutorial"

function render () {
  with (this) {
    return _c('p',{on:{"click":change}},[_c('span',[_v(_s(number))]),_v(" "),_c('span',     [_v(_s(name))])])
  }
}

Because the scope of with exactly matches the scope of the template, it can greatly simplify the template compilation process. The amount of code with with is very small, and it is more reliable to leave the scope processing to the JS engine. Of course, the most ideal situation is to eliminate the use of with. During pre-compilation, the code generated by the first compilation will automatically undergo additional processing, use complete AST analysis to process the scope, remove with, and support ES6 by the way. grammar. In other words, if you use webpack vue, the final generated code will not have with.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of In-depth analysis of the use of With. For more information, please follow other related articles on the PHP Chinese website!