web前端面试题总结

1.原型链:面试题

 1 <script>
 2             function c1(name) {
 3                 if(name) this.name = name;
 4             }
 5 
 6             function c2(name) {
 7                 this.name = name;
 8             }
 9 
10             function c3(name) {
11                 this.name = name || "Jhon";
12             }
13             c1.prototype.name = "Tom";
14             c2.prototype.name = "Tom";
15             c3.prototype.name = "Tom";
16             window.onload = function() {
17                 alert((new c1()).name + (new c2()).name + (new c3()).name);
18             }
19 </script>

答案是：TomundefinedJhon

prototype是函数才会有的属性

每一个对象都会从原型”继承”属性

变量对象的执行过程，参考链接：https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552190&idx=2&sn=a287b3557008fe72e4b6c1ed7135ce11&chksm=8025ae7fb7522769c897728fca97b3cc8be31e7b99ee4903457741627a23284c1a1d2017623c&scene=21#wechat_redirect

2.作用域

参考链接：http://blog.csdn.net/yueguanghaidao/article/details/9568071 包含很多作用域的例子和讲解。

参考链接：http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

没有用var声明的变量是全局变量，是顶层对象的属性。

变量声明会提前到函数的开头，变量初始化（赋值）还在原位置，只声明变量，变量的值为undefined，赋值后才会为所赋的值。

js没有块级作用域，函数内部声明的变量会覆盖同名的全局变量。

函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的

当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex="girl" ->可删除

this.age=22 ->可删除

3.闭包+作用域

看原理的时候都懂，一做题就做错。

这个链接里面的题不懂：http://blog.csdn.net/qiu265843468/article/details/70256471

4.css样式优先级

5.在ie中，mouseover有什么问题？mouseover和mouseenter的区别。

参考链接：http://blog.csdn.net/before_morning/article/details/47720475

6.margin塌陷什么时候会出现，怎么解决

1)、CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin- top会塌陷，也就是会取上下两者margin里最大值作为显示值。所以，CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

2)、但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

结论：

解决父子DIV中顶部margin cllapse的问题，需要给父div设置：

①、边框，当然可以设置边框为透明;

②、为父DIV添加padding，或者至少添加padding-top;

　　此外，还可以通过over-flow来解决，给父DIV写入：overflow:hidden

7.浏览器渲染原理，reflow和repaint的区别

参考链接：http://www.tuicool.com/articles/raQN7r

参考链接：http://www.jianshu.com/p/40c6fc1d4800

8.写一个函数，找出参数中最大的数值。考查apply(),call(),arguments

参考链接：http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html

这个链接里面的博客讲的很好，具体讲解了call()和apply()的用法和窍门。

function maxNum(){return Math.max.apply(null,arguments)}

9.单例模式

10.盒子模型

box-sizing:border-box(content+padding+border都在设定宽度和高度之内)

box-sizing:content-box(content在宽度和高度之内，padding和border都在之外设置)默认

11.jsonp跨域

1）为什么要用jsonp：由于同源策略（同协议，同域名，同端口）的限制，当不符合同源策略是，浏览器就会报错：提示跨域了。所以类比script，访问不同源的script是不会报错的，所以就模拟一个script来间接的访问跨域的地址。这种方式就是jsonp。

2）怎么用：于是，可以这么干

<body>
  <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  <script type="text/javascript">
    var s = document.createElement('script');
    s.src = 'http://localhost:8080/a.json';
    document.body.appendChild(s);
  </script>
</body>

//a.json
{
  "name": "hanzichi",
  "age": 10
}

如上代码运行，会报错，因为json不是合法的js，把上面的json数据放在一个回调函数中是最简单的方法：

<body>
  <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
  <script type="text/javascript">
    function jsonpcallback(json) {
      console.log(json);
    }
 
    var s = document.createElement('script');
    s.src = 'http://localhost:8080/a.json';
    document.body.appendChild(s);
  </script>
</body>


//a.json
jsonpcallback({
  "name": "hanzichi",
  "age": 10
});

当然，这时的a.json文件并不一定要这样命名，改成a.js也不会有一点问题。

3）jquery中怎么用及原理：jq对jsonp也进行了封装，封装在了ajax方法中，就是 jsonp的方式。

  $.ajax({
    url: 'http://localhost:8080/test.php',
    dataType: 'jsonp',
    success: function (data) {
      console.log(data);
    }
  });

//test.php
<?php
  $jsondata = '{
    "name": "hanzichi",

　 "age": 10

}';

echo $_GET['callback'].'('.$jsondata.')';

类似的封装好的方法还有几种：

// 1
$.getJSON("http://localhost:8080/test.php?callback=?", function(data) {  
  console.log(data);
});
 
// 2
$.get('http://localhost:8080/test.php', function(data) {  
  console.log(data);
}, 'jsonp');

需要注意的是getJSON方法的请求地址url需要带上callback=?，因为jq对该方法进行封装的时候并没有默认回调函数变量名为callback，于是php中$_GET[‘callback’]就找不到变量值了。

而一般的jq方法url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的。默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery200023559735575690866_1434954892929 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。二如果要写死callback名的话，可以参照上文。

总结：

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求，这就是jsonp的核心。

jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

12.怎么获取html元素的样式?

参考链接：http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

张鑫旭的博客讲解了getComputedStyle()的用法，和获取最终样式的代码。

var result=element.currentStyle? element.currentStyle : window.getComputedStyle(element, null);

13.var that=this;到底有什么用？

在that没有被重新赋值前，保留上一次的this指向对象，这样就不会出现找不到原来的对象。

13.display:flex;的用途及用法

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

这是阮一峰的博客，写的很详细。

flex:1;flex:auto;flex:0 0 25%;

14.BFC的理解

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

15.怎么判断一个对象是不是数组类型？

http://www.cnblogs.com/fogwind/p/5884684.html

16.vue声明周期

17.vue的原理

http://blog.csdn.net/u011277123/article/details/58597638

18.new

http://blog.csdn.net/u011277123/article/details/58597638

19.怎么实现继承

http://www.jb51.net/article/81766.htm

19.图片容器设置宽高比实现图片等比缩放，自适应屏幕大小

http://www.cnblogs.com/huangbx/p/css-image-geometric-scaling.html

核心：

img的父元素：position:relative;height:0;width:100%;padding-bottom:100%;(相对于宽度的百分比)

img：position:absolute;top:0;left:0;width:100%;height:100%;

20.从setTimeout与setInterval到AJAX异步

http://www.cnblogs.com/qishiyumowang/p/6380277.html

讲解了setTimeout和setInterval执行过程和Ajax的执行过程

21.XMLhttprequest

posted @ 2017-09-20 15:47 心悦诚服555 阅读(224) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

心悦诚服555

web前端面试题总结

公告