2017实习生今日头条前端面经

typeof判断

有几个结果

typeof a

结果：

string

number

boolean

undefined

object

function

一定要记住typeof null 是object

怎么判断数组

if(Object.prototype.toString.call(arr)==='[object array]')

或者

ES5

Array.isArray()

bind call apply 分别解释

bind是绑定。

用法：

var bar=fun.bind(obj);

返回的这个bar函数，它在fun这个函数上绑定this到obj对象，它返回一个新函数然后赋给bar，

这个bar会把原始函数fun()当做obj的方法来使用，可以访问obj的任意属性。

构造函数

function A (name) {
this.name = name;
}

function A (name) {
this.name = name;
return 3;
}

A.prototype.sayName = () => this.name;

var a1 = new A('123');
var a2 = A('456');

给定一个构造函数，加了return返回是什么？

如果加了return，返回的就是return 的值，而不是

一个实例对象。

加和不加new的区别是什么？

a1 是一个A对象的实例，而a2其实是undefined

这个原本的name被挂载到了window对象上了。

如何区别实例是哪个对象的

a1 和 a2 是否为A的实例

看对象的constructor属性

var a1 = new A('123');
a1.constructor;//有问题
a1 instanceof A; //判断是否为实例，true则是实例。

返回的函数就是构造函数。

而如果是a2，它是undefined，所以它会报错。

Z-index

考察z-index ，默认值是什么。 z-index的顺序规则，层级规则，以及

不同浏览器不同， IE 为0， 其他浏览器一般是auto

<div class="root">
<div class="div1">1</div>
<div class="div2">2
<div class="div3">3</div>
</div>
</div>

原理：

一旦为一个元素指定了z-index值，该元素就会建立自己的局部叠放上下文。

这意味着元素的所有后代相对于该祖先元素都有其自己的叠放顺序。 这非常类似于元素建立新包含块的方式。

.root{
background-color:white;

}
.div1{
position:absolute;
color:red;
background: white;
font-size:30px;
z-index:1;
}
.div2{
position: absolute;
color:blue;
background: white;
font-size:20px;
z-index: 2;
}
.div3{
position: absolute;
background: white;
z-index: 100;
}

尽管一个元素的后代可能在该元素的上面或下面，但是它们与其祖先元素归为一组！

如果一个元素为其后代元素建立了叠放上下文，而且该元素位于此上下文Z轴的0位置。

层级关系的比较

对于同级元素，如果前面的元素是普通文档流中的元素，如果后面的元素设置了绝对定位和z-index，后面的元素会覆盖前面的。

对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。

IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。

z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

auto是默认值，不参与层级关系的比较！

设置了

默认值规则！

如果所有节点都定义了 position:relative

z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分;

但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

all position

z-index >=1

z-index:auto (没有定义)

z-index:<0

顺序规则

对于同一层级，不管是设置z-index都为auto，或者

z-index都为同样的值，遵从顺序规则。

就是说后面的元素会覆盖前面的。

定位规则

定位元素会覆盖普通流元素。

即便跨越了层级，比如div3设置了绝对定位和z-index，但是

div2没设置，div1设置了，那现在处于同一级的就是div2和div3了。

.div1{
position:absolute;
background: white;
color:red;
font-size:30px;
z-index:1;
}
.div2{

background: white;
color:blue;
font-size:20px;

}
.div3{
position: absolute;
z-index: 1;
top:20px;
background: white;
}

可以设置div3的top使得div3会默认覆盖div1

自适应宽度三等分布局

浮动布局啊

.container{
float:left;
background-color:red;
height: 50%;
width: 67%;
}
.left{
float: left;
background-color: yellow;
width:50%;
height: 50%;
}
.right{
float: right;
background-color: blue;
width: 50%;
height: 50%;
}
.secondary{
width: 33%;
background-color: black;
height: 50%;
float: right;
}

算法

给一个数组[-3, 4,5,9,108, 543, 10000]

它是有序且不重复的。

从数组中取出4个数，使得和为一个给定值实

function sum(arr,N,sum){

}

事件委托

var ul=document.getElementById('ul');

ul.addEventListener('click',findLi,false);

function findLi(event){
var lists=document.querySelectorAll('ul li');
for(var i=0,len=lists.length;i<len;i++){
if(event.target===lists[i]){
console.log(lists[i]);
}
}
}

跨域

A.com

B.com

浏览器同源策略

牢记：只要协议schema ，域名，子域名，端口有一个不同的都是跨域！

而且跨域问题上，域仅仅是通过URL的首部来识别的，而不会去尝试判断两个域是否在同一个IP上(这涉及到DNS解析)

网络响应

HTTP

301 重定向

304 资源没有修改，直接从缓存返回资源

requirejs循环依赖

requirejs怎么解决循环依赖？

循环依赖

即两个模块之间相互依赖，即a依赖b，b依赖a，

那么这种情况下当b的模块函数被调用时，

将会提示模块a undefined

例如：

define(['jQuery','a'],function($,a){
return {
loading:function(data){
a.addBag(data);
}
}
});

此时b可能被其他模块调用了，例如：

require(['b'],function(b){
//...
});

这样在第一个文件中的a就是undefined了。

解决

用require方法获取，需要把require作为依赖注入进来

define(['require','jquery','a'],function(require,jquery,a){
return {
loading:function(data){
require('a').addBag(data);
}
};
});

Canavs

beginPath

closePath 有什么用

closePath是关闭路径的API，如果它将当前点与起点进行连线，形成一个封闭图形。

画两条平行线 怎么画

如果没有closePath会怎样。

React

shouldComponentUpdate