秋招前端笔试面试的一些知识点

1.js面向对象的一整套
(1)

var a =1;
function main(){
   var a = 2;
   console.log(this.a + a);
}
function main2(){
   var a = 3;
   main();
}
main2();

最后返回3 ，main()函数虽然在另一个函数内运行，但是只要不是赋值给一个实例变量，就是相当于全局运行，this就是window，所以是1+2=3
（当函数没有被自身的对象调用时， this 的值就会变成全局对象。）
（2）函数作为方法调用
实例

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

注意
函数作为对象方法调用，会使得 this 的值成为对象本身。

(2)

function add(){
this.a = 1;
}
add.prototype.a = 5;

根据原型链顺序:
var x = new add();
x.a //1
(3)实例与类的关系
参考我之前的博客
(4)this 的深入理解
参见我其他的博客
2.作用域 （链）

function a(){this.x=0;};a.prototype.x=1;var y = new a();y.x;

//返回0 原因是作用域链会先找内部变量，找不到再去prototype里面找，本例内部找到了x就不会往外找了。
3.ES6 箭头函数this
4.call apply （可以实现继承）

function add(a,b)  
{   alert(a+b);  }  
function sub(a,b)  
{  alert(a-b);  }  
add.call(sub,3,1);   

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ；

function Animal(name){      
    this.name = name;      
    this.showName = function(){      
        alert(this.name);      
    }      
}      
function Cat(name){    
    Animal.call(this, name);    
}      
var cat = new Cat("Black Cat");     
cat.showName();  

Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了.
apply与call相同，唯一区别是call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

Animal.apply(this,[name]);

多重继承则是类似这样：

function Cat(name){    
    Animal.call(this, name);   
    Mouse.call(this,name); 
}

这样Cat就同时有了两个类的属性和方法了。
除了使用call，apply继承，主要方法是使用原型链继承，
原型链继承：

function SuperType(){  
    this.property=true;  
    }  
SuperType.prototype.getSuperValue=function(){  
    return this.property;  
    }    
function SubType(){  
    this.subproperty=false;  
    }  
//继承了SuperType  
SubType.prototype=new SuperType();
//这继承是通过创建SuperType新实例，并将这个新实例赋给SubType.prototype实现的。

实现的本质就是重写原型对象，代之以新类型的实例。

5.定时器时间为0问题

console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(1);
console.log(1);
//返回1 1 1 2 
//定时器时间为0 会前后任务全部运行结束才会运行。

//由于JavaScript是单线程处理任务的，而setTimeout是异步事件，延时时间为0的时候，JavaScript引擎会把异步事件立刻放到任务队列里，而不是立刻执行，需要等到前面处于等待状态的事件处理程序全部执行完成后再调用它

setTimeout(function(){console.log(4)},0);console.log(3);setTimeout(function(){console.log(2)},0);
console.log(1);
//3 1 4 2

6.js单线程怎么实现

js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，浏览器为这些耗时任务开辟了另外的线程每个事件都会绑定相应的回调函数，需要时会把回调函数放到任务队列里。整个程序就是通过这样的一个个事件驱动起来的。
所以说，js是一直是单线程的，浏览器才是实现异步的那个家伙。js一直在做一个工作，就是从任务队列里提取任务，放到主线程里执行。
//队列（回调函数），主线程。。

7.一道闭包的经典题目

for(var i=0;i<5;i++){setTimeout(function(){console.log(i)},1000)}   //1秒后同时输出5 5 5 5 5  
//根据之前的学习  时间如果不是1000而是0返回也是5 5 5 5 5
//想要输出0-4如何修改
for(var i=0;i<5;i++){(function(a){setTimeout(function(){console.log(a)},1000)})(i)}
//(function(a){})(i) 定义匿名函数并传参运行
//以上输出0 1 2 3 4 本质也是一个闭包传入参数i后，setTimeout内函数使用参数a，所以a的值会保存下来。

闭包的题目：

function x(m){return function(n){console.log(m+n)}};
var p = x(2);
p(4);
//6

8.实现a=“1,90,35,6”;a.max();定义一个函数可以对字符串做这种操作，返回a的最大值

//不能传参需要写在String原型上面才可以这么操作。
//在变量上调用某函数，可以在函数内用this返回此变量。
//eg:Array.prototype.max = function max(){console.log(this)} ; var x = [1,2];x.max();  
//返回[1,2]
//解答：
String.prototype.max = function(){
    var x = this;
    var  array = x.split(",");
    var array1 = array.map((elem)=>{return Number(elem)});
    array1.sort((a,b)=>{return a-b});
    console.log(array1.pop());
}
a="1,90,35,6";a.max();
//返回90

