2020-9-15-一些JS练习题目

当点击红色方块的时候，在控制台会输出什么？

    <div class="test1">
      <div
        class="test2"
        style="height: 40px; width: 40px; background: red"
      ></div>
    </div>
    <script>
        // .test1 冒泡事件
      document.querySelector(".test1").addEventListener("click", function () {
        console.log(1);
      });
      // .test1 捕获事件
      document.querySelector(".test1").addEventListener(
        "click",
        function () {
          console.log(3);
        },
        true
      );
      // .test2 冒泡事件
      document.querySelector(".test2").addEventListener(
        "click",
        function () {
          console.log(2);
        }
      );
      // .test2 捕获事件
      document.querySelector(".test2").addEventListener("click", function () {
        console.log(4);
      }, true);
    </script>

知识点

1. 事件流，捕获还是冒泡。
   dom.addEventListener(type, callback, bool);
   bool 默认是 false 代表冒泡。 true的时候代表捕获。
2. 事件流的执行顺序。
   先捕获（从父级到子级），在冒泡（从子级到父级）
   捕获阶段, 目标阶段, 冒泡阶段
   目标阶段，我们鼠标触发的元素。（type事件绑定的元素，在目标阶段的时候，我们先冒泡就冒泡，先捕获就捕获）
   分析：知道上面的知识点之后，我们首先分析html结构，非常简单，是一个test1父元素里面有一个test2子元素；接下来分析script里面的内容，第一个是为test1添加一个冒泡事件，第二个是为test1添加一个捕获时间（因为第三个bool值是true），第三个是是为.test2添加冒泡事件，第四个是为test2添加捕获事件。
   在点击test2之后，先进行事件的捕获（从父级开始），那么就先输出3，接下来在捕获子级事件的时候，同时子类是一个目标阶段，所以应该从上到下的执行，最后执行父类的冒泡的阶段输出3241.

下面代码的输出结果是什么？

    console.log(1 + '2'+'2');
    console.log(1 + +'2'+'2');
    console.log(1+ -'1' +'2');
    console.log(+ '1'+ '1' + '2');
    console.log('A' - 'B' + "2");
    console.log('A' - 'B' +2);

结果：

分析：第一个是字符串的拼接，所以输出的是122。
第二个是先进行+'2’进行隐式类型转化，将其变为数字2，然后与1相加变成3，最后拼接字符串形成32。
第三个是与第二个类似，先进行隐式类型转化，将-‘1’ 变成-1，与前面的1进行运算，最后的进行字符串的拼接，最终的结果是02.
第四个与之前的类似，可得到112.
第五个是要进行加减乘数的运算，本质上是数字之间的运算，所以我们要先进行将字符串转化为数字，那么字母转化为数字是NaN（注意在js中，只有在进行比较字母的时候才转化为ASCII码）所以最终输出的结果是NaN2.
第六个与第五个是一样的，非数不能进行运算，换句话来说，与非数进行运算之后的结果还是非数。

下面代码的执行结果是什么？

   var length = 10;
        function fn() {
            console.log(this.length);
        }
        var obj = {
            length: 5,
            method: function (fn) {
                fn(); // 10
                // function fn() {
                //     console.log(this.length);
                // }()
                // arguments = {0: function () {console.log(this.length)}, 1: 1, length: 2}
                // arguments是函数实际参数的集合  是一个类数组
                arguments[0](); // 2
            }
        }
        obj.method(fn, 1);

结果：

分析：分析这一段代码，我们可以知道是在全局声明了一个变量和一个函数，然后只是声明而已，代码的执行语句是 obj.method(fn, 1);方法执行。我们接下来去分析method函数，fn（）执行，根据作用域链，找到在全局的fn函数，然后fn单独执行，谁调用this，this就指向谁，fn单独执行，那么this默认指向window，所以输出的结果是全局的length10.
接下来我们去分析 arguments0; 实参集合的第一项执行，那么我们可以看出fn（），但是是有arguments调用的，所以说this应该指向的是arguments，所以说最终打印的是arguments的长度，为2.。而不应该是5，或者是是1.

小知识点：

   if(NaN) {
            console.log('=====')
        }

分析：我们在做题的过程中，经常会遇到这样的问题，这样的问题本质上就是让我们去判断if（）内部的表达式的布尔值为真还是假，总结一下经常遇到的常见的一些表达式的真假值。
“”|0|null|undefined|NaN false
{} ==> true function(){} true

下面代码的输出结果是什么？

 function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m,n);
                }
            };
        }
        var a = fun(0);
        a.fun(1);
        a.fun(2); 
        a.fun(3); 

        var b = fun(0).fun(1).fun(2).fun(3); 

        var c = fun(0).fun(1);
        c.fun(2); 
        c.fun(3); 

结果：

分析：首先分析这个函数，函数的返回值是一个对象，对象中有一个fun属性是函数，这个函数的返回值是大的fun函数。
有了上面的分析之后，我们一步一步进行下面的分析。第一个执行语句var a = fun(0)，fun中第一个形参n被赋值为0，第二个形参o没有被赋值，未定的形参变量应该是undefined，所以说打印输出o的值是undefined，接着返回一个对象
{
fun: function (m) {
return fun(m,0);
}到a中。
接着分析下一个执行语句，a.fun(1)，这条语句的含义是a对象中的fun函数执行，打印输出n的值为0，然后返回一个对象，由于没有变量进行接收，那么a的值仍然是上面的对象，所以我们在执行后面两条语句的时候仍然和第一条语句是一样的，都是打印输出0，然回一个对象，这样我们对a 的分析就结束了。
接着我们去分析b， var b = fun(0).fun(1).fun(2).fun(3)，大同小异，我们在fun(0)执行的基础上，在控制台打印undefined之后，返回一个对象 {
fun: function (m) {
return fun(m,0);
}，接着fun（1）执行，那么打印输出0，返回一个对象{
fun: function (m) {
return fun(m,1);
}；接着fun（2）执行，打印输出1，返回一个对象{
fun: function (m) {
return fun(m,2);
}；接着fun（3）执行，打印输出2，返回一个对象{
fun: function (m) {
return fun(m,3);
}到最终的b。
接着我们去分析c， var c = fun(0).fun(1);这段语句执行的是b的前两段，在打印输出undefined 和0之后，返回一个对象{
fun: function (m) {
return fun(m,1);
}，c.fun(2)执行返回fun（2,1），大的函数输出1，返回一个对象，但是不进行接收，那么下面c.fun(3)执行还是一样，打印输出1，返回一个对象但是不进行接收。