ES5/ES6的继承除了写法以外还有什么区别
ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this)).
ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用子类的构造函数修改this。
ES5的继承时通过原型或构造函数机制来实现
ES6通过class关键字定义类,里面有构造方法,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法,否则新建实例报错。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类得不到this对象。
注意super关键字指代父类的实例,即父类的this对象。
注意:在子类构造函数中,调用super后,才可使用this关键字,否则报错。
ES5 继承的写法,从原型链的角度来看更易于理解,但写法上比 ES6 的继承稍有复杂。
ES6中子类继承父类的属性使用了super关键字,ES6语法实现是ES5的语法糖,表面上 ES6的类关键字和子类继承关键字 实现的结构和ES5继承一样 但是根本还是有差别的 其中ES5继承prototype属性是先实例化父类 直接继承 而 ES6实在实例化子类对象时继承父类prototype,即实例化父类。
http状态码有哪些?分别是什么意思
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
浏览器是如何渲染页面的
浏览器从HTTP服务器获取html文档,到呈现页面给用户,会经过以下几个步骤:
1、解析文档构建DOM树
浏览器的解析内容可以分为三个部分:
HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)
CSS:解析样式表,生成CSS规则树(CSS Rule Tree)
JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM树和CSS规则树,与用户进行交互。
以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同,具体在后文进行讨论。
2、构建渲染树
解析文档完成后,浏览器引擎会将 CSS规则树 附着到DOM树上,并根据DOM树 和 CSS Rule Tree构造 Rendering Tree(渲染树)。此处需要注意:
Render Tree和DOM树的区别在于,类似Head或display:node之类的东西不会放在渲染树中;
将CSS规则树匹配到DOM树需要解析CSS的选择器,为了提高该过程的性能,DOM树应该尽量小,CSS Selector应该尽量使用id和class,避免过度层叠。
3、布局与绘制渲染树
解析position, overflow, z-index等等属性,计算每一个渲染树节点的位置和大小,此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制(repain)。注意:
渲染树的节点,在Gecko中称为frame,而在webkit中称为renderer;
reflow和repaint是两个不同的概念,其区别会在后文进行探讨。
typeof和instanceof的相同点与不同点
相同点:
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空, 或者是什么类型的
不同点:
typeof:
1.返回值是一个字符串, 用来说明变量的数据类型。
2.typeof 一般只能返回如下几个结果: number, boolean, string, function, object, undefined。
instanceof:
1.返回值为布尔值;
2. instanceof 用于判断一个变量是否属于某个对象的实例。
如何解决回调地狱?请手写代码
一、拆解function
function methodOne() {
fs.readFile(url, (err, content) => {
// do some thing
})
}
function methodTwo() {
fs.readFile(url, (err, content) => {
// do some thing
methodOne()
})
}
fs.readFile(url, (err, content) => {
if(!err) {
methodTwo()
}
})
二、事件发布/监听模式
前端常见面试题(七)@郝晨光实现异步的几种方法中3. 发布者订阅者模式;
三、Promise
function syncMethod() {
return new Promise((reslove, reject) => {
if(true) {
reslove('success! do some thing')
}else {
reject('error message!')
}
})
}
syncMethod().then(res => {
console.log(res);
return syncMethod();
}).then(res => {
console.log(res);
})
四、Generator
function *syncMethod() {
yield 1;
yield 2;
yield 3;
return 4;
}
let generator = syncMethod();
console.log(generator.next()); // {value: 1, done: false}
console.log(generator.next()); // {value: 2, done: false}
console.log(generator.next()); // {value: 3, done: false}
console.log(generator.next()); // {value: 4, done: true}
五、async/await
function拆分的方式其实仅仅只是拆分代码块,时常会不利于后续维护;
事件发布/监听方式模糊了异步方法之间的流程关系;
Promise虽然使得多个嵌套的异步调用能够通过链式的API进行操作,但是过多的then也增加了代码的冗余,也对阅读代码中各阶段的异步任务产生了一定干扰;
通过generator虽然能提供较好的语法结构,但是毕竟generator与yield的语境用在这里多少还有些不太贴切。
所以就有了async/await语法糖
// 模拟获取数据
function getData() {
return 'response';
}
// async函数
async function syncMethod() {
let res = await getData(); // 等待异步结束,将结果保存在变量中
console.log(res); // 一般异步的话,await后边会跟随一个Promise对象,调用.then方法来获取值
}
syncMethod()