整理的一些常见问题

Limyes
288 阅读8分钟

1、 什么是闭包？闭包有什么作用？

var a=1;
function  (){
    a++;
    return a;
}

一个变量，一个函数，在函数里可以访问到变量，这就叫闭包，即如果一个函数引用了除了它自身内部变量外的变量，这个外部变量和这个函数就形成了一个闭包。

闭包的作用：
从外部读取函数内部变量，让这些变量始终保持在内存中：

function  fn1(n){
    return function fn2(){
        return n++;
    }
}
var fn3=fn1(1);
fn3()//1
fn3()//2

闭包使内部变量记住上一次的运算结果，不会因为没有被直接引用而被浏览器的垃圾回收机制回收。

同时闭包也可以用来封装对象的私有属性和方法：

function  fn1(n){
    return function fn2(){
        return n++;
    }
}
var fn3=fn1(1);
fn3()//1
var fn4=fn1(2);
fn4()//2
//fn3和fn4互不影响，各自返回不同的数值

2、call、apply、bind 的用法分别是什么？

相同点：
接受的第一个参数都是this，都能改变this 的指向。
区别：
call可以接受第二个，第三个，第N个参数，apply接受的第二个参数是一个数组，bind和call可以接受的参数一样，但是bind的返回值是一个函数，也就是就算传参数进去也不会立即执行，还需要再次调用执行一次函数才算真正的执行。

var obj = {
    name: 'Lim',
    age:'18'
}

function printName(gender,school) {
    console.log(this.name+this.age+gender+school)
}

printName.call(obj,'man','BBC');
printName.apply(obj,['woman','BBC']);
printName.bind(obj,'man','ORC')();

3、几个常用的HTTP状态码

状态码200表示请求成功
状态码202表示服务器成功接收请求
状态码301表示被请求的资源已经永久移动到新位置
状态码302表示被请求的资源暂时不可以访问，以后可以再访问
状态码400表示请求报文中存在语法错误
状态码404表示请求失败，请求所希望得到的资源没有在服务器上找到
状态码500表示服务器错误
状态码502表示作为网关或代理工作的服务器尝试执行请求时，从上游服务器得到无效的响应

4、写出一个http请求和响应

HTTP请求常见格式,分为四部分：
第一部分：请求方式（get/post）  路径（/path）  协议/版本号（HTTP/1.1）

第二部分：键值对（key:value）

第三部分：回车符

第四部分：请求的数据

1 POST /path HTTP/1.1
2 Host:www.baidu.com
2 Content-Length: 24
2 Content-Type: application/x-www-form-urlencoded
3 
4 username=ff&password=123

HTTP响应常见格式,分为四部分：

第一部分：协议/版本号（HTTP/1.1） 状态码   状态码解释 

第二部分：键值对（key:value）

第三部分：回车符

第四部分：响应数据（根据第二部分的Content-Type决定该部分的内容格式）

1 HTTP/1.1   200  ok
2 Content-Length: 200
2 Content-Type: text/html
3 
4 <html>...</html>

5、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

5-1.DNS解析：浏览器根据URL中的域名查找对应的IP地址。
5-2.TCP连接：浏览器根据IP地址向服务器发起TCP连接，产生三次握手：
（1）浏览器向服务器发起连接请求
（2）服务器接到请求，回复同意连接
（3）浏览器接到服务器返回的确认连接信息，再次确认，正式建立连接。
5-3.发送http请求：建立连接后，浏览器发送http请求，包括请求行，请求头，请求数据内容
5-4.服务器处理请求并返回响应内容
5-5.浏览器渲染页面：浏览器收到响应开始解析渲染页面，先解析html构建DOM树，再解析  css构建规则树，根据树然后绘制页面。
5-6.关闭连接或者继续保持连接

6、如何实现数组去重？

假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。

要求：

  1. 不要做多重循环，只能遍历一次
  2. 请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）

ES5：

var array = [1,5,2,3,4,2,3,1,3,4];
function unique(arr){
    var newArray = [];
    var hasharr={};
    for (var i = 0; i < arr.length; i++) {
        if (hasharr[arr[i] ]===undefined) {
            newArray.push(arr[i]);
            hasharr[arr[i]]=1;
        }
    }
    return newArray;
}
unique(array);

ES6：

var array = [1,5,2,3,4,2,3,1,3,4];
function unique(arr){
  return Array.from(new Set(arr));
}
unique(array);

7、JSON 和 JavaScript 是什么关系？JSON 和 JavaScript 的区别有哪些？

