前端基础知识梳理

JavaScript部分

1.AJAX请求数据的步骤是什么？传输的数据是用的暗文还是明文？

1. 步骤

• 1. new一个XMLHttpRequest对象
• 2. 使用open()函数设置请求的方式，地址，是否异步
• 3. 使用setRequestHeader("Content-Type","application/x-www-form-urlencoded")设置请求头（post请求使用）
• 4. 使用send(year=2016&term=1)发送参数
• 5. 使用onreadstatechange = function(){}监听异步事件
• 6. 异步回调有几种状态 xhr.readState值
• • 0：初始化，对象已经创建，但还未初始化，还没有调用open方法
• • 1：以打开，创建已经创建并初始化，但是还是没有调用send()方法。
• • 2: 已发送，已经调用send()方法，但是该对象正在等待状态码和头的返回
• • 3：正在接收，已经接收到了部分的数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整
• • 4：已加载，所有数据接收完毕
• 7. 使用xhr.status可以检测服务器返回的响应报文的状态码是否是200

    var xhr;
    xhr = new XMLHttpRequest();//创建一个异步对象
    //open（）函数，第一个参数表示发送请求的方式，第二个参数表示请求数据的地址，第三个参数表示请求是同步还是异步
    xhr.open("post","http://192.168.230.25:3000/api/grade");
    //设置发送的请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //设置浏览器不使用缓存
    // xhr.setRequestHeader("If-Modified-Since","0");
    //检测服务端是否将数据返回给客户端

    //发送异步对象
    console.log('0')
    xhr.send("year=2016&term=2");
    xhr.onreadystatechange = function() {
        console.log('1')
        if (xhr.readyState == 4 && xhr.status ==200 ) {
            console.log('2')
            //检测服务端返回相应报文的状态码是200
            console.log(xhr.responseText);
        }
    }

2.如何实现跨域?

1. 浏览器同源策略

• 源(origin)将是协议，域名，宽口号。若url中的协议，域名，端口号相同的话，将属于同源。
• 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权下，不能读取对方的资源。
• 不受同源策略的限制：页面中的链接，重定向，表单提交是不会受到同源策略限制的。
• 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入页面中的

<script src="..."></script>,<img>,<link>,<iframe>等。·

2. 什么是跨域？为什么要跨域？

• 我们请求的url必须于浏览器上的url处于同一域上，否则就会产生跨域的问题。

3. 解决跨域的方式

• jsonp:
• • ajax直接请求普通文件的时候由于跨域的问题无权访问，不管是数据还是静态页面。
• • 不过在调用js文件的时候又不受跨域的影响，比如引入jQuery框架等。
• • 凡事具有src的属性的标签都具有跨域如：script img iframe
• • 如果向通过纯前端的方式处理跨域的话，和只能将远程服务器上的数据封装在一个js格式的文件里
• • json是一个轻量级的数据格式，并且被js支持
• • 为了便于客户端使用数据，逐渐成文一个正式的传输协议，人们讲它成文jsonp.该协议的一个特点将是允许用户传递一个callback参数给服务器

前端代码
<script>

    var message = function (data) {  //服务端返回message函数的调用，参数是需要返回的数据，
        console.log(data)
    }
    var url = 'http://192.168.230.225:8088/jsonp?name=name'
    var script = document.createElement('script') //使用js动态创建script标签
    script.setAttribute('src',url); //给动态创建的script标签添加一个src属性
    document.getElementsByTagName('head')[0].appendChild(script);  
</script>

服务端的代码

var express = require('express')
var router = express.Router()
router.get('/',function(rea,res,next){
    var data1 = req.query.name  //接收用户的参数
    var data = {  //将需要返回的数据封装在一个参数中，并将这个参数转换为json格式
        "status":"0"
    }

    data = JSON.stringify(data)

    //使用字符串拼接的方式产生一个函数的调用
    var callback = 'message' + '(' + data );'
    res.end(callback) //返回函数的调用，参数将是服务端返回的数据

})

