JS基础面试题

1. 一句话概括一下闭包
闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
2. 说一下类的创建和继承
(1) 类的创建(es5)：new一个function，在这个function的prototype里面增加属性和方法。
比如下面创建一个动物类：

    // 定义一个动物类
    function Animal(name) {
        // 属性
        this.name = name || 'Animal';
        // 实例方法
        this.sleep = function () {
            console.log(this.name + '正在睡觉！');
        };
        // 原型方法
        Animal.prototype.eat = function (food) {
            console.log(this.name + '正在吃' + food);
        };
    }

这样就生成了一个Animal类，实例化生成对象后，有方法有属性。
(2) 类的继承（具体参照继承详解)
a、原型链继承

    function Cat() {}
    Cat.prototype = new Animal();
    Cat.prototype.name = 'Cat';
    // Test Code
    var cat = new Cat();
    console.log(cat.name); // cat
    console.log(cat.eat('fish')); // Cat正在吃fish
    console.log(cat.sleep()); // Cat正在睡觉！
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

介绍：这里我们可以看到new了一个空对象，这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。
特点：基于原型链，既是父类的实例，也是子类的实例。
缺点：无法实现多继承。
b、构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

    function Cat(name) {
        Animal.call(this);
        this.name = name || 'Tom';
    }
    // Test Code
    var cat = new Cat();
    console.log(cat.name); // Tom
    console.log(cat.sleep()); // Tom正在睡觉！
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true

特点：可以实现多继承
缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
c、实例继承和拷贝继承
实例继承：为父类实例添加新特性，作为子类实例返回；
拷贝继承：拷贝父类元素上的属性和方法。
上述两个实用性不强，不一一举例。
d、组合继承：相当于构造函数和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

    function Cat(name) {
        Animal.call(this);
        this.name = name || 'Tom';
    }
    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;
    // Test Code
    var cat = new Cat();
    console.log(cat.name); // Tom
    console.log(cat.sleep()); // Tom正在睡觉！
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

特点：可以继承实例属性/方法，也可以继承原型属性/方法
缺点：调用了两次父类构造函数，生成了两份实例。
e、寄生组合继承：通过寄生方式，砍掉父类的实例对象，这样在调用两次父类的构造函数的时候，就不会初始化两次实例方法/属性。

    // 寄生组合继承
    function Cat(name) {
        Animal.call(this);
        this.name = name || 'Tom';
    }
    (function () {
        // 创建一个没有实例方法的类
        var Super = function () {};
        Super.prototype = Animal.prototype;
        Cat.prototype = new Super();
    })();
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true

较为推荐
3. 如何解决异步回调地狱
promise、generator、async/await
4. 说说前端中的事件流
详细可参照JS中的事件顺序
HTML中与JS交互是通过事件驱动来实现的，例如鼠标点击事件click、页面的滚动事件onscroll等等，可以向文档或文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解“事件流”这个概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序，DOM2级事件流包括以下几个阶段：
事件捕获阶段 → 处于目标阶段 → 事件冒牌阶段
addEventListener：addEventListener是DOM2级事件新增的指定事件处理程序的操作。这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡。
如下例：

<html>
    <input type="button" id="doit" onclick="doit()">
</html>
<script>
    function doit(){
        console.log('我是点击事件');
    }
    document.getElementById('doit').addEventListener('click',function () {
        console.log('目前处于事件捕获阶段');
    },true);
    document.getElementById('doit').addEventListener('click',function () {
        console.log('目前处于事件冒泡阶段');
    },false);
</script>

点击按钮时输出结果为：

image.png

