• 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原理:

    1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。
    2. 服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
    3. 客户端浏览器,解析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;100%;padding-bottom:100%;(相对于宽度的百分比)

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

    20.从setTimeout与setInterval到AJAX异步

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

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

    21.XMLhttprequest

     

  • 相关阅读:
    [css3]搜索框focus时变长
    [css3]文字过多以省略号显示
    HTML5表单新增属性
    [JS]getYear()和getFullYear()方法区别
    红包彩带动画效果
    ios下input focus弹出软键盘造成fixed元素位置移位
    旋转效果
    移动端前端开发
    如何加快页面加载速度
    centos7/rhel7下安装redis4.0集群
  • 原文地址:https://www.cnblogs.com/yueliangcl/p/6933694.html
Copyright © 2020-2023  润新知