With 구문

간단 한 소개

with 문 구 는 js 에서 강하 지만 논란 이 되 는 특성 이다.

with 문 구 는 한 대상 의 모든 속성 을 현재 역할 영역 에 참조 할 수 있 습 니 다

소유자 대상 의 접 두 사 를 사용 하지 않 아 도 이 속성 을 직접 참조 하고 할당 할 수 있 습 니 다.

: ECMAScript 5 규범 은 엄격 한 모델 에서 이 문 구 를 사용 하지 않 습 니 다. 개발 에 서 는 추천 하지 않 지만 with 코드 를 알 아 볼 수 있 도록 요구 합 니 다.
with 구문 내부 디 테 일 : with 문 구 는 하나의 역할 도 메 인 을 만 들 고 이 역할 도 메 인 에서 특정 대상 의 속성 을 참조 할 때 접 두 사 를 사용 하지 않 을 수 있 습 니 다.
응용 장면: .
with 역할 영역 내부 참조 속성

//[01]   with              
//01       ,   testValue
var testValue = '         ';

//02     ,        
var testObject = {
    name:'       ',
    testValue:'       '
};

//03   with    
with(testObject)
{
    console.log(name);          //       
    console.log(testValue);     //       
    console.log(this);          //window
}

console.log(testValue);         //         

요약:(1) with , (2) this( ) window, with
with 역할 영역 에서 할당 작업 을 진행 합 니 다.

//01       ,       
var obj = {
    name:'       ',
}

//02 with              
with(obj)
{
    name = '     name  ';
    //          (  ?                obj     ?)
    age = '25';
    showName = function () {
        console.log('name == ' + name);
    };
};

//          
console.log(obj.name);
//          
console.log(obj.age);             //undefined
//obj.showName();                 //obj.showName is not a function
console.log('____________________');
console.log(this.name); //== name == window.name
console.log(window.name);
console.log(name);
showName();             //==this.showName() ==window.showName()

요약:（1） with （2） [ ], [window|this] （3） : , with
질문（1）with （2） ， js （3）ECMAScript5 with
with 문장 간소화 코드 의 대체 방안
with 문 구 를 즉시 호출 함 수 를 사용 하여 대체 합 니 다. 함수 전송 방식 으로 더 짧 은 인용 을 사용 하여 지루 한 인용 접 두 사 를 대체 하 는 것 이 with 문 구 를 사용 하여 접 두 사 를 없 애 는 것 보다 좋 습 니 다.

    with(this.style)
    {
        width = '200px';
        height = '200px';
        backgroundColor = '#ca3';
        console.log(width); //                 "    ",        200px
    }

    (function (s) {
        s.width = '200px';
        s.height = '200px';
        s.backgroundColor = '#ca3';
    })(this.style);