5. 如何让事件先冒泡后捕获
在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获之后再执行捕获事件。
6. 什么是事件委托
事件委托是指不在事件的发生地（直接DOM）上设置监听函数，而是在其父元素上设置监听函数。通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的相应。
举例：最经典的就是ul和li标签的事件监听。比如我们在添加事件时，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较适合动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
7. 什么是图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器有一定的缓解压力作用，预加载则会增加服务器前端的压力。
8. mouseover和mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发、冒泡的过程。对应的移出事件是mouseout。
mouseenter：当鼠标移出元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave。
9. JS的new操作符做了哪些事？
为函数创建新的实例，即fun = new Fun()，大致可以分为四个部分：
a、新生成了一个对象 → b、这个对象原型指向构造函数的prototype（this指向这个新对象） → c、执行构造函数中的代码（为新对象添加属性） → d、返回新对象
根据其原理，可以自己实现一个new操作符：

    function Person(name) {
        this.name = name;
    }
    var p = new Person('小明');
    console.log(p.name); // 小明
    console.log(p instanceof Person); // true

    function _new() {
        console.log(args);
        // 1、创建新对象
        let target = {};
        let [constructor, ...args] = [...arguments]; // 第一个参数是构造函数
        // 2、原型链连接
        target.__proto__ = constructor.prototype;
        // 3、将构造函数的属性和方法添加到这个新对象上
        let result = constructor.apply(target, args);
        if (result && typeof result == 'object' || typeof result == 'function'){
            // 如果构造函数返回的结果是一个对象，就返回这个对象
            return result;
        }
        // 如果构造函数返回的不是一个对象，就返回创建的新对象
        return target;
    }

    let p2 = _new(Person,'小花');
    console.log(p2.name); // 小花
    console.log(p2 instanceof Person); // true

10. 改变函数内部this指针的指向函数（bind、apply、call的区别）
详细请参考：JavaScript中call、apply与bind方法
通过apply和call改变函数的this指向，他们两个函数的第一个参数都是要改变指向的那个函数，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。
通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
11. JS的各种位置，比如clientHeight、offsetHeight、scrollTop、offsetTop、clientTop的区别
clientHeight：表示的是可视区域的高度，不包含border和滚动条；
offsetHeight：表示可视区域的高度，包含了border和滚动条；
scrollHeight：表示了所有区域的高度，包含了因为滚动而被隐藏的部分；
clientTop：表示边框border的厚度，在未指定的情况下一般为0；
scrollTop：滚动后被隐藏的高度，获取对象相对于有offsetParent属性指定的父坐标（css定位的元素或body元素）距离顶端的高度。
12. JS实现拖拽功能
首先是三个事件，分别是mousedown，mousemove，mouseup。
当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。
clientX，clientY表示鼠标的坐标，分别表示横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的初始坐标，移动的距离应该是：鼠标移动时候的坐标 - 鼠标按下去时候的坐标。
也就是说定位信息为：鼠标移动时候的坐标 - 鼠标按下去时候的坐标 + 元素初始情况下的offsetLeft。
还有一点也是原理性的东西，就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left以及top等值。
当然，也可以使用html5的拖放（drag和drop）来实现拖拽。
13. Ajax解决浏览器缓存问题
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random()。
在URL后面加上时间搓："nowtime=" + new Date().getTime()。
如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
14. JS中的垃圾回收机制
垃圾回收的必要性：由于字符串、对象和数组没有固定大小，所以当他们的大小已知时，才能对他们进行动态的存储分配。JS程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态分配了内存，最终都要释放这些内存以便他们能够被再用，否则JS的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
JS不像C++，他有自己的一套垃圾回收机制（Garbage Collection）。JS的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉。例如：

  var a = "hello world";
  var b = "world";
  var a = b; // 这时会释放掉"hello world"所占据的内存以便再用

垃圾回收的方法：标记清除、计数引用。
a、标记清除：
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为“进入环境”，从逻辑上讲，永远不能释放进入环境的变量所占的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记离开环境。
垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问，所以会被删除。最后垃圾回收器完成了内存的清除工作，并回收它们所占用的内存。
b、引用计数法：
另一种不太常见的就是引用计数法，引用计数意思就是每个值被引用的次数，当声明了一个变量，并用一个引用类型的值赋值给变量，则这个值的引用次数为1了相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用次数减1，当这个值的引用次数为0时，说明没有对象需要这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为0的这些值。
用引用计数法会存在内存泄漏，看下面的例子：

    function problem() {
        var objA = new Object();
        var objB = new Object();
        objA.someOtherObject = objB;
        objB.someOtherObject = objA;
    }

在这个例子中，objA和objB通过各自的属性相互引用，这样的话两个对象的引用次数均为2，在采用引用计数的时候，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为引用次数不为0，便不会释放其内存，这样的相互引用如果大量存在，就会导致内存泄漏。
特别是在DOM对象中，也容易存在这种问题：

    var element = document.getElementById('test');
    var myObj = new Object();
    myObj.element = element;
    element.someObject = myObj;