module.exports = router

• • jsonp的优点：兼容性高，不需要XMLHttpRequest的支持；能够直接访问并响应文本，支持浏览器和服务器之间的双向通信
• • jsonp的缺点：是从其他域中加载执行的代码，容易加载其他恶意的代码。只支持get请求，不支持post请求，并只支持http请求，并不支持不同域的两个页面之间的数据请求

3.作用域和闭包

1. 作用域：

• 作用域，作用域是真对变量的，当我们创建一个函数a1，函数里边又包含另一个函数a2，此时就存在三个作用域。
• 作用域链，当变量a1在查找变量的时候，会先从自身的做作用域开始查找，如果查找不到的话，找不到会再到上一级a2去查找，如果还没有找到的话，将会去全局作用域去查找，这样就形成了一个作用域链。
• js垃圾回收机制：当一个函数执行完毕之后，其作用域会被收回，如果形成了闭包，作用域将不会被收回。
• 闭包：如果某个函数被他父函数之外的一个变量引用，将会形成闭包。
• 闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁

<script>    

//闭包

function makeFunc(){

    var name = 'sunmingming'
    function displayName() {
        alert(name)  //自己作用域中没有name，就会去父作用域中寻找name
    }
    // alert('aa')
    // return displayName;
    displayName()
    }

    makeFunc()

    // var myFunc = makeFunc();

    // myFunc();

</script>

4.什么是原型链？

• Javascript 是面向对象的，每个实例对象都有一个_proto属性，该属性指向它原型对象，这个实例对象
  的构造函数有一个原型属性 prototype，与实例的proto属性指向同一个对象。当一个对象在查找一个属性的时，
  自身没有就会根据proto 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到
  Object.prototype.proto为 nul，这样也就形成了原型链。

5.实现继承的方法有什么？

初始化一个父类

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

1. 原型链继承

• 核心：将父类的示例作为子类的原型

6.什么是事件冒泡/捕获？

1. 事件冒泡：子元素事件会触发影响父元素的事件

• 开启事件冒泡：element.addEventListener(eventName,handler,false);
• 关闭时间冒泡：假设传统方式的事件返回值是e,将可以通过e.stopPropagation()来关闭时间冒泡；

2. 事件捕获：父元素的事件会因性格I昂子元素的事件；
   开启事件捕获：element.addEventListener(eventName,hander,true)

7.说说事件委托机制？这样有什么好处?

1. 事件委托将是本来是自己该做的事，结果自己没有做，交给别人做，着就加时间委托。比如，一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击时间，让自己家的父节点来监控自己的点击时间。

• 好处：A.提高性能B.新添加的元素还会有之前的事件

8.请列举字符串操作的方法？

1. charCodeAt 方法返回一个整数，代表指定位置字符的Unicode编码；
2. charAt 方法返回指定索引出的字符，如果超出索引就会返回空字符串
3. slice 方法返回字符串片段
4. split 将一个字符串分割为子字符串，然后结果作为赐福船数组返回。

9.说说==和===的区别？

1. ==判断内容是否相等，不比较类型
2. ===判断内容相等，且类型也相等

10.如何判断一个数组是数组？

1. [] instanceof Array true/false
2. arr.constructor == Array true/false
3. Array.isArray() true/false

11.如何理解jquery？

1. jquery兼容css3兼容各种浏览器版本 javascript query

12.jquery.on()这个方法

1. jquery.on()是官方推荐的绑定事件的一个方法

$(selector).on(event, childSelector, data, function, map)
多个事件绑定同一个函数

$("p").on("mouseover mouseout", function(){
    console.log('111')
})

13.表单验证传输的什么数据？明文还是暗文？如何加密？

