js

1 js原型

js原型其实就是js的一种机制。
Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象（原型链上面的）。

prototype(对象属性)的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变(公用)的属性和方法，直接定义在prototype对象属性上。

prototype就是调用构造函数所创建的那个实例对象的原型（proto）。

prototype可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

2 js原型链 （JS原型与原型链继承）

先上图：

实例对象与原型之间的连接，叫做原型链。proto( 隐式连接 )
JS在创建对象的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。
内部原型(proto)和构造器的原型（prototype）
1、每个对象都有一个proto属性,原型链上的对象正是依靠这个属性连结在一起
2、作为一个对象，当你访问其中的一个属性或方法的时候，如果这个对象中没有这个 方法或属性，那么Javascript引擎将会访问这个对象的proto属性所指向上一个对 象，并在那个对象中查找指定的方法或属性，如果不能找到，那就会继续通过那个对象 的proto属性指向的对象进行向上查找，直到这个链表结束。

什么是闭包？闭包的用处？

（1）闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就
是将函数内部和函数外部连接起来的一座桥梁。
（2）闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

真数组和伪数组的区别

1:真数组的长度是可变的，伪数组的长度不可变
2：真数组可以使用数组中的方法（.forEach）,伪数组不可以
3：真数组可以使用原型辨别，伪数组没有__proto__和prototype
伪数组转换真数组：
(1) ES5 转为真数组 Array.prototype.slice.call(元素对象)
(2) ES6 转为真数组 Array.from（元素对象）

如何区别一个数组是真数组还是伪数组？

利用Array.isArray()这个方法
console.log(Array.isArray(真数组));//true
console.log(Array.isArray(伪数组));//false

创建对象的三种方式

1: 字面量的方式
2：调用系统的函数构造
3：自定义构造函数
实例对象

var per1={
    name:"哇咔咔",
    age:22,
    sex:"男",
    eat:function () {
        console.log("我喜欢你");
    },
    readbook:function () {
        console.log("你喜欢他");
    }
};

调用系统的函数构造

var per2=new Object();
per2.name="鸣人";
per2.age=16;
per2.sex="男";
per2.eat=function () {
    console.log("我喜欢你");
};
per2.play=function () {
    console.log("你喜欢他");
};

自定义构造函数

function person(name,age,sex) {
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.play=function () {
        console.log("我喜欢你");
    };
}
var person=new person("神奇",18,"男")

JavaScript reduce() 方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减（是个、数递减，不是值），最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose（组成）。
注意: reduce() 对于空数组是不会执行回调函数的。
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

遍历统计一串字符串中每个字母出现的次数

   var arrString = 'abcdaabc';
        console.log(arrString.split('').reduce(function (res, cur) {
            res[cur] ? res[cur]++ : res[cur] = 1
            return res;
        }, {})) 
		/// {a: 3, b: 2, c: 2, d: 1}

React 中 setState 什么时候是同步的，什么时候是异步的？

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
原因： 在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

游览器的回流和重绘 以及性能优化

1、浏览器使用流式布局模型
2、浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
3、有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上
4、由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一

一句话：回流必将引起重绘，重绘不一定会引起回流。

回流 (Reflow)

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作：
页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法
一些常用且会导致回流的属性和方法：
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
重绘 (Repaint)
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
性能影响
回流比重绘的代价要更高。
有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。
现代浏览器会对频繁的回流或重绘操作进行优化：
浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。
JavaScript
避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。