中高级前端面试题
事件循环机制
同步：执行栈
异步：任务队列
1.宏任务
- 点击回调
- settimeout
2.微任务
- 当前task执行结束后立即执行的任务
- 新微任务将放到队列尾部
- promise
微任务会在下一个宏任务前，全部执行完
3.事件队列
同步任务 → 主线程（执行栈）→ 执行完成 → 任务队列
浏览器渲染
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM(Style Rules) 树。
- 将 DOM 与 CSSOM 合并成一个渲染树(Render Tree)。
- 根据渲染树(Layout)来布局，以计算每个节点的几何信息。
- 将各个节点绘制(Painting)到屏幕上
深拷贝&浅拷贝
- 首先可以通过 Object.assign 来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝。 浅拷贝就只是拷贝的对象的地址。
let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
- 另外我们还可以通过展开运算符 ... 来实现浅拷贝
let a = {
age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1
解构赋值的拷贝是浅拷贝，不能复制继承自原型对象的属性。
- 深拷贝 这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。
let a = {
age: 1,
jobs: {
first: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE
但是该方法也是有局限性的：
- 会忽略 undefined
- 会忽略 symbol
- 不能序列化函数
- 不能解决循环引用的对象
关于枚举
四个操作会忽略enumerable为false的属性。
- for...in循环：只遍历对象自身的和继承的可枚举的属性。含原型链
- Object.keys()：返回对象自身的所有可枚举的属性的键名。含原型链
- JSON.stringify()：只串行化对象自身的可枚举的属性。
- Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。
属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性。
- （1）for...in
for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
- （2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
- （3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
-
（4）object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。
-
（5）Reflect.ownKeys(obj)
Reflect.ownKeys()返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响).
js原型
1、proto ( [[Prototype]] )
对象原型链，可以直接通过属性访问；如果属性不在当前对象中，就通过原型链查找
var anotherObject = { a:2 };
//自行了解 Object.create(..) 的原理,现在只需要知道它会创建一个
对象并把这个对象的 [[Prototype]] 关联到指定的对象。
var myObject = Object.create( anotherObject );
myObject.a; // 2
myObject.__proto__ === anotherObject //true;
所有普通的 [[Prototype]] 链最终都会指向内置的 Object.prototype
都是Object实例出来的；
anotherObject 改变 myObject.a改变
myObject.a 改变后，脱离anotherObject
myObject.hasOwnProperty( "a" ); // true
**myObject.foo 总是会选择原型链中最底层的 foo 属性 **
2、prototype
所有的函数默认都会拥有一个 名为prototyp的公有并且不可枚举的属性,它会指向另一个对象 ,这个对象通常被称为 Foo 的原型
function Foo() { // ...
}
var a = new Foo();
a.__proto__ === Foo.prototype// true；
new Foo() 只是间接完成了我们的目 标:一个关联到其他对象的新对象。
3、constructor
function Foo() { // ... }
Foo.prototype.constructor === Foo; // true
//Foo.prototype 的 .constructor 属性只是 Foo 函数在声明时的默认属性。
如果 你创建了一个新对象并替换了函数默认的 .prototype
对象引用,那么新对象并不会自动获 得 .constructor 属性。
var a = new Foo();
a.constructor === Foo; // true
a.__proto__ === NothingSpecial.prototype //true;
a.constructor === Foo.prototype.constructor === Foo; // true
实际上 a 本身并没有 .constructor 属性。而且,虽然 a.constructor 确实指 向 Foo 函数,但是这个属性并不是表示 a 由 Foo“构造”.
function NothingSpecial() { console.log( "Don't mind me!" ); }
var a = new NothingSpecial();
// "Don't mind me!" a;
// {}
小结
- Object 是所有对象的爸爸，所有对象都可以通过
__proto__找到它 - Function 是所有函数的爸爸，所有函数都可以通过
__proto__找到它 - 函数的
prototype是一个对象 - 对象的
__proto__属性指向原型，__proto__将对象和原型连接起来组成了原型链
面向对象编程
JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。
所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。
Object.create()方法可以传入一个原型对象，并创建一个基于该原型的新对象，但是新对象什么属性都没有，因此，我们可以编写一个函数来创建.
下一篇，框架篇中高级前端面试题（二）框架篇
