当前位置: 首页 >> 面试题 >> 技术 >> 前端开发 >> Web前端 >>

最新2017年前端面试问题汇总

  1. call 和 apply的区别
    call方法:
    语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
    定义:调用一个对象的一个方法,以另一个对象替换当前对象。
    说明:
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

    apply方法:
    语法:apply([thisObj[,argArray]])
    定义:应用某一对象的一个方法,用另一个对象替换当前对象。
    说明:
    如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
    如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
    实例:
    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) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

    function Animal(){
    this.name = “Animal”;
    this.showName = function(){
    alert(this.name);
    }
    }

    function Cat(){
    this.name = “Cat”;
    }

    var animal = new Animal();
    var cat = new Cat();
    //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。
    //输入结果为”Cat”
    animal.showName.call(cat,”,”);
    //animal.showName.apply(cat,[]);

    call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat

    实现继承
    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的方法以及属性了.

    概括:call 和apply的作用基本相同,都可以改变一个函数的对象上下文,都可以实现对象的继承,唯一不同的地方在于调用方式,apply需要接收一个数组或者参数列表作为参数

  2. prototype是什么
    每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

  3. 数组有多少种属性方法
    push, pop, unshift, shift, concat, slice, reverse, sort, join, indexOf, splice

  4. JQ中extent的用法

  5. dispaly有几种属性
    none, block, inline, inline-block, list-item, run-in, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, inherit

  6. css显示隐藏有几种方法
    display:none, visibility:hidden (所以它只会导致浏览器重绘而不会重排), opacity:0(只是透明度为0达到隐藏效果,作用上并未隐藏)

  7. 定义函数的方法有几种,有什么不同
    function func1(){}
    var func2=function(){};
    var func3=function func4(){};
    var func5=new Function();

    第一种为最常见的定义方式—函数声明,第二种为将一匿名函数赋值给一个变量,第三种为将func4赋予变量func3,第四种为声明func5为一个对象
    由于在代码执行之前,解释器会先读取函数的声明,所以声明前调用函数并不会产生语法错误,这个特征叫做函数声明提升。

  8. HTML的加载顺序

    1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
    2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
    3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
    4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载都会阻塞加载
    5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
    6. JS、CSS中如有重定义,后定义函数将覆盖前定义函数
  9. this是什么
    this是Javascript语言的一个关键字。
    它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
    随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

  10. JQ的bind和on有什么不同
    bind(), on(), live(), delegate() 都可以向匹配的元素添加一个或者多个事件处理器
    bind()适用于所有版本,live()适用于JQ 1.8+, delegate适用于1.4.2+, on适用于1.7+
    JQ 1.7+以后官方推荐使用on来替代 bind();
    bind只能对已存在的元素进行绑定, on可以对未来元素进行绑定
    on比bind多一个参数可以过滤指定元素

  11. 请写出下列代码的执行结果

    1. function add( a,b ){
      alert( a + b );
      }

      function sub( a,b ){
      alert( a – b );
      }

      add.call( sub, 3, 1 );

    2. var value = “global var”;

      function mFunc(){
      this.value = “member var”;
      }

      function gFunc(){
      alert( this.value );
      }

      window.gFunc();
      gFunc.call( window );
      gFunc.call( new mFunc() );

    3. 输出:4;

    4. 输出:global var
      global var
      member var

  12. 请解释javascript中 a===b 语句是什么意思
    “===”叫做严格运算符,”==”叫做相等运算符。
    严格运算符的运算规则如下,
    (1)不同类型值如果两个值的类型不同,直接返回false。
    (2)同一类的原始类型值同一类型的原始类型的值(数值、字符串、布尔值)比较时,值相同就返回true,值不同就返回false。
    (3)同一类的复合类型值两个复合类型(对象、数组、函数)的数据比较时,不是比较它们的值是否相等,而是比较它们是否指向同一个对象。
    (4)undefined和nullundefined 和 null 与自身严格相等。null === null //true

  13. 请解释IE浏览器下innerHTML 和outerHTML
    innerHTML:从对象的起始位置到终止位置的全部内容,不包括Html标签。
    outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。

  14. 请解释 http请求中以下的返回码
    200, 400, 403, 404, 500, 503
    200 请求已成功,请求所希望的响应头或数据体将随此响应返回。
    400 语义有误,当前请求无法被服务器理解或请求参数有误。
    403 服务器已经理解请求,但是拒绝执行它。
    500 服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。
    503 由于临时的服务器维护或者过载,服务器当前无法处理请求。

  15. 请看下列html代码,画出在浏览器中的大概显示

       
           
         
  16. 请写出下列javascript关键字说明和用法
    typeof, undefined , null, prototype, string.split, parentElement, getElementsByName, rowIndex, nextSibling, hasChildNodes

typeof 返回一个用来表示表达式的数据类型的字符串。 "number," "string," "boolean," "object," "function," 和 "undefined"  
undefined 用于存放 JavaScript 的 undefined 值,表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。  
null 表示没有对象  (null 转为数值时为0,而undefined转为数值时为NaN)  
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html  