9.ajax的原生实现

10.移动端触摸事件(参见我的博客)

11.拖动某个窗口的实现

12.css html的缓存

13.http缓存

（1）与缓存有关的状态码

200 OK (from cache) 是浏览器没有跟服务器确认，直接用了浏览器缓存；
而 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性，再用的缓存。200(from cache) 是速度最快的,因为不需要访问远程服务器,直接使用本地缓存.304 的过程是, 先请求服务器, 然后服务器告诉我们这个资源没变, 浏览器再使用本地缓存.

301永久重定向
302暂时重定向

14.cookie的使用过程
15.判断列表渲染结束
16.状态码与缓存有关的是哪个
17.页面的事件都有哪些
18.cdn加速：

内容分发网络，用户可以就近取得所需的内容，提高用户访问网站的响应速度。还可以降低项目的网络资源压力。

19.js 严格模式

脚本头部添加 “use strict”;

作用：（1）消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
（2）消除代码运行的一些不安全之处，保证代码运行的安全；
（3）提高编译器效率，增加运行速度；
（4）为未来新版本的Javascript做好铺垫。

严格模式一般有以下效果：
不允许变量未申明，
x = 1;//报错 x未定义
不允许重名，不允许删除变量等等

笔试遇到：
1.input type
hidden 　 定义隐藏的输入字段
image 　　定义图像形式的提交按钮
2.点击下载资源

<a href="/i/w3school_logo_white.gif" download="w3logo">
<img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

<a>标签内href是下载资源的url，download属性内容是下载文件的重命名，下载文件时保存默认名字就是w3logo.
<a>标签里面可以是各种形式，比如图片，文字，也就是显示的内容。

3.
a标签target的特殊名称：

_blank在新窗口中打开被链接文档。
_self   默认。在相同的框架（本窗口）中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top    在整个窗口（最顶级窗口）中打开被链接文档。

4.

`http请求中OPTIONS可以获取服务器支持的HTTP请求方法，还可以用来检查服务器的性能（）。`

http请求通常有以下方法：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE等

HEAD:只请求页面的首部。
一个DELETE请求将需要从Web服务器删除的内容指定为请求行中的资源部分。那并不意味着指定的资源已经被删除了。那仅仅说明服务器接收到了删除资源的命令。

5.
css选择器的知识：

子元素选择器：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的所有strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

后代选择器：
h1 em {color:red;}
会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

相邻兄弟选择器：
选择紧接在另一个元素后的元素，而且二者有相同的父元素
h1 + p {margin-top:50px;}（只选择后面的这个p）
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素。
加号（+），即相邻兄弟结合符：
注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。

 <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
li + li {font-weight:bold;}

只会让第二个第三个li变为粗体

6.Math

Math.ceil() 向上取整（ceil是天花板的意思） Math.ceil(0.4)//1
Math.floor() 向下取整 （floor是地板的意思）Math.floor(0.6)//0
Math.round() 四舍五入 

7.js的深拷贝与浅拷贝（深浅clone）

一般使用的简单深拷贝核心就是：
  str = JSON.stringify(obj),
  newobj = JSON.parse(str); 

针对对象的copy,但不算是一个深拷贝，深拷贝需要递归。

 深拷贝不是引用而是一个新对象。
var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

上面的函数就是深拷贝数组和对象。
浅拷贝其实是旧对象的引用，一个改变另一个也改变。
一般直接把各属性复制过来就好；

8.递归

9.Object对象的方法：

Object.create() :
Creates a new object with the specified prototype object and properties.

Object.defineProperty():
Adds the named property described by a given descriptor to an object

Object.keys()
Object.values()

以上两个方法，参数是对象，分别返回一个对象的keys和values，形式是数组

set 与 get:
var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}
language.current = 'EN';
console.log(language.log); // ['EN']