1. GET是从服务器上请求数据，POST是发送数据到服务器，事实上，GET是吧数据参数队列加在一个URL上，值和表单是一一对应的，比如书，name=john.在队列里，值和表单用一个&符号分开，空格用+替代，特殊符号转化为十六进制的代码，GET方法会限制大小（大约为256字节），并且GET请求的数据在浏览器地址栏中可以看到，不安全。
2. POST方法可以没有大小限制的传输数据到服务器，用户在浏览器上看不到这一过程，所以post方法适合传输一些保密的数据，或者大量的数据到服务器。
3. 区别，POST是允许传输大量数据的方法，而get请求会将请求的数据赋值在网址后边然后一同送到服务器上，因此传输的数据会收到限制但是执行效率比post好
4. 总结，get方式的安全性比post差，包含机密信息的话，建议用post数据提交方式
5. 在做数据查询时，建议用get方式而在数据的添加，修改删除的时候建议用post方法

14.面向对象和类的区别？

1. 简单来说类是对象的模板

• 在js中没有类，所以在js中所谓的类就是构造函数，对象就是由构造函数创建出来的示例对象。

2. 面向对象的三大特征：

• 抽象性：需要通过核心数据和特定环境才能描述对象的具体意义
• 封装性：封装就是将数据和功能组合在一起，在js中对象就是键值对的集合，对象将属性和方法封装起来，方法将过程封装起来。
• 继承性：将别人的属性和方法成为自己的，传统继承基于类，js中的继承基于构造函数。

3. 对象的概念，面向对象编程的程序实际上就是多个对象的集合，我们可以将所有的事都抽象成对象，在程序设计中：对象=属性+方法，属性就是对象的数据，而方法就是对象的行为。
4. 类的概念，类是对象的模板，而对象是类的实例化，。==。

15.在js的计时器运行原理是怎么样的。为什么可以触发计时效果》计时器是多线程吗？

1. js引擎只有一个线程，强迫异步事件排队等待被执行。
2. setTimeout和setInterval本质上不同的地方是他们是如何执行异步代码的。
3. setTimeout:

• setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()用于取消这个函数的执行

4. setInterval:

• setInterval的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

5. 问题1：为什么下边的代码中0出现在1之前？

setTimeout(function(){
    console.log(1);
})
console.log(0);

• 实际上，把setTimeout的第二个参数设置为0s，并不是立即执行函数的意思，只是把函数放入异步队列。浏览器先执行完同步队列里的任务，才会去执行异步队列中的任务
• 详细连接计时器详解

16.如何查找构造函数的原型中的属性？

1. 构造函数.prototype 查看构造函数的原型属性
2. 实例对象.proto查看实例对象的构造函数的原型
3. 实例对象.proto.constructor查看实例对象的构造函数

17.js中一共有几种数据类型？

1. undefined，null，boolean，string。
2. 复杂类型object,本质是一组无序的键值对组成了。

18.call和apply的区别

1. JavaScript中每一个Function对象都有一个apply()方法和一个call()方法
2. 他们的共同之处：用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
3. 使用方法：

apply()
function.apply(thisObj[, arrArray])

call()
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]

4. 定义：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象调用B对象的方法。
5. 共同之处：都可以用来代替另一个对象调用一个方法，将一个函数的对象从初始化的上下文改变为由thisObj指定的新对象。
6. 不同之处：apply最多只有两个参数--新this对象和一个数组argArray.如果给该方法传递多个参数，则把参数都写进这个数组里面，当然即使只有一个参数也要写进去，

    <script>
    
        function add(a,b){
            return a+b;
        }
        function sub(a,b){
            return a-b;
        }

        var a1 = add.apply(sub,[4,2]); //sub调用add方法 参数是传递给add方法的
        var a2 = sub.apply(add,[4,2]); //add调用sub方法
        console.log(a1)
        console.log(a2)

        var b1 = add.call(sub,4,2) //sub调用add方法
        console.log(b1)

    </script>