prototype 每个函数都有一个属性,这个属性是指向一个原型对象,原型对象包含函数实例共享的方法和属性,用作构造函数调用的时候,新创建的对象会继承属性和方法。、  
string.split 用于把字符串分割为数组  
parentElement 获取对象层次中的父对象  
getElementsByName 可返回带有指定name的对象的集合  
rowIndex 返回某一行在表格的行集合中的位置  
nextSibling 返回指定节点之后紧跟的节点,在相同的树层级中  
hasChildNodes 检查元素是否有子节点  
  1. 请解释location.replace()和location.href 的区别
    href相当于打开一个新页面,replace相当于替换当前页面
    location.replace()不在浏览器中保存跳转前的网址,因此按返回键将无效

  2. 请讲解javascript闭包的实现方法及作用
    闭包是有权访问另一个函数作用域的变量的函数
    简单的说,Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
    闭包可以用在许多地方。它的最大用处有两个:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
    示例:
    function a(){
    var n = 123456;
    return function (){
    console.info( n );
    }
    }
    var result = a()();

    for循环中的闭包问题
    function box(){
    var arr = [];
    for(var i=0; i<5; i++){
    arr[i] = function(){ return i; }
    }
    return arr;
    }
    在for循环里面的匿名函数执行 return i 语句的时候,由于匿名函数里面没有i这个变量,所以这个i他要从父级函数中寻找i,而父级函数中的i在for循环中,当找到这个i的时候,是for循环完毕的i,也就是5,所以这个box得到的是一个数组[5,5,5,5,5];

    解决方案-通过匿名函数自执行传参:
    function box(){
    var arr = [];
    for(var i=0; i<5; i++){
    arr[i] = (function(num){ return num; })(i)
    }
    return arr;
    }

  3. 请用一行代码javascript实现以下内容
    将字符串dsadsa214fsd 变成 dsadsa428fsd
    将字符串dsadsa214fsd 变成 dsadsa”2″”1″”4″fsd
    注:字符串中数字位置不确定

    “dsadsa214fsd”.replace(/\d/g, function(num){return num*2});
    “dsadsa214fsd”.replace(/\d/g, function(num){return ‘”‘+num+'”‘});

  4. 清除浮动的方式有哪几种

    1. 父级div定义 height,解决父级div无法自动获取高度的问题
    2. 结尾处加空div标签,并使用样式 clear:both
    3. 父级div定义 伪类:after 和 zoom
    4. 父级div定义 overflow:hidden
    5. 父级div定义 overflow:auto
    6. 父级div 也一起浮动
    7. 父级div定义 display:table
    8. 结尾处加 br标签 clear:both
  5. JS中使用typeof返回的类型有哪些
    string, number, function, object, boolean, undefined

  6. JS的事件委托原理是什么?常用于什么场景下
    利用冒泡的原理,把事件加到父级上,触发执行效果

  7. JS的继承方式有几种?

    1. 对象冒充
    2. call方法
    3. apply方法
    4. 原型链方法
    5. 实例继承
    6. 枚举拷贝继承

    示例:function Parent(test){
    // 基础对象
    this.name = test;
    this.say = function(){
    console.log(this.name);
    }
    }
    function Get(test, test2){
    //对象冒充
    this.method = Parent;
    this.method(test);
    delete this.method;
    this.test2 = test2;
    this.say2 = function(){
    console.info(this.test2);
    }
    }
    var parent = new Parent(‘test’);
    var get = new Get(‘gettest’, ‘getpwd’);
    parent.say();
    get.say();
    get.say2();

       function GetCall(getcallnum){  
           // call方法  
           Parent.call(this, getcallnum);  
       }  
    
       var getcall = new GetCall('getcall');  
       getcall.say();  
    
       function GetApply(getapplynum){  
           // apply方法  
           Parent.apply(this,arguments);  
       }  
       var getapply = new GetApply('getapply');  
       getapply.say();  
    
       Parent.prototype = {  
           //原形链方法  
           num: 123456,  
           sayNum: function(){  
               console.log(this.num);  
           }  
       }  
       function Child(){}  
       Child.prototype = new Parent();  
       var c = new Child();  
       c.sayNum();  
    
       function ObjTo(objnum){  
           //原型链方法  
           var obj = new Parent(objnum);  
           return obj;  
       }  
       var o = new ObjTo('objto');  
       o.say();  
    
    
       function copyTo(copytonum){  
           //枚举拷贝继承  
           var parent = new Parent(copytonum);  
           for(i in parent){  
               copyTo.prototype[i] = parent[i];  
           }  
       }  
       var c = new copyTo('copytonum');  
       c.say();  
    
  8. typeof、instanceof、Object.prototype.toString这几种方式的作用和区别?
    typeof: 在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。
    instanceof: 左操作数是一个对象,右操作数是标识对象的类,如果左侧的对象是右侧类的实例,则表达式返回true,否则返回false (可以区分array类)
    Object.prototype.toString() 返回[object class], 我们可以通过它获取对象的类型信息

  9. JS如何实现类似后台语言中的private、public、protected、static变量定义?
    静态属性,静态类:var staticClass = {id: 5, say: function(){ console.info( ‘abc’ ) }}
    公有属性,方法:function PublicClass = {this.name = ‘abc’, this.say: function(){ console.info( this.name ) }}
    私有属性,方法: function PrivateClass = {var name = ‘abc’, var say = function(){ console.info( ‘abc’ ) }}

  10. 如何解决移动端的tap事件点击穿透问题?
    起因: 移动端浏览器会在touch事件发生后300ms左右触发click方法
    解决: 不要混用touch和click方法

  11. 简要说明一下JS中如何实现封装,继承,多态

  12. 深克隆,浅克隆
    浅克隆是简单的复制对象,如果对象其中一个属性是引用型变量,就会出现这种情况,因为引用型变量保存的是内存地址,所以其实后来操作的都是同一块内存,导致了数组内容都一样。
    深克隆就是在克隆的时候判断一下属性的类型是不是引用型变量,如果是的话就用递归方法让它一层一层进去复制自己。

Loading