With의 활용에 대한 심층 분석

with는 문의 범위 체인을 확장하는 데 사용되지만 혼동되는 오류 및 호환성 문제의 원인이 될 수 있으므로 일반적으로 with 문을 사용하지 않는 것이 좋습니다. Vue 소스 코드에는 with 문을 사용하는 기능적 포인트가 있으므로 여기서는 프레임워크 소스 코드를 읽는 데 도움이 되도록 해당 기능을 소개합니다.

성능의 장단점

Pros

with 문을 사용하면 성능 손실 없이 변수 길이를 줄일 수 있습니다. 추가적인 계산 노력은 최소화됩니다. 'with'를 사용하면 불필요한 포인터 경로 확인 작업을 줄일 수 있습니다. 그러나 대부분의 경우 with를 사용하지 않더라도 임시 변수를 사용하여 포인터를 저장하거나 호출을 사용하면 동일한 효과를 얻을 수 있습니다. with语句可以在不造成性能损失的情況下，减少变量的长度。其造成的附加计算量很少。使用'with'可以减少不必要的指针路径解析运算。但是在大部分情况下，即使不使用with，使用临时变量来保存指针或者使用call，也能达到同样的效果。

弊

with语句使得程序在查找变量值时，都是先在指定的对象中查找。所以那些本来不是这个对象的属性的变量，查找起来将会很慢。

示例

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

这段代码中，with关联的obj对象，在with代码块中，每个变量都首选被认为是一个局部变量，如果这个局部变量与obj对象的某个属性同名，则这个局部变量会指向obj对象属性。

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被泄漏到全局作用域链上

上例中，obj1存在a属性，obj2没有a属性。fn(obj)接收一个obj形参，是一个对象引用，并执行了with(obj)。在with代码块的内部，对a实际上是一个引用，将1赋值给了a。

当传递obj2给with时，with所声明的作用域就是obj2，从这个作用域下开始对a进行查询。obj2的作用域、fn的作用域和全局作用域中都没有查找到标识符a，因此在非严格模式下会自动在全局作用域创建一个全局变量，而严格模式下则会抛出ReferenceError

Cons

with 문은 프로그램이 변수 값을 찾을 때 지정된 개체에서 먼저 검색하도록 합니다. 따라서 이 개체의 속성이 아닌 변수를 찾는 속도가 매우 느립니다.

Example

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

이 코드에서 with 코드 블록에서 와 연관된 obj 객체는 먼저 지역 변수로 간주됩니다. 이 지역 변수가 obj 객체의 속성과 동일한 이름을 가지면, 그러면 이 지역 변수는 obj 개체 속성을 가리킵니다. rrreee

위의 예에서 obj1에는 a 속성이 있지만 obj2에는 a 속성이 없습니다. fn(obj)는 객체 참조인 obj 형식 매개변수를 전달받고, with(obj)로 실행됩니다. with 코드 블록 내에서 a는 실제로 참조이고 1이 a에 할당됩니다.

obj2를 with에 전달할 때 with가 선언한 범위는 obj2이고 a에 대한 쿼리는 이 범위에서 시작됩니다. 식별자 a는 obj2 범위, fn 범위 및 전역 범위에서 찾을 수 없습니다. 따라서

비엄격 모드

에서는 전역 변수가 자동으로 전역 범위에서 생성되지만

엄격 모드에서는 ReferenceError 오류가 발생했습니다.

성능 감소

코드에 with를 사용하면 JS 엔진은

컴파일 단계

에서 식별자에 대한 판단이 유효하지 않다고 가정할 수 있습니다. 왜냐하면 컴파일러는 with에 전달된 범위 객체를 알 수 없기 때문입니다. 이다. 따라서
컴파일 단계

동안 JS 엔진이 수행하는 성능 최적화는 유효하지 않습니다. 최악의 시나리오는 with가 나타나면 모든 최적화가 의미가 없게 되는 것입니다. 가장 간단한 방법은 최적화를 수행하지 않는 것입니다. 그러면 매우 느리게 실행되며 이는 피할 수 없는 사실이 됩니다.

With

Vue의 Vue는 컴파일할 때 템플릿에서 해당 렌더링 함수를 생성하며 with 문은 이 렌더링 함수에 사용됩니다. 위 내용에 따르면 Vue에서는 with 문을 사용하지 않는 것이 좋습니다.

관련 추천: "vue.js Tutorial

"

rrreee

with의 범위가 템플릿의 범위와 정확히 일치하기 때문에 템플릿 컴파일 과정을 크게 단순화할 수 있습니다. with를 사용한 코드의 양은 매우 적고 범위 처리를 JS 엔진에 맡기는 것이 더 안정적입니다. 물론 가장 이상적인 상황은 사전 컴파일 중에 첫 번째 컴파일 단계에서 생성된 코드가 자동으로 추가 처리되고 전체 AST 분석을 사용하여 범위를 처리하고 ES6를 제거하고 지원하는 것입니다. 그런데 문법. 즉, webpack + vue를 사용하면 최종 생성된 코드에는 with가 없습니다.
관련 권장 사항:

🎜🎜🎜2020 프론트엔드 vue 인터뷰 질문 요약(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문: 🎜프로그래밍 입문🎜! ! 🎜🎜

위 내용은 With의 활용에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!