With语句

with语句简单介绍

• with语句是js中一个强大但有争议的特性。
• with语句允许我们将一个对象的所有属性引用到当前的作用域
• 允许我们无需使用拥有者对象的前缀，就可以直接对这些属性进行引用和赋值操作。

注意：ECMAScript5规范在严格模式下已经禁用了该语句，在开发中不推荐使用，但是要求能够看懂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作用域对象添加属性

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);