7. 实现继承

<script>

    function Animal(name){  //父构造函数
        this.name = name;
        this.showName = function(){
            alert(this.name)
        }
    }

    function Cat(name){ //子构造函数使用apply()实现继承父构造函数
        Animal.apply(this,[name]);
    }

    var cat = new Cat('huahua')  //实例对象

    cat.showName();  //调用方法

</script>

8. 实现多继承

<script>
    function Animal(){
        this.name = name;
        this.showName = function(a,b){
            console.log(a+b)
        }
    }

    function Tree(name){
        this.name = name;
        this.show = function(a){
            console.log(a*a)
        }
    }

    function Class(a,b){
        Animal.apply(this);//要给构造函数传参的时候在apply中传参，如果只是使用构造函数的内部方法的话就不需要传参了。
        Tree.call(this)
    }

    var class1 = new Class()

    var b1 = class1.showName(5,6);
    var b2 = class1.show(5)
</script>

19.说说对this的理解

• this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

1. 作为纯粹的函数调用，this指向全局对象
2. 作为对象的方法调用this指向调用对象
3. 作为构造函数被调用this指向新的对象（new会改变this指向）
4. apply调用this指向apply方法的第一个参数

20.对递归的认识？

• 程序调用自身的编程技巧称为递归，自己调用自己

function factorial(num) {
    return (num <= 1 ) ? 1:num * factorial(num -1);
}
console.log(factorial(8))

21.js的异步加载有哪几种方法？

1. <script>标签的async="async"属性。此种方法不能保证脚本按照顺序执行。
2. <script>标签的defer="defer"属性。兼容所有浏览器，可以保证所有设置defer的脚本按照顺序执行。
3. AJAX eval(使用ajax获得脚本，然后使用eval_r(xmlhttp.responseText)来运行脚本)。兼容所有的浏览器。
4. iframe方式

22.浏览器对象模型BOM里常用的4个对象，并列举window对象的常营方法5个？

1. 对象：windows document location screen history navigator
   方法：alert() confirm() prompt() open() close()

23.原生js的windows.onload与jquery的&(docunment).ready(function(){},$(function(){}))有什么不同？

1. 执行时间

• windows.onload必须等到页面包括图片的所有元素加载完毕之后执行
• (document).ready()是DOM结构绘制完毕之后就执行，不必等到加载完毕。

2. 编写个数不同

• windows.onload不能同时编写多个，如果有多个windows.inload方法，只会执行一个
• $(document).ready()可以同时系诶多个

24.js正则表达式

• JavaScript中的RegExp对象用于规定在文本中检索内容
• 是正则表达式的简写

var p = new RegExp("e");

//text()方法用于从文本中检索指定的值，如果在文本中存在值将返回true
p.text("wwwqeqwewq") //true
//exec()方法用于从文本中检索指定的值，如果找到就会返回所找到的值，如果没有找到的话，将会返回false。

25.html5的新表单元素？

• email tel url number search range color time date datetime month week

26.h5的本地存储是什么，声明周期有多长？

1. 特征：

• 设置，读取方便
• 容量大，sessionStorage 约为5M，localStorage约为20M
• 只能存储字符串，可以将对象json。stringify()编码之后存储

2. windows.sessionStorage

• 声明周期为关闭浏览器窗口
• 在同一个窗口下数据可以共享

3. windows.localStorage

• 永久生效，除非手动删除
• 可以多窗口共享

27.JavaScript中的事件流模型都有什么，以及怎么组织他们？

1. 原始事件模式，

• 普通的事件绑定，比如事件赋值，按钮上绑定事件等。

2. DOM2事件模型

• addEventListener('eventType','handler','true!false');
• removeEventListner('eventType','hander','true!false');

3. IE模式

• 气泡模式
• attachEvent('eventType',handler')
• detachEvent('eventType','handler')
• 与dom2不同的是eventType有On前缀