学习Vue源码前的基础知识

• 获取outerHTML

    /**
     * Get outerHTML of elements, taking care
     * of SVG elements in IE as well.
     */
    function getOuterHTML (el) {
      if (el.outerHTML) {
        return el.outerHTML
      } else {
        var container = document.createElement('div');
        container.appendChild(el.cloneNode(true));
        return container.innerHTML
      }
    }

这段代码是获取DOM元素的outerHTML， 由于IE9-11中SVG标签元素没有innerHTML和outerHTML这两个属性，所以通过获取包裹它的div的innerHTML来进行获取。

• with

语法：

with (expression) {
    statement
}

expression: 将给定的表达式添加到在评估语句时使用的作用域链上。

statement: 任何语句。要执行多个语句，请使用一个块语句 ({ ... })对这些语句进行分组。

 

with通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。

var obj = {
    a: 1,
    b: 2,
    c: 3
};

// 单调乏味的重复"obj"
obj.a = 2;
obj.b = 3;
obj.c = 4;

// 使用with
with (obj) {
    a = 2;
    b = 3;
    c = 4;
}

  js 查找某个未使用命名空间的变量时，会通过作用域链来查找，作用域链是跟执行代码的context或者包含这个变量的函数有关。'with'语句將某个对象添加到作用域链的顶部，如果在statement中有某个未使用命名空间的变量，跟作用域链中的某个属性同名，则这个变量将指向这个属性值。如果没有同名的属性，则将抛出ReferenceError异常。

  严格模式下不允许使用with语句。

 说说with的弊端：with语句使得程序在查找变量值时，都是先在指定的对象中查找。所以那些本来不是这个对象的属性的变量，查找起来将会很慢。如果是在对性能要求较高的场合，'with'下面的statement语句中的变量，只应该包含这个指定对象的属性。

弊端1： 语义不明

function f(x, o) {
    with (o) {
        console.log(x);
    }
}

f被调用时，变量x有可能能取到值，也可能是undefined，如果能取到, 有可能是在o上取的值，也可能是函数的第一个参数x的值（如果o中没有这个属性的话）。如果你忘记在作为第二个参数的对象o中定义x这个属性，程序并不会报错，只是取到另一个值而已。

弊端2： 无法向前兼容，特别是使用一些原生数据类型时。

function f(foo, values) {
    with (foo) {
        console.log(values)
    }
}

如果是在ECMAScript 5环境调用f([1,2,3], obj)，则with语句中变量values将指向函数的第二个参数values。但是，ECMAScript 6标准给Array.prototype添加了一个新属性values，所有数组实例将继承这个属性。所以在ECMAScript 6环境中，with语句中变量values将指向[1,2,3].values。

参考资料： js 语句与声明 with