简单来说，只要存在相互引用，则引用计数法就容易出现内存泄漏。
15. eval的作用
eval方法的作用是将对应的字符串解析成js并执行。应尽量避免使用eval，因为比较消耗性能（一次解析成js，一次执行，要经过两次过程）
16. 什么是前端模块化
前端模块化指的是复杂的文件变成一个一个独立的模块，如js文件等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范、AMD规范、CMD规范等等，以及用于js打包（编译等处理）的工具webpack。
17. 说一说CommonJS、AMD和CMD
参考浅析JS模块规范：AMD，CMD，CommonJS
三者是目前常用的模块化书写规范。
CommonJS：
诞生较早，NodeJS就采用的是CommonJS，是这样加载模块的：

var clock = require('clock');
clock.start();

这种写法更适合于服务器端，因为服务器端请求本地磁盘中的文件速度很快。但如果是在客户端，就有可能出现“假死”。如上面的例子，客户端请求clock模块，必须等clock.js请求成功，加载完毕才可以。
AMD：
即异步模块定义（Asynchronous Module Definition），这种规范是异步的加载模块，requireJs应用了这一规范。先定义所有依赖，然后在加载完成后的回调函数中执行：require ([module], callback)
用AMD写一个模块：

require(['clock'], function(clock) {
  clock.start;
});

AMD虽然实现了异步加载，但是开始就把所有依赖写出来是不符合书写的逻辑顺序的，能不能像commonJS那样用的时候再require，而且还支持异步加载后再执行呢？
CMD：
CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});

AMD和CMD都是异步加载模块，区别在于AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；CMD则是就近依赖，需要把模块变成字符串解析一遍才知道是依赖了哪些模块。这也是CMD缺点之一，即牺牲了部分性能带来开发的便利。然而在实际情况下字符串解析时间可以忽略不计。
18. 实现一种简单的深度克隆
ES5常用的对象克隆的一种方式。注意数组是对象，但是跟对象又有一定区别，所以一开始需要判断类型，来决定newObj是对象还是数组。

    function deepClone(obj) {
        var newObj = obj instanceof Array? []: {}; // 判断克隆对象是数组还是对象，是数组则创建空数组，是对象则创建空对象
        for (var item in obj) {
            var temple = typeof obj[item] == 'object'? deepClone(obj[item]): obj[item]; // 判断对象内元素是不是对象，是对象则再调用一次deepClone
            newObj[item] = temple;
        }
        return newObj;
    }

19. JS监听对象属性的变化
假设有一个user对象：
(1) 在ES5中可以通过Object.defineProperty来实现已有属性的监听

Object.defineProperty(user,'name',{
set：function(key,value){
}
})

缺点：如果name不在user对象中，则不能监听其变化（即 强调是已有属性）
(2) 在ES6中可以通过Proxy来实现

var  user = new Proxy({}，{
set：function(target,key,value,receiver){
}
})

这样即使有属性在user中不存在，通过user.id来定义也可以监听这个属性的变化。
20. 实现一个私有变量，用getName方法可以访问，不能直接访问
通过函数的创建形式：

    function product() {
        var name = 'Novis';
        this.getName = function () {
            return name;
        };
    }
    var obj = new product();

21. ==、===以及Object.is的区别
(1) ==
存在隐式类型转换

    " "==0; //true
    "0"==0; //true
    " " !="0"; //true
    123=="123"; //true
    null==undefined; //true

(2) ===
不存在类型转换，因此对比时会将类型也包括在内："2" === 2 // false
(3) Object.is
判断两个值是否相同：Object(value1, value2)返回值：表示两个参数是否相同的布尔值。比较类似与===，但还是有一些不同，比===有了些许改进。比如：

// 使用 ‘===’
+0 === -0 //true
NaN === NaN // false
// 使用 Object.is()
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

22. JS怎么控制一次加载一张图片，加载完后再加载下一张
新建Image对象，利用onload属性来动态加载图片。

    var obj = new Image();
    obj.src = "http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
    obj.onload = function () {
        alert('图片的宽度为：' + obj.width + ' 图片的高度为' + obj.height);
        document.getElementById('mypic').innerHTML="<img src='"+this.src+"' />";
    }

23. 重排(reflow)和重绘(repaint)
重排：当渲染树中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
触发重绘的条件：改变元素的外观属性，如color、background-color等。
注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花费时间，这就是我们尽量避免使用table布局页面的原因之一。
重绘和重排的关系：在重排（回流）的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流，浏览器会重新绘制受影响的部分到屏幕中，该过程即为重绘。所以重排必定会引发重绘，但重绘不一定会引发重排。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,406评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,732评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,711评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,380评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,432评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,301评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,145评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,008评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,443评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,501评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,119评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2赞 354