JS 知识点总结归纳（中高级）

1. js递归求和1+2+3+...+100

   function add(num1,num2){
       let num =num1 + num2 
       if(num2 + 1 > 100){
           return num
       }else{
           return add(num, num2 + 1)
       }
   }
   
   let sum = add(1,2)
   console.log(sum)

2. js作用域和作用域链
   
   作用域分为 全局作用域 和 函数作用域。
   window 对象的内置属性都拥有全局作用域。
   作用域有上下级关系，就看函数是在哪个作用域下创建的。
   作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
   
   变量取值到 创建这个变量 的函数的作用域中取值。在当前作用域中没有查到值，就会向上级作用域（外层函数）去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

3. 如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）

   this === window?'browser':'node'

   通过判断 Global 对象是否为window，如果不为 window ，当前脚本没有运行在浏览器中。

4. IE 和标准下有哪些兼容性写法？

   var ev = ev || window.event

   document.documentElement.clientWidth ||document.body.clientWidth

   var target = ev.srcElement || ev.target

5. 如何阻止事件冒泡和事件默认行为

   // 阻止事件冒泡

   if(typeof eval.stopPropagation == 'function'){ //标准的
       ev.stopPropagation();
   } else { //非标准IE 
       window.event.cancelBubble = true ;
   }

   //阻止默认行为

   return false
   
   //取消事件的默认动作
   event.preventDefault()

6. window.onload 和 document.ready 的区别

   window.onload() 是在 dom 文档树加载完和所有文件加载完之后执行的一个函数。

   document.ready原生中没有这个方法，jquery 中有 $().ready(function), 在 dom 文档树加载完成之后执行的一个函数，但不代表全部文件加载完。

   $(document).ready 要比 window.onload 先执行，window.onload 只能出来一次，$(document).ready 可以出现多次。

7. JavaScript 的数据类型的判定

   基本数据类型五种： String , boolean , Number , undefined , null

   引用数据类型： Object, Array, Function 
   

   要判定某变量是否为数组数据类型，可以用以下方法：

   方法一： 判断是否具有数组性质，如 slice() 方法。可自己给该变量定义 slice 方法，有时会失效。

   方法二：obj instanceof Array 在某些 IE 版本中不正确

   console.log(o instanceof Object);  //true 或 false
   
   基于 instanceof 的封装方法：
   

   var o = { 
             'name':'lee'
           };
   var a = ['reg','blue'];
   var getDataType = function(o){
               if(o instanceof Array){
                   return 'Array'
               }else if( o instanceof Object ){
                   return 'Object';
               }else{
                   return 'param is no object type';
               }
          };
   console.log(getDataType(o));//Object。
   console.log(getDataType(a));//Array。

   方法三：以上两种皆有漏洞，最好的方法是 ECMA Script5 中定义了新方法 Array.isArray()，保证其兼容性：

   if(typeof Array.isArray === "undefined"){

       Array.isArray = function(arg){

           return Object.prototype.toString.call(arg) === "[Object Array]"

       }

   }

8. js 事件绑定的三种方式：

   (1) 直接在 DOM 里绑定事件 <div onclick = "clickme()"></div>

   (2) 在JS里通过 onclick 绑定：xxx.onclick  = test

   (3) 通过事件添加进行绑定：addEventListener(xxx, 'click' , test)

9. Javascript  的事件流模型

   “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

   “事件捕获”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

   “DOM事件流”：三个阶段：事件捕获，目标阶段，事件冒泡

10. 关于 this 引用

    
    
    this 是JavaScript 的关键字，用于指向某一个对象。

    - 函数调用模式的时候，this 指向 window。自调用函数内this都是window。

    - 方法调用模式的时候，this 指向方法所在的对象，如：事件里面的 this 指向触发事件的元素。

    - 构造函数模式的时候，this 指向新生成的实例。

    - apply/call 调用模式的时候，this 指向 apply/call 方法中的第一个参数。

    对于一个函数，我们可以有三种方法替换函数内的 this：

    - call()  替换.前面的this并执行那个函数，A.fn.call(B,5)  B取代fn中的this并调用fn()。

    - apply()

    - bind()

    call 和 apply, bind 只能是函数（方法）内，或者函数对象，call 前面对象必须是函数对象。

    函数调用call方法改变this指向的实例：

    var a = 45;
    var b = {
        a:12
    }
    function fn(){
        console.log(this.a);
    }
    
    fn();   //undefined  此时fn内部this指向window
    
    fn.call(b);  //12 此时this指向b

    调用函数的 apply 方法，将函数内部的 this 引用指向一个特定对象。例子：

    function Tool(name,usage){
        this.name = name;
        this.usage = usage;
        this.get_info = function(){
            console.log("This is " + this.name + ", the usage is " + this.usage+ "." );
        }
    }
    var cycling = new Tool("cycling","transport");
    // console.log(cycling);
    function display(date){
        console.log(this.name + "," + this.usage + "," + date) ;
    }
    display.apply({name:"cycling",usage:"transport"},[2020]);
    
    //运行代码结果
    //cycling,transport,2020

