那些年我们前端面试中经常被问到的题！（二）

箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。(无法改变this指向)

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

箭头函数没有原型属性

var a = ()=>{
  return 1;
}
function b(){
  return 2;
}
console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

箭头函数不能当做Generator函数,不能使用yield关键字

总结:

• 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
• 普通函数的this指向调用它的那个对象

9.vue里子组件如何向父组件传值

通过this.$emit定义一个方法,父组件通过this.$on来触发

10.js怎么判断一个对象是不是一个对象

instanceof操作符

var obj = {};
alert(obj instanceof Object); // true

对象的constructor属性

var obj = {};
alert(obj.constructor === Object); // true

Object.prototype.toString.call(obj) === '[Object Object]'

$.isPlainObject(Array)

11.es7新增了什么

1、Array.prototype.includes()方法

该方法接收两个参数：要搜索的值和搜索的开始索引。
 当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。
 ['a', 'b', 'c', 'd'].includes('b')         // true
 ['a', 'b', 'c', 'd'].includes('b', 1)      // true
 ['a', 'b', 'c', 'd'].includes('b', 2)      // false
 ES6里数组的另一个方法indexOf与其区别：
 1、简便性：
 　　indexOf返回的是某个元素在数组中的下标值，若想判断某个元素是否在数组里，我们还需要做额外的处理，即判断该返回值是否>-1。而includes则不用，它直接返回的便是Boolean型的结果。
 2、精确性
 两者使用的都是 === 操作符来做值的比较。
 但是includes()方法有一点不同，两个NaN被认为是相等的，即使在NaN === NaN结果是false的情况下。
 这一点和indexOf()的行为不同，indexOf()严格使用===判断。
————————————————
版权声明：本文为CSDN博主「前端纸飞机」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_32442973/article/details/120738512

2、求幂运算符（**）

** 是一个用于求幂的中缀算子，比较可知，中缀符号比函数符号更简洁，这也使得它更为可取。

基本用法

3 ** 2           // 9

效果同：

Math.pow(3, 2)   // 9

12.原型链

大体上解答是:我们创造的每一个函数都有一个prototype（原型）属性。这个属性是一个指针，指向原型对 象。在默认情况下，所有的原型对象都会有一个constructor(构造函数）属性，这个属性包含一个指向prototype属相所在的指针。当调用构造函数创建一个新实例之后，该实例内部将包含一个指针（内部属性），指向构造函数的原型对象。

详细:https://juejin.im/post/5ae95290518825672c00c0a4

13.了解 JavaScript 的递归

什么时候可以用:

凡是需要您构建或遍历树状数据结构的问题基本都可以通过递归来解决

什么是递归

函数的递归就是在函数中调用自身

函数必须一步一步地接近终止条件

必须有一个终止递归的条件,否则会死循环

14.关于this的指向问题

https://www.cnblogs.com/dongcanliang/p/7054176.html

15.理解堆和栈,以及他们的区别

http://www.blogjava.net/flysky19/articles/95964.html

Jquery的ready()与Javascrpit的load()

window.onload()

必须等待网页全部加载完毕（包括图片等），然后再执行JS代码

$(document).ready()

只需要等待网页中的DOM结构加载完毕，就能执行JS代码

不想让别人盗用你的图片，访问你的服务器资源该怎么处理?

（1）设置Referer：适合不想写代码的用户，也适合喜欢开发的用户

（2）签名URL：适合喜欢开发的用户

H5和css3新特性

详情见文章:https://www.cnblogs.com/ainyi/p/9777841.html

H5 新特性

1.语义化标签：header、footer、section、nav、aside、article

2.增强型表单：input 的多个 type

3.新增表单元素：datalist、keygen、output

4.新增表单属性：placehoder、required、min 和 max

5.音频视频：audio、video

6.canvas

7.地理定位

8.拖拽

9.本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

10.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

11.WebSocket：单个 TCP 连接上进行全双工通讯的协议

CSS3 新特性

1.选择器

2.背景和边框

3.文本效果

4.2D/3D 转换

5.动画、过渡

6.多列布局

7.用户界面

ajax接收到了二进制io流的图片要怎么处理

要点:转换为blob对象

var url = serverUrlBase + "/server/images/" + mapid + "/files/png";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = "blob";
            xhr.setRequestHeader("client_type", "DESKTOP_WEB");
            xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);
            xhr.onload = function() {
                if (this.status == 200) {
                    var blob = this.response;
                    var img = document.createElement("img");
                    img.onload = function(e) {
                        window.URL.revokeObjectURL(img.src); 
                    };
                    img.src = window.URL.createObjectURL(blob);
                    $("#imgcontainer").html(img);    
                }
            }
            xhr.send();

原文地址:https://yq.aliyun.com/articles/623464

webpack打包文件太大怎么办?

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。

webpack 和 gulp对比

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

PS：简单说就一个Task Runner

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

PS：webpack is a module bundle

两者区别

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

总结

gulp应该与grunt比较，而webpack应该与browserify（网上太多资料就这么说，这么说是没有错，不过单单这样一句话并不能让人清晰明了）。

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。

详细:https://www.cnblogs.com/lovesong/p/6413546.html

闭包的作用

函数内部变量外用 || 在一个函数内部嵌套一层或多层函数

可以将内部变量外用

副作用：  

违背垃圾回收机制

ie下回造成内存泄漏

解决副作用方案：  

变量使用结束后删除（var a = 1） a = null

var obj = { a: 1}  最快最好的

sessionStorage 和 localStorage \ cookie 的区别：

git相关的知识考点

git add 干嘛的?---将需要提交的文件放到暂存区

git commit 干嘛的?---提交代码

查看历史记录怎么做?---git log

版本回退怎么做?--- git reset --hard HEAD^

发现自己回退错了,怎么取消回退?--- git reset --hard commitId

怎么撤销修改?--- git checkout --file