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(观察者)模式,案例中受到的启发!
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/wjh0916/p/10820247.html