var obj = {
  log: ['test'],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // Will return "test".

10.对dom节点的操作

Node节点 其实等于 通过document.getElementById()获得的对象。
var childs= s.childNodes;  //得到s的全部子节点
var childs = s.children; //得到s的全部子节点(更好)
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点

appendChild();
增加一个节点，放在最后，一般需要使用document.createElement("p")创建节点然后把他添加到父元素中去。
var  item=  document.createElement("p");
item.innerHTML = "233";
body.appendChild(item);

另有removechild() 删除某一个节点 
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
删除第一个节点

另有insertBefore() ;在已有子节点之前插入新的子节点。

11.
所谓事件冒泡，就是让DOM树最底层的目标元素最先接收到事件，然后往上传递，这是一个自下而上的过程。子元素父元素同时绑定了click事件，执行不同的动作。点击了子元素，那么子元素父元素的click事件都会执行，自下而上按顺序执行。
好吧解决问题的方法很简单，就是阻止冒泡事件。

$xxx.click(function(e) {
    e.stopPropagation();
    // ie
    e.cancelBubble = true;
})

但是某些事件类型天生就不支持事件冒泡。

12.

em 与 rem区分
em是相对于父元素font-size的 ，1em就等于父元素font-size大小。
rem是相对于html根元素font-size的

13.

事件捕获与事件冒泡
事件捕获会从document到触发事件的那个节点，即自上而下的去触发事件。而事件冒泡是自下而上的去触发事件。

<div>
<p>111</p>
</div>

点击p元素，事件捕获会从document先触发click事件，然后一路到div触发click事件，最后到p元素触发点击事件；
事件冒泡会先在p元素触发点击事件，然后是div，一路向上。

dom.addEventListener('click',func,bool);

bool参数可选，指定事件是否在捕获或冒泡阶段执行。
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
14.
文字对齐css
text-align:center; //水平对齐，左右方向对齐，left,center,right.
vertical-align:center;//垂直对齐，上下方向对齐
在table里面，想要单线边框，需要属性：

border-collapse:collapse;

一般用：

table
  {
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }

15.
subStr()与subString的区别：
stringObject.substr(start,length)；第二个参数可选，为提取子串的长度，没有第二个参数就返回到最后。

var str=”Hello world!”
document.write(str.substr(3))
//lo world!
stringObject.substring(start,stop)
提取字符串中介于两个指定下标之间的字符。
stop可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

16.
str.replace();
当参数为子字符串时，只能替换第一个匹配到的部分；

'wedwedw'.replace('w','0') //返回0edwedw 
//replace不会改变原字符串

当参数为RegExp时，分为匹配单个与全局匹配两种，

'wedwedwe'.replace('/we/','0') //返回0dwedwe
'wedwedwe'.replace('/we/g','0') //返回0d0d0
//有g 则全局匹配

str.search() ;
用于检索字符串中指定的子字符串位置，参数可为子串，也可以是需要检索的 RegExp 对象。找不到返回-1， search() 对大小写敏感.

str.search(/w3school/i)  //使用/i忽略大小写、
var str="Visit W3School!"
document.write(str.search(/w3school/i))
//返回6

str.match();未匹配到返回null;
如果没有/g方法，返回数组，第0个元素就是匹配的内容，另有其他信息；有/g方法，全局匹配，返回数组， 里面是stringObject 中所有的匹配子串。
17.

var x = (2).toString; typeof x;

最后结果是’function’
不管括号内是什么，因为被括号包裹都变成了function类型；
这也是立即运行的原理，(function(){console.log(233)})();

18.arguments与参数关系

function a(x){arguments[0]=1;console.log(x)};
a(3)；

//结果是1
当调用函数时，函数会创建arguments参数数组，这个数组跟形参没有多大关系，即使没有形参，也会有arguments.
重点：形参的值跟一一对应的arguments参数数组中的值始终保持同步的。

function doAdd(num1, num2){
 num1 = 10;
 alert(arguments[0]);
}
doAdd(5, 5); //得到10

function doAdd(num1, num2){
  arguments[0] = 10;
 alert(num1 + num2);
}
doAdd(5, 5);//得到15

arguments改变，参数值也就会改变，反过来，参数值改变，arguments也会改变。
在严格模式下，上面的做法是错误的，不能在函数内部重写arguments的值，会报错。

18.正则表达式获取匹配字符串
“adw/dw/8.9.1(adw23”获取其中的8.9.1

解答：
1."adw/dw/8.9.1(adw23".match(/\d+.\d+.\d+/)[0];
2."adw/dw/8.9.1(adw23".match(/\d+.\d+.\d+/g)[0];
知识点：
string.match(//),匹配符合的子字符串，返回符合的包含子字符串的数组；
当没有全局匹配时，返回一个数组，第一个元素是符合的子字符串；其他是相关信息；
当有全局匹配，返回数组，每个元素都是匹配到的子字符串；
\d+匹配多个位数的数字
\d只匹配一位数字
. 不是特殊符号不需要转义