new Function()奇妙之处，以及DOM对象挂载属性和方法的补充

new Function()奇妙之处   先看new Function()输出结果     new Function() 是实例化一个对象，一个函数对象，即也是匿名函数。 这就很有意思了，想想匿名函数出现的场景，DOM注册事件、定时器等等~~     给DOM元素注册事件   DOM注册事件，可以看作DOM对象挂载一个属性，基于对象和属性的关系，有两种写法，用点运算符“.”或者是中括号“[]”   <button id="bigBtn">大按钮</button>     let bigBtn = document.getElementById('bigBtn');   bigBtn['onclick'] = function(){};    或者   bigBtn.onclick = function(){};       给DOM注册事件的事件，绑定方式有3种   // 方法一最常用的直接赋值一个匿名函数   function fn() {      alert(222); }   bigBtn['onclick'] = function(){     // do something     fn(); };   // 方法二 赋值一个有名函数   bigBtn['onclick'] = fn;    注意，这里赋值的有名函数没有括号也就是不执行     // 方法三 使用new Function()构造器, 这种方式可以传参，第二种方式却不可以   bigBtn['onclick'] = new Function('fn()');     在使用 new Function() 创建实例化时， 参数是以字符串的形式存在的。   实际中，常用的是第一和第二种，第三种不常用。  但是第三种神奇的是函数可以有参数，在写框架或是封装的时候可能会用到   function fn(val) {      console.log(val);      alert(val); } bigBtn['onclick'] = new Function('fn("这是一个参数")');     ------ 神奇吧~~~当然给DOM注册事件，还可以通过addEventListener方法，之前有说过，就不细说~~~ ----------         DOM对象挂载属性和方法   获取DOM元素，得到的是一个DOM对象。每一个DOM对象有系统默认的属性和方法，当然也可以为DOM元素自定义属性和方法。       // 在创建DOM元素的时，绑定事件方法、并为DOM元素挂载属性和方法 for (let i =0; i<10; i++) {     let btn = document.createElement('button');     btn.innerHTML = '按钮';       // 为每一个创建的btn添加一个index属性     btn.index = i;       // 为每一个创建的btn绑定一个方法     btn.Update = function () {         alert( btn.index)     };       // 为每一个btn注册一个事件     btn['onclick']=function(){         this.Update();         console.log(typeof this);     }     box.appendChild(btn); }   为DOM绑定自定义属性或是方法不重要，重要的是这些属性和方法在其它地方也是有效的。例如把这些创建的DOM存到一个数组中，在遍历调用时这些属性和方法也是有效的。   --------------------------------------------------------------------------------------------------------------------------------------------   在《JavaScript设计模式》这本书中，observer（观察者）模式，案例中受到的启发！                      

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