前端面试题十一@杨志刚

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()

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 面试官 先做下自我介绍吧?对后端有了解吗?node之类的那我就针对你的项目问一些基础能力?(好的)我看你接触前端两...
    星星编程阅读 1,105评论 0 4
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,498评论 0 106
  • 前端面试问题集锦 JavaScript 部分 1、JQuery $(document).ready() 和 win...
    涯无凌阅读 940评论 0 2
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,103评论 2 19
  • 得了带状疱疹,正好找借口不上班。这鸡肋似的工作,干着烦心,不干,又揪心。 这带状疱疹,也来的有点奇怪。某天晚上躺沙...
    月七八阅读 303评论 1 0