Proxy

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

Proxy

Proxy，其功能类似于设计模式中的代理模式，该模式常用于三个方面

• 拦截和监视外部对对象的访问
• 降低函数或类的复杂度
• 在复杂操作前啊对操作进行校验或对所需资源进行管理

在支持Proxy的浏览器环境中，Proxy是一个全局对象，可以直接用

Proxy(target,handler)是一个构造函数

target是被代理的对象，handler是声明了各类操作符的对象，最终返回一个代理对象。

new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

let obj = {
            name : 'Strive'
        };

        let newObj = new Proxy(obj,{
            get(target,  property){
                console.log(`您访问了${property}属性`);
                //您访问了name属性
                // return target.property;
                return target[property];
            }
        });
        console.log(newObj.name);//Strive

let obj = {
   name : 'Strive'
};

let newObj = new Proxy(obj, {
   get(target, property){
       if(property in target){
           return target[property];
       }else{
           console.warn(`${property}属性不在对象上`);
           return '^_^';
       }
   }
});

console.log(newObj.name);
console.log(newObj.age);

const DOM = new Proxy({},{
    get(target, property){
        //console.log(target,property);
        //property DOM.xxx 里面的xxx
        return function(attr={},...children){
            const el = document.createElement(property);
            for(let key of Object.keys(attr)){
                el.setAttribute(key,attr[key]);
            }
            for(let child of children){
                if(typeof child == 'string'){
                    child = document.createTextNode(child);
                }
                el.appendChild(child);
            }
            return el;
        }
    }
});

let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','hahaha');

console.log(oDiv);

for…of 和 for…in

for … of是作为ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构并且返回各项的值

1. for-in循环主要用于遍历对象，for()中的格式：for(keys in zhangsan){}
2. keys表示obj对象的每一个键值对的键
   所有循环中，需要使用obj[keys]来取到每一个值
3. for-in循环,遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性
4. 所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性。

for…of

1. 一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。
2. 也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法。
3. for…of循环可以使用的范围包括数组、Set和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、后文的 Generator 对象，以及字符串

dom补充

1. createElement() 方法通过指定名称创建一个元素
2. setAttribute()方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
3. createTextNode()可创建文本节点,HTML元素通常是由元素节点和文本节点组成。
4. appendChild() 方法向节点添加最后一个子节点。