JS总结

164 阅读4分钟

克隆节点:

  p2=p1.cloneNode(true)     使用参数true表示克隆节点时包含子节点
  注意如何将克隆后的节点插入原来节点中  :  不能用已存在的节点,就是建立好的,应直接建立
  如 for(var i=0;i<ali.length;i++){
    oWrapper.appendChild(ali[i].cloneNode())
  } 

数据类型判断

  基本数据类型
    typeof
  引用数据类型
  数组 对象 
  方法 Array.isArray(ali) 判断是否是数组类型 是返回true  不是 返回false
            .constructor
            instanceof
        (1)typeof

    1.typeof 对于原始类型来说,除了 null 都可以显示正确的类型
     console.log(typeof 2);               // number
    console.log(typeof true);            // boolean
    console.log(typeof 'str');           // string
    console.log(typeof []);              // object     []数组的数据类型在 typeof 中被解释为 object
    console.log(typeof function(){});    // function
    console.log(typeof {});              // object
    console.log(typeof undefined);       // undefined
    console.log(typeof null);            // object     null 的数据类型被 typeof 解释为 object
    typeof 对于对象来说,除了函数都会显示 object,所以说 typeof 并不能准确判断变量到底是什么类型,所以想判断一个对象的正确类型,这时候可以考虑使用 instanceof
    2.instanceof
    instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
    console.log(2 instanceof Number);                    // false
    console.log(true instanceof Boolean);                // false 
    console.log('str' instanceof String);                // false  
    console.log([] instanceof Array);                    // true
    console.log(function(){} instanceof Function);       // true
    console.log({} instanceof Object);                   // true    
    // console.log(undefined instanceof Undefined);
    // console.log(null instanceof Null);
    可以看出直接的字面量值判断数据类型,instanceof可以精准判断引用数据类型(Array,Function,Object),而基本数据类型不能被instanceof精准判断。

    3.constructor
    console.log((2).constructor === Number); // true
    console.log((true).constructor === Boolean); // true
    console.log(('str').constructor === String); // true
    console.log(([]).constructor === Array); // true
    console.log((function() {}).constructor === Function); // true
    console.log(({}).constructor === Object); // true
    
    
    这里有一个坑,如果我创建一个对象,更改它的原型,constructor就会变得不可靠了
    
    
    function Fn(){};
    Fn.prototype=new Array();
     
    var f=new Fn();
     
    console.log(f.constructor===Fn);    // false
    console.log(f.constructor===Array); // true 

参考链接:juejin.cn/post/684490…

类:具有相同属性或方法的集合 又叫构造属性构造方法

  function Student(){

  }
  var s1=new Student()    类下面的实例化对象
  s1.constructor  返回类型  函数Student 
  arr.constructor == Array
  obj.constructor == Object  返回true 或 false

  arr instanceof Array  也返回 true 或 false

  类和实例化对象的应用  :
  function Student(name,age){
     this.name=name,  注意类之间的内容用 逗号 隔开
     this.age=age,
     this.eat=function(){
       console.log(this.name+'eating')
     } 
  }
  var s1=new Student('xm',20)
  调用里面的方法  s1.eat()
  可以得知 this 表示实例化出来的对象
  prototype  原型下的属性和方法可以被所有的实例化对象共享
  Student.prototype.sleep = function(){

  }
  注意 类首字母大写 每个实例化对象属性不同,因此属性放在类里面,函数放在原型下面 注意原形下也可以传this

事件 事件处理函数 事件源

  事件源:谁触发的这个事件谁就是事件源
  oDiv.onclick=function(e){
      console.log(e.target)
     //e.target就是事件源//
     //this 给谁绑定的事件谁就是this  所以 事件源不一定跟this相同//
  }

对象:

  内置对象:Array  Boolean Date Math Number String
  DOM对象 如oDiv ali里面的每一项是DOM对象
  自定义对象 var obj = {}

添加事件监听

  可以给一个元素重复添加,克服覆盖
  三个参数 第一个是事件类型 第二个事件处理函数function boolean:false事件冒泡 true事件捕获 
  oWrapper.addEventListener('click',function(){
    console.log(1)
  },false)
  oWrapper.addEventListener('click',function(){
    console.log(2)
  },false)
  事件冒泡从里向外执行,事件捕获从外向里执行。
  如果同一个元素既有捕获又有冒泡先执行捕获再执行冒泡。
  阻止事件冒泡:oWrapper.addEleventListener('click',function(e){
    e.stopPropagation();
  },false)  父元素事件不触发

  e.stopPropagation() 阻止事件冒泡
  e.preventDefault() 阻止浏览器的默认行为
  returnfalse 阻止浏览器的默认行为

事件委托 :动态生成的元素不能直接绑定事件,只能通过绑定给已存在的父元素上

  原理是事件冒泡
    ul.onclick=function(e){
      if(e.target.nodename=='LI'){//注意标签名称大写//
        console.log(e.target.innerHTML)
      }
    }

this指向

    1.事件处理函数中 this指向绑定事件的DOM元素
    2.自定义函数中 this指向window
    3.定时器 this指向window
    4.自定义对象中 this指向对象
    5.类中  this指向实例化对象
    改变this的方法
    function fn(a,b){
      console.log(this)
      console.log(a,b)
    }
    This=this
    fn.call(oDiv,1,2)
    fn.apply(oDiv,[1,2]) 传参数是数组形式的
    fn.bind(oDiv,1,2)() 方法不会自动执行,需要手动执行
    for(var i=0;i<ali.length;i++){
      ali[i].onclick=function(){
        //var This=this
        setTimeout(function(){
        //console.log(This.innerHTML)  
        }.bind(this),3000)
      }
    }

闭包

   1.两个函数  函数套函数
   2.里面的函数调用外面的函数的变量
   function f2(){
     var y=1;
     return function(){
       y++;
       console.log(y)
     }
   }
   var a=f2();
   a();//2
   a();//3
   函数的立即调用
   function f2(){
     var y=1
     (function(){
       y++
       console.log(y)
     })()
   }

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