# 面试总结

**Repository Path**: Jaynb/interview-summary

## Basic Information

- **Project Name**: 面试总结
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-15
- **Last Updated**: 2021-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 面试总结

### 标签语意化理解
用正确的标签做正确的事情。html语义化让页面的内容结构化、结构更清晰、便于对浏览器、搜索引擎解析；
即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO;
使阅读代码的人对网站更容易对网站分块，便于阅读维护理解

### 实现垂直剧中的方式
margin: 0 auto;
display：flex just-content: center align-item：center
父级相对定位 自己绝对定位 left 50%   margin-left再负一半
    transform：tranclate（-50%）

### rem和em
em是相对父元素的字体大小，如果父元素的字体大小是14px，那么它子元素的2em就是28px，不同父元素的子元素的2em的实际大小是可能不同的。
rem是相对于根元素，即html元素，如果html的字体大小是14px，那么在任何地方的2rem都是28px

### 清除浮动的几种方式？为什么要清除浮动呢？
除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
（1）、添加新的元素，应用clear:both;（额外标签法），在浮动的标签后面加一个标签类名{clear:both}
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
（2）、父级div定义overflow:auto;
（3）、使用：after方法，作用与浮动元素的父元素。（伪元素）
.clearfix:after{
        content:"";//设置内容为空
        height:0;//高度为0
        line-height:0;//行高为0
        display:block;//将文本转为块级元素
        visibility:hidden;//将元素隐藏
        clear:both//清除浮动
}
.clearfix{
        zoom:1;为了兼容IE(触发IE的haslayout属性) 
}
### 普通函数和箭头函数的区别
function：
（1）总是代表着它的直接调用者，如obj.fn，fn里的最外层this就是指向obj
（2）默认情况下，没有直接调用者，this指向window
（3）严格模式下（设置了'use strict'），this为undefined
（4）当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象
()=>{}
（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window
（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

### call apply bind
1. call 方法第一个参数是this的指向，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。如：getColor.call(obj, 'yellow', 'blue', 'red')
2. apply 方法接受两个参数，第一个参数是this的指向，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。如：getColor.apply(obj, ['yellow', 'blue', 'red'])
3. bind 方法和 call 方法很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。低版本浏览器没有该方法，需要自己手动实现
bind 返回的是一个新的函数
obj.myFun.call(db)；　　　　
obj.myFun.apply(db);　　　 
obj.myFun.bind(db)();　

### javascript原型？原型链？以及如何实现继承
每个对象都会在内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，就是原型链的概念
如何实现继承：
1》构造继承：比如：现在有一个”动物“对象的构造函数
　function Animal(){
　　　　this.species = "动物";
　　}
还有一个”猫“对象的构造函数
　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
 
”猫“继承”动物“
构造函数绑定：使用call()或者apply()方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：
function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物
2》原型继承：如果”猫“的prototype对象，指向一个animal的实例，那么所有猫的实例就可以继承animal了。
　Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat("大毛","黄色");
　　alert(cat1.species); // 动物
3》实例继承：
4》拷贝继承
原型prototype机制或apply和call方法去实现比较简单，建议使用构造方式和原型混合方式。
function Parent(){
         this.name = 'wang';
     }

     function Child(){
         this.age = 28;
     }
     Child.prototype = new Parent();//继承了Parent，通过原型

     var demo = new Child();
     alert(demo.age);
     alert(demo.name);//得到被继承的属性

### 介绍一下标准的CSS的盒子模型？低版本的IE的盒子模型有什么不同
     （1）、有两种：IE盒子模型、w3c盒子模型；（2）、盒模型：content(内容)、padding（内边距）、margin（外边距）、 border（边框）；（3）：区别：IE的content把padding和border计算了进去。

### 闭包
闭包：就是能够读取其他函数内部变量的函数。也可以理解成”定义在一个函数内部的函数”；
闭包的用途就是一可以读取函数内部的变量，二就是让这些变量的值始终保存在内存中。（内存会消耗过大，所以不能滥用闭包）。
简单的闭包例子：
function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