关系：JSON 是一门借鉴 JavaScript 的语言，同时也是一种数据交互格式，JSON 是 JavaScript 的子集（或者说 JSON 只借鉴了一部分 JavaScript 语法，而且没有新增任何原创的语法）

区别：JSON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。
而 JavaScript 全都支持。

8、什么是 JSONP？

JSONP是一种跨域请求数据方式，原理是动态创建script标签，利用script发送请求不受同源策略限制的特性，实现的过程是：
1.请求方即浏览器在页面创建一个script标签指向响应地址，同时传递一个查询参数callback=函数名，这个函数里可以自己定义处理参数的过程
2.响应方根据前端页面传过来的查询参数，创建一个形如：函数名.call('undefined',{key:value,key:value,......})或者 函数名({key:value,key:value,......})这样的响应
3.浏览器收到响应，调用函数，按照自己定义的方式来处理接收到的数据

9、JSONP 为什么不支持 POST

因为JSONP的使用原理是动态创建script标签,利用script发送请求不受同源策略限制的特性来实现跨域请求数据，而动态创建的script标签只能发送get请求，不支持post。

10、有哪些可以发请求的标签？

form可以发post和get请求，会刷新或新打开页面 。a只能发get，会刷新或新打开页面。 img只能发get，只能以图片形式显示。 link只能发get，必须放在页面里才能发，只能以css或者favicon形式展示 。script只能发get，必须放在页面里，但是只能以脚本的形式运行。

11、什么是前端MVC？

Model(模型)-- View(视图)--Controller(控制器)
MVC 就是一种有规律的代码规范，把代码按照三层的结构进行梳理，更清晰易懂，具体就是：
Model 数据管理，包括数据逻辑、数据请求、数据存储等功能。前端 Model 主要负责 AJAX 请求或者 LocalStorage 存储
View 负责用户界面，前端 View 主要负责 HTML 渲染。
Controller 负责处理 View 的事件，并更新 Model；也负责监听 Model 的变化，并更新 View，Controller 控制其他的所有流程。
流程：
用户在视图层进行操作，然后控制器监听到视图层的操作，向模型层请求调用数据，模型层收到请求向服务器发出请求调用数据，服务器把数据响应给模型层，模型层再把数据返回给控制器，控制器更新视图层数据。

// M:1.初始化数据2.获取数据3.保存数据
var model={
    data:null,
    init:function(){},
    getData:function(){},
    saveData:function(){},
}
// V:获取视图范围
var view={
    init() {},
    template: ''}// C:1.初始化视图和模型，以及一些事件2.根据视图层操作做出响应展示更新数据或者其它3.给视图层绑定事件
var controller={
    init:function(){},
    showData:function(){},
    bindEvents:function(){},
}

12、在 ES5 中如何用函数模拟一个类？

function Person(options){
    // 此处可以添加不同的私有属性
    this.name=name
    this.age=age
        ...
}
// 此处设置Person类的公有属性
Person.prototype.walk=function(){console.log('walk')}
Person.prototype.gender="woman"

var person1=new Person({name:'hi',age:'18'})

13、怎样使用Promise？

window.myFunction=function(options){
    return new Promise(function(resolve,reject){
        if(success){
            resolve.call(this,responseText)
        }else{
            reject.call(this,errorText)
        }
    })
}

window.myFunction(options).then(
    (responseText)=>console.log(responseText),//resolve
    (errorText)=>console.log(errorText)//reject
)

14、请使用原生 JS 写出一个 AJAX 请求（代码中必须出现 XMLHttpRequest）

let  request=new XMLHttpRequest();
request.open('GET','/path');
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4){
        if(request.status>=200&&request.status<300){
            console.log('success');
        }else if(request.status>=400){
            console.log('failed');
        }
    }
}

15、关于Cookie、Session和Localstorage

cookie和session的关系 ：一般来说，session是基于cookie实现的  

cookie和Localstorage的区别 ：cookie每次都会被带给服务器，带给每个页面，但是localstorage不会，跟http无关，只被存储在本地 cookie一般最大4K左右，localstorage最大5MB 跟浏览器有关 

Localstorage和sessionStorage的区别 ：sessionStorage在用户关闭页面以后即Session（会话）结束以后就会失效，Localstorage只要用户不主动清理缓存就会永久有效 

expries和cache-control区别：expries是以前的用法，expires表示什么时候过期，cache-control表示过多久过期，expires表示的时间是用户本地时间，如果用户本地时间错乱就会出问题，所以优先使用cache-control 

ETAG和cache-control区别 ：cache-control直接不请求，ETAG请求但是不下载


avatar
文章
阅读
粉丝