前端面试常见问题2

1、盒子模型

组成部分：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

标准盒模型：box-sizing:content-box（默认）
怪异盒模型：box-sizing:border-box

1、标准盒模型与怪异（IE）盒模型区别：

IE模型元素宽度：width=content+padding+border，
标准模型元素宽度：width=content

2、BFC(块级格式化上下文)

它是页面中的一块渲染区域，并且有一套渲染规则， 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

2.1 触发BFC

https://zhuanlan.zhihu.com/p/25321647

body根元素

浮动元素：float 除 none 以外的值

绝对定位元素：position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

2.2 BFC特性及应用

1 同一个BFC下外边距会发生折叠

如两个div元素margin都为100px时，第二个div的上边距发生重叠，盒子间距离只有100px， 而不是200px,若要避免，可以将其放在不同的BFC容器中。

2 BFC 可以包含浮动的元素（清除浮动）

浮动的元素会脱离普通文档流，因此使触发元素的BFC（如：overflow:hidden），容器将会包裹着浮动元素

3 BFC可以阻止元素被浮动元素覆盖（overflow: hidden）

2、this实例、改变this指向

https://www.cnblogs.com/pssp/p/5216085.html

1、this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象， 如果this没有被上一级对象所调用，this指向window；如果被上一级对象所调用，this指向上一级对象。
2、如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
3、在严格模式中的默认的this不再是window，而是undefined
4、当this碰到return时： 如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
5、虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

2.1 改变this指向的方法

https://www.cnblogs.com/pssp/p/5215621.html

1、call()

通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。 call方法除了第一个参数以外还可以添加多个参数

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    },
    // fn:function(e,ee){
    //    console.log(this.user); //追梦子
    //    console.log(e+ee); //3
    // }
}
var b = a.fn;
b.call(a);
// b.call(a,1,2)

2、apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);
// var b = a.fn;
// var arr = [500,20];
// b.apply(a,arr);

ps:如果call和apply的第一个参数写的是null，那么this指向的是window对象

3、bind()

bind方法返回的是一个修改过后的函数。

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
var c = b.bind(a);
c();

bind也可以有多个参数，并可以在执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
    user:"追梦子",
    fn:function(e,d,f){
        console.log(this.user); //追梦子
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

call、apply与bind的区别：

1、call和apply都是改变上下文中的this并立即执行这个函数
2、bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加

3、语义化作用及标签

3.1 引入语义化标签的优点：

比div标签有更加丰富的含义，方便开发与维护

搜索引擎能更方便的识别页面的每个部分

方便其他设备解析（如移动设备、盲人阅读器等）

3.2 html5新增语义化区块标签

article: 表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

section: 是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段

nav: 表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。

aside: 所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。一般使用在页面、文章的侧边栏、广告、友情链接等区域。

header: 通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。

footer: 一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

mark: 高亮标记一段文字

time: 为了将现在的常用的日期和时间语句用规范的、利于机器识别的格式进行表述，time元素提供了一个可选的时间和时区组件。

https://www.jianshu.com/p/c41b88217834

4、正则表达式

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

5、异步代码

因为各种原因（如阻塞），很多网页API特性使用异步代码，特别是从外部的设备上获取资源，譬如，从网络获取文件， 访问数据库，从网络摄像头获得视频流，或者向VR头罩广播图像。
不等任务执行完、直接执行下一个任务。
在JavaScript代码中，经常会遇到两种异步编程风格：老派callbacks，新派promise。

5.1 异步callbacks

异步callbacks 其实就是函数，只不过是作为参数传递给那些在后台执行的其他函数. 当那些后台运行的代码结束，就调用callbacks函数，通知你工作已经完成，或者其他有趣的事情发生了。
回调经常用于获取异步任务的结果

function taskAsync = function(callback){
  var result = setTimeout(function(){
    callback('异步任务的结果')
  }, 3000)
  return result
}

taskAsync(function callback(result){
  console.log(result) // 三秒钟后，这个 callback 函数会被执行
})
otherTask()              // 立即执行其他任务，不等异步任务结束

5.2 异步promise

Promise的几种状态：

pending: 初始状态

fulfilled: 意味着操作成功完成

rejected: 意味着操作失败

Promise 对象的 then 方法绑定的处理方法（handlers）就会被调用（then方法包 含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。

let myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行！
    }, 250);
});

myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型，这里只是举个例子
    console.log("Yay! " + successMessage);
});

6、http请求方法

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

GET: 请求指定的页面信息，并返回实体主体。

HEAD: 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头

POST: 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。 POST 请求可能会导致新的资源的建立和/或已有资源的修改。

PUT: 从客户端向服务器传送的数据取代指定的文档的内容。

DELETE: 请求服务器删除指定的页面。

CONNECT: HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。

OPTIONS: 允许客户端查看服务器的性能。

TRACE: 回显服务器收到的请求，主要用于测试或诊断。

PATCH: 是对 PUT 方法的补充，用来对已知资源进行局部更新

7、变量提升与函数提升

链接：https://juejin.im/post/6844903922457395208

7.1 变量提升

变量提升仅提升声明，不提升初始化

console.log(a);
var a = 8;

// 变量提升后等价于下面代码
var a;
console.log(a) // undefined
a = 8;

var a = 8;
function fn() {
    console.log(a);
    var a = 9;
    console.log(a);
}

// 变量提升后等价于下面代码

var a = 8;
function fn() {
    var a;
    console.log(a);
    a = 9;
    console.log(a);
}

7.2 函数提升

js中创建函数有两种方式：函数声明式和函数字面量式。只有函数声明才存在函数提升。
字面量式：var fun=function test(){};

console.log(f1);  
console.log(f2);  
function f1() {}
var f2 = function() {}

// 函数提升后等价于下面代码

function f1() {}
var fn;
console.log(f1); // function f1() {}   
console.log(f2); // undefined  
f2 = function() {}

7.3 变量提升 VS 函数提升

在js代码执行前，会执行词法分析。函数运行瞬间会生成活动对象AO

1 分析形参

如果函数有形参，则给当前活动对象增加属性，赋值为undefined。

2 分析变量

1 如果AO上还没有 XXX 属性，则给当前活动对象增加属性，赋值为undefined.
2 如果AO上有 XXX 属性，则不做任何影响。

3 分析函数

1 把函数赋值给 AO.func 属性
2 如果此前 func 属性已存在，则覆盖。(证明函数的优先级比较高)

var a=2;
function a() {
    console.log(3);
}
console.log(typeof a);

// 变量提升和函数提升后，代码变为

function a() {
    console.log(3);
}
a=2;
console.log(typeof a); // number
// 此处变量a把函数a覆盖

8、brower对象

包含：Window对象、History对象、Location对象、Navigator对象、Screen对象

Window对象

弹出警告框、确认框

打开一个或多个新窗口、关闭新窗口等

打印当前页面

指定窗口大小

History对象

返回一个url的历史清单

创建前进、后退按钮

从url的历史清单转到指定的url

Location对象

返回主机名和当前url端口

返回当前页面的url

返回当前url路径名、协议部分

加载、重新载入、替代文档

跳出框架

Navigator对象

访问者的浏览器详细

Screen对象

访问者屏幕的详细

9、boolean为true

如果省略或值0，-0，null，false，NaN，undefined，或空字符串（""），该对象具有的初始值false。
所有其他值，包括任何对象，空数组（[]）或字符串"false"，都会创建一个初始值为的对象true。
创建值为 false 的 Boolean 对象
var bNoParam = new Boolean();
var bZero = new Boolean(0);
var bNull = new Boolean(null);
var bEmptyString = new Boolean('');
var bfalse = new Boolean(false);
创建值为 true 的 Boolean 对象
var btrue = new Boolean(true);
var btrueString = new Boolean('true');
var bfalseString = new Boolean('false');
var bSuLin = new Boolean('Su Lin');
var bArrayProto = new Boolean([]);
var bObjProto = new Boolean({});

10、暂时死区

11、获取元素方法

12、异步模式方法

13、canvas与svg区别

14、ES5 ES6区别

15、hasOwnProperty、isPrototypeof区别

16、concat、append、appendTo、pop区别

17、JS内置对象

18、严格模式，严格模式this指向