js总结，易错，难记点

1.1 数据类型

• 简单/基本/原始数据类型

  • number、string、boolean、undefined、null

• 复杂数据类型

  • object、Array、function、Date、RegExp.....

区别：在内存中的存储位置

• 基本数据类型的存取都发生在栈内存中

• 引用类型在堆中保存数据，在栈中保存数据在堆中的地址(引用)

1.1.1 数据集类型转换

• 隐式类型转换

  • 运算过程、

• 强制类型转换

  • Number()

  • String()

  • parseInt()

  • parseFloat()

  • toString()

函数

1.1 递归函数

 

  //递归函数
        function fn(num) {
            if (num == 1) {         //终止条件
                return 1
            }
            return num * fn(num - 1)
        }

        var num = fn(10)
        console.log(num);
        /*
            分析递归函数的执行过程：
            10    10*fn(9)
            9     10*9*fn(8)
                        8*fn(7)
                            7*fn(6)
                            ...
                            2*fn(1)
                                1
        */

1. 2回调函数

普通函数

高阶函数：可以接收一个函数作为参数的函数

// function show(fn) {     //fn回调函数   show:高阶函数
        //     console.log(fn);
        // }

        // show(function(){
        //     console.log('hello world');
        // })

 匿名函数

 (function() {
            console.log('哈哈哈');
        })();

1.3 什么是闭包

闭包：有权在一个函数内访问另一个函数作用域中的变量(返回该函数)

闭包是连通函数内外的一个桥梁，可以实现局部变量常驻内存。

闭包常见面试题：

 var arr = [];

        for (var i = 0; i < 3; i++) {
            (function (i) {
                arr.push(function () {
                    console.log(i);
                })
            })(i)
        }

        // console.log(arr);
        arr[0]()
        arr[1]()
        arr[2]()

 var lis = document.querySelectorAll("ul li")
        // for(var i=0;i<lis.length;i++){
        //     // lis[i].index=i;
        //     lis[i].onclick=function(){
        //         console.log(this.index);
        //     }
        // }

        for (var i = 0; i < lis.length; i++) {
            (function (a) {
                lis[a].onclick = function () {
                    console.log(a);
                }
            })(i);
            // (function (i) {//0
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(0);

            // (function (i) {//1
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(1);

            // (function (i) {//2
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(2);

            // (function (i) {
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(3);
        }

1.4 递归

一种常见的算法思想：

求阶乘：

 //递归
        //求阶乘
        // function fn(n){
        //     if(n==1){
        //         return 1;
        //     }
        //     return n*fn(n-1);
        // }

        // console.log(fn(10));
        // 10*fn(9)

打印杨辉三角形：

 for (var i = 1; i < 9; i++) {   //行
            for (var j = 1; j <= i; j++) {//列
                document.write(cal(i, j) + "&nbsp;&nbsp;&nbsp;&nbsp;")
            }
            document.write("<br>")
        }

        //数字的计算
        function cal(m, n) {
            //第一行、第一列、最后一列
            if (m == 1 || n == 1 || m == n) {
                return 1;
            }
            return cal(m - 1, n) + cal(m - 1, n - 1)
        }

1.5 call和apply

this在不同的地方，指向不同。

全局中this指向window

在事件函数中指向事件调用者

对象的方法中，this指向对象(this指向调用者，谁调用，this指向谁)

call和apply都可以修改函数中的this指向问题（功能一致，用法不一致）

• call(obj,参数1,参数2,参数2)

• apply()

•    // function show(){
          //     console.log(this);
          // }
          function show(a,b){
              console.log(this,a,b);
          }
  
  
          // show();
          // show.call({})   ;//无参
          show.call({},10,20)
       show.apply({}, [10, 20])

  2.面向对象

  对象：万物皆对象，  事物的抽象
  
  实例：对象的实例化

• 原型模式

  • 原型 prototype 所有对象都包含一个原型的属性，该属性用来保存对象的公有的属性和方法

    • 对象.ptototype

    • 对象实例.__proto__

  • constructor 原型对象的属性 指向构造函数

  特点：属性放置在原型中，会成为公共属性

• 混合模式

  构造函数+原型

•  function Person(name,age,no){
              this.no=no;
              this.name=name
              this.age=age;
          }
  
          Person.prototype.say=function(){
              console.log(this.name+" 哈哈哈");
          }
          Person.prototype.walk=function(){
              console.log(this.name+" 跑的飞起......");
          }
  
          var p1=new Person("秦始皇",55,'001')
          var p2=new Person("赵高",56,'002')

  动态混合

•  //动态混合
          function Person(name, age, no) {
              this.no = no;
              this.name = name
              this.age = age;
              console.log(typeof this.say);
              //方法
              if (typeof this.say != 'function') {
                  Person.prototype.say = function () {
                      console.log(this.name + " 哈哈哈");
                  }
              }
  
              // Person.prototype.walk = function () {
              //     console.log(this.name + " 跑的飞起......");
              // }
          }

  DOM的增、删、改、查

• 找元素

• 方法

  • getElementById

  • getElementsByClassName

  • getElementsByTagName

  • getElementsByName

  • querySelector

  • querySelectorAll

• DOM节点的属性

  • childNodes 子节点(文本节点和元素节点)

  • children 子节点 元素节点

  • firstChild

  • lastChild

  • parentNode

  • previousSibling

• nextSibling

  备注：
  节点类型：元素节点、文本节点、属性节点、注释节点.......
  节点关系：兄弟、父子

  修改页面的样式

• 获取样式

  • 对象.style.样式名 行内样式

  • getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下

  • currentStyle IE低版本

  兼容性写法：

