1. js使用typeof能得到哪些类型？
6种：undefined, string, number, boolean, object, function
2. == 和 === 有什么区别？
==会进行强制类型转换，试图让前数和后数相等。大多数情况下尽量使用===，但是在验证一个属性是否存在的时候，例如if(a==null)相当于a===null || a===undefined，需要使用==。
3. JS有哪些内置函数？
Object String Array Function Boolean Date Number RegExp
4. 什么值类型，什么是引用类型？
值类型的每个变量都能存储各自的地址，不会互相影响，例如String、Number。
引用类型的每个变量存储指向对象地址的指针，赋值时令指针指向该对象存储地址，实际数据只有一份，如Object，其特点是可以无限制扩大属性。
5. 什么是原型和原型链？
所有引用类型，除了null之外，都具有对象特性，可自由拓展属性；它们都拥有一个隐式原型和一个显式原型，其隐式原型的属性值总指向它构造函数的显式原型属性值；当试图得到一个对象的某个属性，如果对象本身没有这个属性，就回去它的隐式原型，也就是它构造函数的显式原型去寻找这个属性。如此层层连接，就构成了一条原型链。
6. 请写一个原型链继承的例子。
function a () {
this.console = function() {
console.log(‘a’)
}
}
function b () {
this.alert = function {
alert(‘b’)
}
}
b.prototype = new a();
var c = new b();
c.console();//输出a
c.alert();//输出b
7. 什么是变量提升？
在作用域中，函数声明都会被提前。
8. es5中，作用域有哪两种？
es5没有块级作用域，只有全局作用域和函数作用域。
9. 创建10个<a>标签点击时弹出来对应的序号（同理可用于setTimeout）。
//闭包、自执行函数
var i;
for(i=0;i<10;i++){
(function(i){
var a = document.createElement('a');
a.innerHtml = I+'<br/>';
a.addEventListenter('click',function(e){
alert(i);
});
document.body.appendChild(a);
})(i);
}
//或者使用块级作用域let
10. 什么是闭包？
一个函数的作用域是定义作用域而非执行作用域。常见的表现形式是函数包含在其他函数之中，能够读取其他函数内部的变量。实际应用中主要用于封装变量，收敛权限。
11. 前端使用异步的场景有哪些？
定时任务、网络请求、事件绑定。
12. js日期函数
var dt = new Date();
获取毫秒数：dt.getTime();
获取年：dt.getFullYear();
获取月：dt.getMonth();
获取日：dt.getDate();
获取星期：dt.getDay();
获取小时：dt.getHour();
获取分钟：dt.getMinutes();
获取秒数：dt.getSecond();
获取今天的下一天：
var today = new Date();
var tomorrow = new Date(today.getTime() +24*60*60*1000)
计算两个日期之间隔了多少天：
function getDays(date1, data2) {
var startDate = Date.parse(date1);
var endDate = Date.parse(date2);
var days = (endDate - startDate)/(1*24*60*60*1000);
return days;
}
13. attr和property有什么区别？
property是浏览器依照W3C标准给DOM节点规定的属性，是js对象属性；
attr是HTML标签中的属性。
14. 什么是事件冒泡？如何阻止事件冒泡？什么是事件代理？
事件冒泡：点击子节点时触发父节点绑定的事件。
阻止事件冒泡：e.stopPropagation()
事件代理：将子节点的事件绑定在父节点上，好处：减少事件绑定次数，提高性能。
15. Es6中的块级作用域
用let声明的变量是块级作用域，不存在变量提升；es6中用一对花括号就可以指定块级作用域。
16. 手动编写一个Ajax，不依赖第三方库。
var xhr = new XMLHttpRequest();
xhr.open(“GET”,”/api”,false);//false:异步，api:地址
xhr.onreadystatechange = function() {
//函数异步执行，实现每次变化都监听readyState的状态变化
If(xhr.readyState == 4) { //请求完成
If(xhr.status == 200) {//状态码200：请求成功
alert(xhr.responseText);//弹出服务器端返回数据
}
}
};
xhr.send(null);//传入作为请求数据，null就是没有请求数据。
17. 描述下cookie、sessionStorage和localStorage的区别。
三者都是本地存储；
cookie容量较小，每次都会携带到ajax中；而另外两个不会；在设置的过期时间之前一直有效；
sessionStorage在当前浏览器关闭后会被删除；而localStorage更够持久储存，浏览器关闭后不会丢失，除非主动删除。
18. 什么是跨域？有哪些解决方法？
基于浏览器的同源策略（协议、主机、端口号都要相同），浏览器会阻止一个域的javascript脚本和另一个域的内容进行交互。请求一个不同源的url即为跨域。
解决方法：iframe支持跨域；跨文档消息传输：window.postMessage API；JSONP实现跨域：动态生成js脚本。
19. 手写一个jsonp的实现。
var jsonp = function(url,param,callback){
//处理url地址,查找？，如果没有？这个变量就有一个"?"，有？这个变量接收一个&
var querystring = url.indexOf("?") == -1?"?":"&";
//处理参数{xx:xx}
for(var k in param) {
querystring += k + "=" + param[k] + '&';//?k=para[k]
}
//处理回调函数名
var random = Math.random().toString().replace(".","");
var cbval = "my_jsonp" + random;
var cb = "callback="+cbval;
querystring += cb;
var script = document.createElement("script");
script.src = url + querystring;
//挂载回调函数
window[cbval] = function(data) {
//这里执行回调的操作，用回调来处理参数
callback(data);
//拿到了就删掉这个script
document.body.removeChild(script);
};
document.body.appendChild(script);
}
jsonp(
"https://www.baidu.com",
{aa:11},
function(){
console.log(param);
}
);
20. Css优先级。
行内样式>Id选择器>类选择器>属性选择器>伪类选择器>伪元素选择器>标签选择器>通配选择器*{}
21. new一个实例的时候发生了什么？
首先，js会创建一个空的对象obj；
然后，构造函数中this指针指向该空对象obj；
其次，在构造函数中通过操作this，来给obj赋予相应的属性。修改obj的隐式原型使其指向构造函数的显示原型。
最后，如果没有return语句，返回这个经过处理的obj。
22. call apply bind的区别。
三者都是用来改变this指向的。call和apply使当执行一个方法的时候希望将其方法的作用域对象替换为另一个对象。两个方法的不同之处在于传参不一样。Bind创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定。
23. css 实现双飞翼布局
双飞翼布局：就是两端固定宽高，中间自适应的三栏布局。
方法一：flex实现。
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
}
.child_box_one{
width:200px;
}
.child_box_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
.child_box_three{
width:200px;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
方法二：定位。
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
position:relative;
}
.child_box_one{
position:absolute;
width: 200px;
left:0;
top:0;
}
.child_box_two{
margin: 0 200px;
}
.child_box_three{
position:absolute;
width: 200px;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
24. 盒模型、浏览器的兼容模式和标准模式。
盒模型：在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。
浏览器标准模式：遵循w3c标准的模式。
浏览器兼容模式：为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。两种渲染方法共存在一个浏览器上，这就是浏览器的兼容模式。
最好在头部加上doctype声明，让浏览器使用标准模式。
25.instanceof 的实现原理是什么？能手动实现一个intanceof吗？
instanced：用于判断引用类型属于哪个构造函数。
例：
f instanceof Foo //返回true，说明f继承了Foo
a instanceof Array //返回true，说明a是数组
原理：顺着原型链一层一层往上找，能否找到对应的属性，如果能找到，就返回true。
代码实现：
function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
var O = R.prototype; // 取 R 的显示原型
L = L.__proto__; // 取 L 的隐式原型
while (true) {
if (L === null)
return false;
if (O === L) // 当 O 显式原型 严格等于 L隐式原型 时，返回true
return true;
L = L.__proto__;
}
}
26. 什么是浅拷贝，什么是深拷贝？
浅拷贝：只是增加了一个指针指向已存在的内存地址；
神拷贝：增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。
27.为什么JS浮点数数值计算会产生舍入误差？
0.1和0.2转为二进制是无限循环的字符串，双精度浮点数的小数部分最多支持 52 位，两者相加后会得到的一个阶段的字符串，所以会产生舍入误差。
处理方法1: 用toFixed方法对数值进行四舍五入的操作。
处理方法2:把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂。
网友评论