十道前端面试题（4）

1. 重排重绘
2. __proto__和prototype分别是什么
3. 哪种情况下__proto__和prototype的指向是同一个？
4. 原型链原理
5. 在原型链上Object再往上是什么
6. new和Object.create的区别
7. typeof array null undefined NaN分别是什么
8. 把undefined和null转成Number分别是什么
9. 如何判断是否为数组？
10. instanceof和constructor的区别

---

1. 重排、重绘

1. 重排
   重排是根据渲染树中每个渲染对象的信息，计算出各个渲染对象的几何信息（即DOM对象的位置和尺寸大小），将各个渲染对象放置在页面的正确位置。
   某个DOM节点的几何信息更改，就需要重新计算，然后重新布局。即导致重排。
   引发重排的操作：

• 页面的首次渲染
• 浏览器的窗口大小发生改变
• DOM元素位置和尺寸发生改变
• 元素的内容发生改变（比如：文字数量或图片大小等）
• 文本元素字体大小发生改变
• 添加或删除可见的DOM元素
• 激活CSS的伪类（比如：:hover）
• 设置style属性(width,height,margin,padding,border等等)
• 查询某些属性或调用某些方法(scrollIntoView(),scrollTo(),scrollIntoView()等等)

2. 重绘
   重绘是当页面元素的样式改变且不影响该元素在文档流中的位置就会发生重绘。比如，改变元素的颜色等
   常见引起重回的样式属性有：

• color
• border-style
• visibility
• background
• text-decoration
• background-image
• background-position
• background-repeat
• outline-color
• outline
• outline-style
• border-radius
• outline-width
• box-shadow
• background-size

补充：DOM操作是一项高成本的操作，尽量减少重排。

---

2. __proto__和prototype分别是什么

其实可以理解为prototype是构造函数的属性，__proto__是实例对象的属性，他们都指向同一个对象

function Person(){
}
let person1 = new Person();
person1.__proto__ === Person.prototype;       // true      

记住2点就够了

1. 每个对象都有一个__proto__属性指向它构造函数的prototype
2. 每个构造函数都有一个prototype原型对象，同样这个原型对象也有一个__proto__属性。

---

3. 哪种情况下__proto__和prototype的指向是同一个？

• Function.__proto__ === Function.prototype; // true

---

4. 原型链原理(点击查看原型链和继承相关知识)>>

---

5. 在原型链上Object再往上是什么

null
Object的实例，处于原型链的末端，因而它没有原型。

---

6. new和Object.create的区别

new一个对象发生了什么？

1. 创建了并返回一个新的对象
2. 对象内this指向这个新的对象

function F(){
	this.a = 1;
}
const obj = new F()

obj.a;    // 1

使用new操作符创建的对象具备原来对象的属性

Object.create：

1. 创建一个新对象
2. 语法Object.create ( proto, [ propertiesObject ] )

参数：

• 第一个参数proto是一个对象或者构造函数，作为新对象的原型
• 第二个参数 propertiesObject(可选),为这个新对象添加属性

function F(){
	this.a = 1;
}
const obj = Object.create(F,{
	b: {
		value: 2
	}
});

obj.a;    //  undefined
obj.b;    // 2

可见：Object.create()创建的新对象丢失了原来对象的属性

---

7. typeof array null undefined NaN分别是什么

1. typeof [数组]; // object
2. typeof null; // object
3. typeof undefined; // undefined
4. typeof NaN; //number

点击查看typeof有哪些返回值>>

---

8. 把undefined和null转成Number分别是什么

1. Number(null); // 0
2. Number(undefined); // NaN

---

9. 如何判断是否为数组？

1. 使用instanceof

const arr = [1,2,3];
arr instanceof Array;      // true

2. 使用constructor

const arr = [1,2,3];
arr.constructor === Array;      // true

3. 使用Object.prototype.toString()方法

const arr = [1,2,3];
Object.prototype.toString.call(arr)   === "[object Array]";      // true

4. 使用ES6提供的Array.isArray()方法

const arr = [1,2,3];
Array.isArray(arr);      // true

点击查看区分数组与对象的方法>>

---

10. instanceof和constructor的区别

• constructor

1. 我们创建的每一个函数都有一个prototype原型属性，这个属性是一个指针，指向一个对象。默认的情况下，所有的原型对象有一个构造函数constructor属性,这个属性是一个指向prototype属性所在函数的指针。
2. constructor属性在构造函数的原型里，并且指向构造函数，就可以利用constructor属性来判断一个实例对象是由哪个构造函数构造出来的，也可以说判断它属于哪个类。
3. ⚠️当构造函数Person.prototype等于一个字面量定义出来的对象时，constructor属性不再指向这个构造函数 Person（即原型链重写会导致constructor指向改变或constuctor不复存在）

• instanceof

1. instanceof运算符是用来判断某个实例对象是否由某个构造函数构造而来(这点和constructor的作用相同)
2. ⚠️ 但是原型链重写并不会影响instanceof的判断，因为instanceof是根据原型链来判断构造函数的，只要对象实例的原型链不发生变化，instanceof便可以正确判断
3. instanceof不仅可以判断实例对象直接的构造函数，而且还能判断原型链上所有的构造函数