• //样式的兼容性写法
          // function getStyle(o, property) {
          //     if (window.getComputedStyle) {
          //         return getComputedStyle(o)[property]
          //     }
          //     return o.currentStyle[property]
          // }
          function getStyle(o, property) {
              var tag = 'getComputedStyle' in window
              return tag ? getComputedStyle(o)[property] : o.currentStyle[property]
          }

• 修改样式

  • 节点.style.样式名=值

• 修改页面的内容

  • 修改文本内容（闭合标签、表单元素）

    • innerHTML innerText

    • value

  • 属性

    • 获取

      • 节点.属性名

      • 节点[属性名]

      • 节点.getAttribute(属性名)

    • 设置

      • 节点.属性名=值

      • 节点[属性名]=值

      • 节点.setAttribute(属性名,值)

      • 三种属性方案的区别：
        	getAttribute和setAttribute可以获取自定义标签属性的值	

        页面节点操作

      • 创建节点：

        • createElement 创建元素节点

        • createTextNode 创建文本节点

      • 增

        • appendChild 末尾追加子元素

        • insertBefore 指定位置插入元素

        • var o = document.querySelector("#box")
                  var op = document.createElement('p')
                  op.innerHTML = 'hello world';
                  o.appendChild(op)
          
                  var op1 = document.createElement('p')
                  op1.innerHTML = '你好，';
                  o.appendChild(op1)
          
                  var myLink=document.createElement("a")
                  myLink.href='#'
                  myLink.innerHTML='我是超链接'
                  // o.appendChild(myLink)
                  o.insertBefore(myLink,op1)

        • 删

          • removeChild

          • remove

        • 改

          • replaceChild() 替换

• 事件

  • 事件的机制：事件不会自动执行，需要触发才可以执行

  • 添加事件

    • HTML标签中添加

    • 脚本绑定 节点.on-事件名 注意：不能为同一个节点对象添加多个同名事件

    • 绑定

      • addEventListener() 不兼容低版本IE

      • attachEvent()

  •   /*
                事件兼容性写法
                @nodeObj   事件绑定对象
                @eventName  事件名称(不含on)
                @callback   事件函数
            */
            function addEvent(nodeObj, eventName, callback) {
                if (nodeObj.addEventListener) {         //标准浏览器
                    nodeObj.addEventListener(eventName, callback, false);
                    return;
                }
                nodeObj.attachEvent('on' + eventName, callback)       //低版本IE
            }

 

移除事件

• removeEventListener

• detachEvent

• null

•  /*
              事件移除兼容性写法
              @nodeObj   事件绑定对象
              @eventName  事件名称(不含on)
              @callback   事件函数
          */
          function removeEvent(nodeObj, eventName, callback) {
              if (nodeObj.removeEventListener) {         //标准浏览器
                  nodeObj.removeEventListener(eventName, callback);
                  return;
              }
              nodeObj.detachEvent('on' + eventName, callback)       //低版本IE
          }

• 事件对象、事件流

  • 事件对象：是对事件的一个抽象表述。当事件触发时，浏览器会将事件对象传递

  • 事件对象的属性：

    • type 事件类型

    • srcElement(IE低版本)/target(标准浏览器) 事件绑定者

    • clientX/clientY

    • pageX/pageY

    • screenX/screenY

    • altKey 是否按下alt键 true/false

    • ctrlKey 是否按下了Ctrl键 true/false

    • keyCode 键码

  • 事件对象的兼容性写法：

  •     e = e || window.event;

    事件流：事件的传递机制（捕获、冒泡）

  • 冒泡：

    • 阻止事件冒泡

    •   e ? e.stopPropagation() : window.event.cancelBubble = true

      捕获：

    • 键盘事件

      • keydown keyup keypress input

    • 事件默认行为

   addEventListener()   e.preventDefault()
        节点.事件             return false;
        attachEvent()       e.returnVlaue=false

 

事件委托 :又可以称为事件代理

• 将事件委托给父元素，子元素触发事件(冒泡机制)

•  box.onclick=function(e){
              // console.log(e.target.nodeName);
              if(e.target.nodeName=='BUTTON'){
                  alert("哈哈哈哈，终于知道")
              }
              // alert("我是一个按钮")
          }
  
          document.querySelector('button').onclick = function () {
              // box.innerHTML =box.innerHTML+ "<button>按钮</button>";
              var btn = document.createElement('button')
              btn.innerHTML = '按钮'
              box.appendChild(btn)
          }

  滚轮事件

• onmousewheel 谷歌、IE

  • wheelDelta 上：正值 下：负值

  •  var box = document.querySelector("div");
            box.onmousewheel = function (e) {
                // console.log(e.wheelDelta);//上 正值   下：负值
                // console.log(e.wheelDelta);
                if (e.wheelDelta > 0) {
                    console.log(1,this.offsetHeight);
                    this.style.height = this.offsetHeight - 5 + 'px'
                } else {
                    console.log(2,this.offsetHeight);
                    this.style.height = this.offsetHeight + 5 + 'px'
                }
            }

    addEventListener("DOMMouseScroll") 火狐

  • detail 上：负值 下：正值

  •  //火狐
            box.addEventListener("DOMMouseScroll", function (e) {
                // console.log(e.wheelDelta);//上 正值   下：负值
                // console.log(e.detail);      // 上：负值   下：正值
                if (e.detail < 0) {
                    console.log(1, this.offsetHeight);
                    this.style.height = this.offsetHeight - 5 + 'px'
                } else {
                    console.log(2, this.offsetHeight);
                    this.style.height = this.offsetHeight + 5 + 'px'
                }
            })

    其它事件：

    • onfocus

    • onblur

    • onresize 尺寸改变

    • ....

  •