前端面试题

前端面试问题

本套面试题由浅入深提问；
测试分支：externalChannels-frontEnd-test
测试文件：frontEndTest.html

底层原理

• javascript数据类型有哪几种？

null、undefiend、number、string、boolean、object五种类型；

• 如何确定一个值到底是什么类型，例如使用instanceof运算符；

1.三种方法确认值是什么类型，typeof、instanceof、Object.prototype.toString
2.typeof运算符可以返回一个值的数据类型（number、string、boolean、object），object对象typeof无法区分。
3.instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上（new String() instanceof String）。
4.Object.prototype.toString >>Object.prototype.toString('') =>[object Object

• null和undefined分别代表意思？null == undefined？两个等于和三个等于的区别？

null和undefined分别代表空值和未定义、null == undefined=true、比较运算符和相等运算符

• 什么是作用域？作用域有那几种？作用域链有什么特点？

var i = 5;  
function func() {  
    console.log(i);  
    if (true) {  
        var i = 6;  
    }  
}  
func(); // undefined

作用域：它是指对某一变量和方法具有访问权限的代码空间
作用域：作用域分为全局作用域和局部作用域
作用域链的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找

// 作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。
var a = 1;
function b(){
    var a = 2;
    function c(){
        var a = 3;
        console.log(a);
    }
    c(); //3
}
b(); 

使用Es6的什么属性能解决作用域问题？

let const 配合 块级作用域

• 什么是闭包？什么场景下使用闭包函数？使用ES6的属性能解决？

什么是闭包：闭包是指有权访问另外一个函数作用域中的变量的函数
闭包函数：避免全局污染、生成一个新的函数作用域
function outer() {
      var result = [];
      for （var i = 0； i<10; i++）{
        result[i] = function (num) {
             return function() {
                   console.info(num);    // 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样
             }
        }(i)
     }
     return result
}
使用ES6的属性能解决:let const

• 什么是原型链？原型链的最顶层为什么？

在javascript中，实例对象与原型之间的链接，叫做原型链。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念
原型链的最顶层：为null

• 原型链具体能干什么？

继承

• ES6语法可以实现继承？

class 中的 extends

• this指向问题？

function test(){
    var user = "中欧财富";
    console.log(this.user); //undefined
    console.log(this); //Window
}
test();
-----------------
var test1 = {
    user:'中欧财富',
    fn:function(){
        console.log(this.user);
    }
};
test1.fn(); //中欧财富
----------------
var test2 = {
     user:'中欧财富',
    fn:function(){
        console.log(this.user);
    }
};
const tempFn = test2.fn;
tempFn(); //window
//怎么解决this指向的问题？如何用ES6解决？
ES5解决方案：闭包
ES6解决方案：箭头函数、bind

• 聊一聊浅拷贝和深拷贝？

浅拷贝使用方法有：Object.assign()、Array.prototype.slice、扩展运算符..

• 深拷贝实现，递归实现深拷贝

function cloneObject(obj){
    var newObject = {};
    if(typeof obj !== object){
        return obj;
    }else{
        for(var attr in obj){
            newObject = cloneObject(obj[attr]);
        }
    }
    return newObject;
}

• call和apply的区别，它们的作用是什么？

call：接受多个参数、apply接受一个数组；作用：指定执行的上下文以及继承；

事件

• 什么是事件委托？事件委托的应用场景？

1. 事件委托（delegate）也称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上
2. 事件委托的应用场景:处理多个相同元素绑定同一个事件，可以提升到父级元素处理

• 什么是事件冒泡和事件捕获

1.事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
2.事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

浏览器

• 浏览器解析网页的工作原理？

1. 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2. 解析过程中，浏览器发现