### 数组和对象的判断方式
       console.log(typeof str);//string
       console.log(typeof arr);//object
       console.log(typeof obj);//object
       console.log(typeof num);//number
       console.log(typeof b);//boolean
       console.log(typeof n);//null是一个空的对象
       console.log(typeof u);//undefined
       console.log(typeof fn);//function

       var o = { 
           'name':'lee'
         };
 var a = ['reg','blue'];
 console.log(o instanceof Object);// true
 console.log(a instanceof Array);//  true
 console.log(o instanceof Array);//  false
 注意：instaceof只可以用来判断数组和对象，不能判断string和boolean类型，要判断string和boolean类型需要采用方法四。
 由于数组也属于对象因此我们使用instanceof判断一个数组是否为对象的时候结果也会是true。如：
 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

最佳
var o = { 
          'name':'lee'
        };
var a = ['reg','blue'];
function c(name,age){
         this.name = name;
         this.age = age;
 }
var c = new c('kingw','27');
console.log(Object.prototype.toString.call(a));//[object Array]
console.log(Object.prototype.toString.call(o));//[Object Object]
console.log(Object.prototype.toString.call(c));//[Object Function]
console.log(Object.prototype.toString.call(new c));//[Object Object]

function getType(data){
	let type = typeof data;
	if(type !== "object"){
		return type
	}
	return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/,'$1')
}

### 事件冒泡 事件捕获 事件委托
冒泡：
就像我敲击了一下键盘，我在敲击键盘的同时，我是不是也敲击了这台电脑，子级元素先触发,父级元素后触发,即p先触发,div后触发。发生事件的顺序为 p -> div -> body -> html -> document。
捕获：
顺序反过来就是捕获，父级元素先触发,子级元素后触发,即div先触发,p后触发。发生事件的顺序为 document -> html -> body -> div -> p。
事件委托：
事件委托又称之为事件代理，现在有一个ul，ul里又有100个li，我想给这100个li都绑定一个点击事件，我们一般可以通过for循环来绑定，但是要是有1000个li呢？
为了提高效率和速度，所以我们这时可以采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，
我们在ul绑定事件的函数里通过一些判断，就可以给这100li都触发点击事件了。
<body>
    <ul id="isUl">
        <li id="li01">1</li>
        <li id="li02">2</li>
        <li id="li03">3</li>
    </ul>
    <script>
        function clickLi01() {
            alert('你点击了第1个li');
        }
        function clickLi02() {
            alert('你点击了第2个li');
        }
        function clickLi03() {
            alert('你点击了第3个li');
        }
        document.getElementById('isUl').addEventListener('click', function(event) {
            var srcID = event.target.id;
            if(srcID == 'li01'){
                clickLi01();
            }else if(srcID == 'li02') {
                clickLi02();
            }else if(srcID == 'li03') {
                clickLi03();
            }
        });
    </script>
</body>
### 阻止冒泡
event.stopPropagation()
老版本的IE存在兼容问题，根本不支持addEventListener()的添加事件和removeEventListener()的删除事件
// 添加事件，事件流固定为冒泡
attachEvent(事件名，事件处理函数)
// 删除事件
detachEvent(事件名，事件处理函数)
function() {
    // IE里阻止冒泡
    window.event.cancelBubble = true;
    // IE里获取事件源的id
    var srcID = window.event.srcElement.id;
}
function(event) {
    // 非IE里阻止冒泡
    event.stopPropagation();
    // 非IE里获取事件源的id
    var srcID = event.target.id;
}

###  提取URL查询字符串中的参数
function urlArgs(){
    var args = {} 
    var query = location.search.substring(1)//找到查询查询串，并去掉？
    var pairs = query.split('&')
    for(let i=0; i < pairs.length; i++){
        var pos = pairs[i].indexOf('=')
        if(pos == -1)continue
        var name = pairs[i].substring(0, pos)
        var value = pairs[i].substring(pos+1)
        value = decodeURLComponent(value)
        args[name] = value
    }
    return args
}