11. 关于回调函数

    在 JavaScript 中，函数实际上是对象：它们被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。

    //全局变量
    var info = [];
    //普通show函数
    function show(data){
        info.push(data);
        //如果是字符串则可以直接输出
        if( typeof data === "string"){
            console.log(data);
        }else if (typeof data === "object"){
            //遍历data
            for(var item in data){
                console.log(item + ":" + data[item])
            }
        }
    }
    
    //定义一个可以接收两个参数的函数，第二个参数是回调函数，在函数体中调用回调函数，并将第一个参数传入回调函数。
    function get_inputs(data,callback){
        callback(data);
    }
    
    //调用get_inputs 函数,将show函数作为参数传递给它
    get_inputs({name:"Bower",speciality:"Robot"},show);
    
    //输出结果：
    // name:Bower
    // speciality:Robot

12. 对象继承

    JS中的每一个对象都有一个特殊的属性 “_proto_”，通过此属性去关联另一个对象，这个对象就是所谓的原型。

    //（1）创建一个对象（非new 形式）
    var animal = {
        name:"animal",
        eat:function(){
            console.log(this.name + " is eating");
        }
    };
    animal.color = "balck"; //对象中添加一个属性
    
    //(2) 创建一个对象
    var dog = {
        name:"dog",
        _proto_:animal //指向animal 对象
    };
    
    //(3) 创建一个对象
    var cat = {
        name:"cat",
        _proto_:animal //指向 animal 对象
    };
    
    dog.eat(); //继承原型的方法
    cat.eat(); //继承原型的方法
    console.log(dog.name);
    console.log(cat.name);
    console.log(cat.color);

13. childNodes 的兼容性问题。

     元素.childNodes 是只读属性 子节点列表集合。childNodes 只包含一级子节点，不包含后辈孙级以下的节点。
    在标准浏览器，包含文本注释元素类型的节点，并且包含非法嵌套的子节点。
    非标准浏览器，只包含元素类型的节点。IE7以下不包含非法嵌套子节点。
    换行属于文本节点

    <ul id="ul1">
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>

    var ul1 = document.getElementById("ul1");
    window.alert(ul1.childNodes.length);
    //标准浏览器输出9 ； IE6/7输出4 。标准浏览器下换行也属于文本节点。
    
    for(var i=0;i<ul1.childNodes.length;i++){
        ul1.childNodes[i].style["background"] = "red"; //标准浏览器下会报错，因为有文本节点
    }
    
    //解决方法
    for(var i=0; i<ul1.childNodes.length; i++){
        if(ul1.childNodes[i].nodeType == 1){
            ul1.childNodes[i].style["background"] = "red";
        }
    }

    childNodes 必须和 nodeType 一起使用，涉及到空白节点的问题：元素节点的nodeType 是1，属性节点是2， 文本节点 是3 ，注释节点 是8 ，document节点是 9 。
    
    元素.children 是只读属性 子节点的列表集合，只包含元素类型节点，不包括文本节点、注释节点等。
    在标准浏览器和非标准浏览器表现一致，兼容性好，常用。

    for(var i=0;i<ul1.children.length;i++){
        ul1.children[i].style["background"] = "red"
    }

    firstChild 包含文本节点和注释节点，在IE678下只包含元素节点，IE9以上全部包括。

14. 禁止选择拷贝页面文字

    <body onselectstart="noEffect()" oncontextmenu="noEffect()">
    </body>

    <script type="text/javascript">
        //禁止选择拷贝页面文字
        function noEffect() {
          with(event) {
            returnValue = false;
            cancelBubble = true;
          }
          return;
        }
    </script>

15. JS判断文件是否存在

    <input type=file name="f1"/>
    <input type="submit" onClick="Exists(f1.value)"/>

    
        function Exists(filespec) {
          console.log(1)
    
          if (filespec) {
            var fso;
            fso = new ActiveXObject("Scripting.FileSystemObject");
            console.log(1)
            console.log(filespec)
            console.log(fso)
            alert(fso.FileExists(filespec))
          }
        }