前端知识点汇总

null,undefined, boolean, number, string, Symbol, 对象类型。 基本数据类型存储在栈中 复杂数据类型的值存储在堆中，地址存储在栈中

2. null和undefined的区别

• null表示不存在的对象，转为数值时 Number(null) 是0
• undefined表示缺少值,转为数值时 Number(undefined) 是NaN：
  1. 当变量声明后未赋值时，默认为undefined
  2. 调用函数时，应该提供的参数没有提供，该参数等于undefined
  3. 对象没有赋值的属性，该属性的值为undefined

  var a ={}; a.name; // undefined
  

  4. 函数没有返回值时，默认返回undefined

  var f = f(); f // undefined
  

3. 判断js数据类型的方式，各自优缺点

1. typeof：可准确判断基本数据类型，但null除外，因为 typeof(null) 返回Object；无法准确判断复杂数据类型，亲测返回的都是object
2. instanceof：可准确判断复杂数据类型，但无法准确判断基本数据类型，原理是通过原型链层层查找、判断

   var a = 'aaaa';
       typeof(a);  // string
       a instanceof String;  // false
   
       var b = new String();
       typeof(b); //Object
       b instanceof String; // true
   复制代码

3. constructor： 通过prototype原型上的constructor属性判断 var f = function(){}; f.constructor // Function() 但这种方法不适用于null和undefined，以为他们是无效对象，不存在constructor 此外，函数的 constructor 是不稳定的，会被人为修改prototype，那么原有的 constructor 引用会丢失
4. toString： 该方法是最通用，但是写法最繁琐的

   var a = {name:'a', age: 10}; Object.prototype.toString.call(a); //[object Object]
   var b = [1,2,3]; Object.prototype.toString.call(a);  //[object Array]
   复制代码

4. 设计模式

1. 工厂模式：在函数内创建一个对象，给对象赋予属性和方法后再将对象返回

   function Parent(){
       var Child = new Object();
       Child.name = 'YY';
       Child.age = 24;
       Child.sex = function(){
           return '女';
       }
       return Child;
   }
   
   var x = Parent();
   console.log(x.name);  //YY
   console.log(x.sex()); //女
   复制代码

   2. 构造函数模式：无需再函数内部重新创建对象， 而使用this指代

   function Parent(){
       var Child = new Object();
       this.name = 'YY';
       this.age = 24;
       Child.sex = function(){
           return '女';
       }
       return Child;
   }
   
   var x = new Parent();
   console.log(x.name);  //YY
   console.log(x.sex()); //女
   复制代码

   3. 原型模式：函数中不对属性进行定义，利用prototype属性对属性进行定义，可以让所有对象实例共享它所包含的属性及方法。

   function Parent(){   
       Parent.prototype.name="YY";  
       Parent.prototype.age=24;  
       Parent.prototype.sex=function(){
           return '女';
       }
   }
   
   var x = new Parent();
   console.log(x.name);  //YY
   console.log(x.sex()); //女
   复制代码

   4. 混合模式：原型模式+构造函数模式。这种模式中，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。

   function Parent(){  
       this.name="ZXJ";  
       this.age=24;  
   };
   Parent.prototype.sayname=function(){  
       return this.name;  
   };
   
   var  x =new  Parent(); 
   alert(x.sayname());   //ZXJ
   复制代码

   5. 动态原型模式：将所有信息封装在了构造函数中，而通过构造函数中初始化原型，这个可以通过判断该方法是否有效而选择是否需要初始化原型

   function Parent(){  
       this.name="ZXJ";  
       this.age=24;  
       if(typeof Parent._sayname=="undefined"){     
           Parent.prototype.sayname=function(){  
           return this.name;  
       }  
       Parent._sayname=true;  
       }  
   }
   
   var  x =new  Parent();  
   alert(x.sayname()); 
   复制代码

5. new一个对象的详细过程： new Person();

1. var obj = {};  //创建一个空对象
2. obj.__proto__ = Person.prototype;  //设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象
3. Person.call(obj);  //使用新对象调用函数，函数中的this被指向新实例对象
4. 将初始化完毕的新对象地址，保存在等号左边的变量中
复制代码

6. css伪类用一个冒号表示，伪元素则用两个冒号表示

伪类 :hover :active :first-child :visited

伪元素

• ::after
• ::before
• ::first-line //文本的首行添加特殊样式
• ::first-letter //文本的首字母添加特殊样式

7. 垂直居中的几种方案

1. 父容器设置

display: table-cell; 
vertical-align: middle;
复制代码

2. flex布局 父容器设置

display: flex;
justify-content: center;
align-items: center;
复制代码

3. 相对定位加transform 自身设置

position: relative;
top: 50%;
transform: translateY(-50%);
复制代码

4. display box 父容器设置

display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center;
复制代码