js: call 同步异步 事件委托 判断数据类型

1、call 是一个方法，是函数的方法。 即函数可以调用这个方法。 call 可以改变函数中 this 的指向，但不能使用指向的数据。

2、appy 和 call 相比，传参用数组；  bind 和call 传参一样，但 call  不会调用函数，返回值是一个函数，需要再次调用。

        <script>
        let e=100;
        function fun1(food) {
           let name="dog";
           console.log('this:',this);
           console.log('this.e:',this.e);
           console.log('e:',e);
           console.log('this.name:',this.name);
           console.log('name:',name);
        }

        function fun2(){ 
          this.food1='素菜';      
        this.food2='水果';  
           
        }
       function eat(food1,food2){
            console.log(this)
            console.log(food1,food2);
            console.log('I like eat:',this.food1,this.food2)
        }

       fun1();//这里 this指向的是window ,window 里面是没有name 属性的;
        fun1.call(fun2); //使用call方法之后，this指向 call的对象 fun2, this.name= fun2 函数名
        //call 改变了this 的指向，但是不能调用 fun2 里面的数据
        eat("鱼","虾");
        eat.call(fun2,'s鱼','虾')   
        
    </script>

 

3、事件委托

    在 DOM 中，事件流有三个阶段。 给一个元素绑定事件之后，触发这个事件的过程有三个阶段：  捕获--> 触发--> 冒泡。

    捕获 是 html --> body -->祖父 元素 --> 父元素 -->子元素 ; 冒泡则是反过来。 事件委托呢，就是把对 子元素 的事件 绑定到 父元素 或者 祖父元素上面。 虽然用户没有点击父元素，但是通过冒泡机制，一样可以触发父元素中的事件，通过target 获取到点击的子元素，达到操作子元素的目的。

 

   <!-- 事件委托结合冒泡机制 实现 简易留言发布与删除    ul是父元素，li是子元素-->

        <div>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <button class="button1">发布</button>
            <ul class="del">
                <!-- 留言内容写入ul里面 -->
                <li>历史留言1 删除</li>
                <li>历史留言2 删除</li>
                <li>历史留言22 删除</li>
                <li>历史留言23 删除</li>
            </ul>
        </div>
        <script>
        // 获取元素
        var txtarea = document.querySelector('textarea');
        var btn1 = document.querySelector('.button1');
        var ul = document.querySelector('ul');
        var li= document.querySelector('li')
        //创建事件:点击发布留言
        btn1.onclick = function() {
            if (txtarea.value == '') {
                alert('您输入的内容为空');
                // return false;
            } else {
                let lis = document.createElement('li');
                lis.innerHTML = txtarea.value+`     删除` ;
                ul.insertBefore(lis, ul.children[0]);             
        }               
    }
            // 删除留言  e.target是点击的子元素
            ul.onclick=function (e){
                  ul.removeChild(e.target) 
                }
    </script>　

 4、 同步是按顺序执行；直接调用函数是同步的 fn()；js是单线程的， 同步执行完成之后再执行异步：

       异步任务它分为两段（或者多段）执行：

        异步先执行一部分，等待结果或者时间到了，再继续往下执行。如：计时器 setTimeout(只执行一次)，setInterval(一直循环)，回调函数  fn(fn1) ，async/await （ES6），promise（try/catch）（ES6）,

 5、  判断数据类型 typeof  instanceof

   //JS判断数据类型 typeof （string,number,object,boolean.undefined)
        //数组和对象 typeof 出来是 object
        const a = 1;
        const b = [1, 2, 3]
        console.log(typeof (a))

        // instanceof 判断数据类型，常用在 判断条件
        if (b instanceof Array
        ) {
            console.log('这是一个数组')
        }
        //2、constructor 
        console.log(a.constructor=='string')//结果为false