译者按: 总结了大量JavaScript基本知识点,很有用!

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

根据StackOverflow调查, 自2014年一来,JavaScript是最流行的编程语言。当然,这也在情理之中,毕竟1/3的开发工作都需要一些JavaScript知识。因此,如果你希望在成为一个开发者,你应该学会这门语言。

这篇博客的主要目的是将所有面试中常见的概念总结,方便你快速去了解。(鉴于本文内容过长,方便阅读,将分为三篇博客来翻译, 此为第三部分。第一部分请点击快速掌握JavaScript面试基础知识(一))

new关键字

如果使用new关键字来调用函数式很特别的形式。我们把那些用new调用的函数叫做构造函数(constructor function)。

使用了new的函数到底做了什么事情呢?

  • 创建一个新的对象
  • 将对象的prototype设置为构造函数的prototype
  • 执行构造函数,this执行新构造的对象
  • 返回该对象。如果构造函数返回对象,那么返回该构造对象。
  1. // 为了更好地理解底层,我们来定义new关键字
    function myNew(constructor, ...arguments) {
    var obj = {}
    Object.setPrototypeOf(obj, constructor.prototype);
    return constructor.apply(obj, arguments) || obj
    }

使用new和不使用的区别在哪里呢?

  1. function Bird() {
    this.wings = 2;
    }
    /* 普通的函数调用 */
    let fakeBird = Bird();
    console.log(fakeBird); // undefined
    /* 使用new调用 */
    let realBird= new Bird();
    console.log(realBird) // { wings: 2 }

为了便于对比理解,译者额外增加了测试了一种情况:

  1. function MBird(){
    this.wings =2;
    return "hello";
    }
  2.  
  3. let realMBrid = new MBird();
    console.log(realMBird) // { wings: 2 }

你会发现,这一句return "hello"并没有生效!

原型和继承

原型(Prototype)是JavaScript中最容易搞混的概念,其中一个原因是prototype可以用在两个不同的情形下。

  • 原型关系
    每一个对象都有一个prototype对象,里面包含了所有它的原型的属性。
    .__proto__是一个不正规的机制(ES6中提供),用来获取一个对象的prototype。你可以理解为它指向对象的parent
    所有普通的对象都继承.constructor属性,它指向该对象的构造函数。当一个对象通过构造函数实现的时候,__proto__属性指向构造函数的构造函数的.prototypeObject.getPrototypeOf()是ES5的标准函数,用来获取一个对象的原型。

  • 原型属性
    每一个函数都有一个.prototype属性,它包含了所有可以被继承的属性。该对象默认包含了指向原构造函数的.constructor属性。每一个使用构造函数创建的对象都有一个构造函数属性。

接下来通过例子来帮助理解:

  1. function Dog(breed, name){
    this.breed = breed,
    this.name = name
    }
    Dog.prototype.describe = function() {
    console.log(`${this.name} is a ${this.breed}`)
    }
    const rusty = new Dog('Beagle', 'Rusty');
  2.  
  3. /* .prototype 属性包含了构造函数以及构造函数中在prototype上定义的属性。*/
    console.log(Dog.prototype) // { describe: ƒ , constructor: ƒ }
  4.  
  5. /* 使用Dog构造函数构造的对象 */
    console.log(rusty) // { breed: "Beagle", name: "Rusty" }
    /* 从构造函数的原型中继承下来的属性或函数 */
    console.log(rusty.describe()) // "Rusty is a Beagle"
    /* .__proto__ 属性指向构造函数的.prototype属性 */
    console.log(rusty.__proto__) // { describe: ƒ , constructor: ƒ }
    /* .constructor 属性指向构造函数 */
    console.log(rusty.constructor) // ƒ Dog(breed, name) { ... }

JavaScript的使用可以说相当灵活,为了避免出bug了不知道,不妨接入Fundebug线上实时监控

原型链

原型链是指对象之间通过prototype链接起来,形成一个有向的链条。当访问一个对象的某个属性的时候,JavaScript引擎会首先查看该对象是否包含该属性。如果没有,就去查找对象的prototype中是否包含。以此类推,直到找到该属性或则找到最后一个对象。最后一个对象的prototype默认为null。

拥有 vs 继承

一个对象有两种属性,分别是它自身定义的和继承的。

  1. function Car() { }
    Car.prototype.wheels = 4;
    Car.prototype.airbags = 1;
  2.  
  3. var myCar = new Car();
    myCar.color = 'black';
  4.  
  5. /* 原型链中的属性也可以通过in来查看: */
    console.log('airbags' in myCar) // true
    console.log(myCar.wheels) // 4
    console.log(myCar.year) // undefined
  6.  
  7. /* 通过hasOwnProperty来查看是否拥有该属性: */
    console.log(myCar.hasOwnProperty('airbags')) // false — Inherited
    console.log(myCar.hasOwnProperty('color')) // true

Object.create(obj) 创建一个新的对象,prototype指向obj

  1. var dog = { legs: 4 };
    var myDog = Object.create(dog);
  2.  
  3. console.log(myDog.hasOwnProperty('legs')) // false
    console.log(myDog.legs) // 4
    console.log(myDog.__proto__ === dog) // true

继承是引用传值

继承属性都是通过引用的形式。我们通过例子来形象理解:

  1. var objProt = { text: 'original' };
    var objAttachedToProt = Object.create(objProt);
    console.log(objAttachedToProt.text) // original
  2.  
  3. // 我们更改objProt的text属性,objAttachedToProt的text属性同样更改了
    objProt.text = 'prototype property changed';
    console.log(objAttachedToProt.text) // prototype property changed
  4.  
  5. // 但是如果我们讲一个新的对象赋值给objProt,那么objAttachedToProt的text属性不受影响
    objProt = { text: 'replacing property' };
    console.log(objAttachedToProt.text) // prototype property changed

经典继承 vs 原型继承

Eric Elliott的文章有非常详细的介绍:Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance?
作者认为原型继承是优于经典的继承的,并提供了一个视频介绍:https://www.youtube.com/watch?v=wfMtDGfHWpA&feature=youtu.be

异步JavaScript

JavaScript是一个单线程程序语言,也就是说JavaScript引擎一次只能执行某一段代码。它导致的问题就是:如果有一段代码需要耗费很长的时间执行,其它的操作就被卡住了。JavaScript使用Call Stack来记录函数的调用。一个Call Stack可以看成是一摞书。最后一本书放在最上面,也最先被移走。最先放的书在最底层,最后被移走。

为了避免复杂代码占用CPU太长时间,一个解法就是定义异步回调函数。我们自己来定义一个异步函数看看:

  1. function greetingAsync(name, callback){
    let greeting = "hello, " + name ;
    setTimeout(_ => callback(greeting),0);
    }
  2.  
  3. greetingAsync("fundebug", console.log);
    console.log("start greeting");

我们在greetingAsync中构造了greeting语句,然后通过setTimeout定义了异步,callback函数,是为了让用户自己去定义greeting的具体方式。为方便起见,我们时候直接使用console.log
上面代码执行首先会打印start greeting,然后才是hello, fundebug。也就是说,greetingAsync的回调函数后执行。在网站开发中,和服务器交互的时候需要不断地发送各种请求,而一个页面可能有几十个请求。如果我们一个一个按照顺序来请求并等待结果,串行的执行会使得网页加载很慢。通过异步的方式,我们可以先发请求,然后在回调中处理请求结果,高效低并发处理。

下面通过一个例子来描述整个执行过程:

  1. const first = function () {
    console.log('First message')
    }
    const second = function () {
    console.log('Second message')
    }
    const third = function() {
    console.log('Third message')
    }
  2.  
  3. first();
    setTimeout(second, 0);
    third();
  4.  
  5. // 输出:
    // First message
    // Third message
    // Second message
  1. 初始状态下,浏览器控制台没有输出,并且事件管理器(Event Manager)是空的;
  2. first()被添加到调用栈
  3. console.log("First message")加到调用栈
  4. console.log("First message")执行并输出“First message”到控制台
  5. console.log("First message")从调用栈中移除
  6. first()从调用栈中移除
  7. setTimeout(second, 0)加到调用栈
  8. setTimeout(second, 0)执行,0ms之后,second()被加到回调队列
  9. setTimeout(second, 0)从调用栈中移除
  10. third()加到调用栈
  11. console.log("Third message")加到调用栈
  12. console.log("Third message")执行并输出“Third message”到控制台
  13. console.log("Third message")从调用栈中移除
  14. third()从调用栈中移除
  15. Event Loop 将second()从回调队列移到调用栈
  16. console.log("Second message")加到调用栈
  17. console.log("Second message")Second message”到控制台
  18. console.log("Second message")从调用栈中移除
  19. Second()从调用栈中移除

特别注意的是:second()函数在0ms之后并没有立即执行,你传入到setTimeout()函数的时间和second()延迟执行的时间并不一定直接相关。事件管理器等到setTimeout()设置的时间到期才会将其加入回调队列,而回调队列中它执行的时间和它在队列中的位置已经它前面的函数的执行时间有关。

更多

  1. 版权声明:
  2. 转载时请注明作者Fundebug以及本文地址:
  3. https://blog.fundebug.com/2018/01/29/the-definitive-javascript-handbook-for-a-developer-interview-3/

快速掌握JavaScript面试基础知识(三)的更多相关文章

  1. 快速掌握JavaScript面试基础知识(二)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  2. 快速了解JavaScript的基础知识

    注释 单行注释: // 单行注释 多行注释: /* 多行 注释 */ 历史上 JavaScript 可以兼容 HTML 注释,因此 <!-- 和 --> 也可以是单行注释. x = 1; ...

  3. javascript的基础知识及面向对象和原型属性

    自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; cons ...

  4. 快速掌握Docker必备基础知识

    快速掌握Docker必备基础知识 Docker是时下热门的容器技术,相信作为一名开发人员,你一定听说过或者使用过,很多人会把Docker理解为一个轻量级虚拟机,但其实Docker与虚拟机(VM)是两种 ...

  5. java 基础知识三 java变量

    java  基础知识 三 变量 1.作用域 {} 包围起来的代码 称之为代码块,在块中声明的变量只能在块中使用 2.常量 就是固定不变的量,一旦被定义,它的值就不能再被改变. 3.变量 变量必须在程序 ...

  6. Python基础知识(三)

    Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...

  7. JavaScript 之基础知识

    JavaScript 基础知识 JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaS ...

  8. C# 基础知识 (三).主子对话框数值传递

    在C# winform编程中,我们经常会遇到不同窗口间需要传递数值的问题.比如数据库的应用,主窗口填写内容num1,点击按钮,在弹出的子窗口显示对应num1值;或者在子窗口填写新注册用户名信息,在主窗 ...

  9. 面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)

    python python _.__.__xx__之间的差别 python中range.xrange和randrange的区别 python中 =.copy.deepcopy的差别 python 继承 ...

随机推荐

  1. 代码覆盖率 EclEmma

    1. EclEmma的介绍 EclEmma是一个开源的软件测试工具,可以在编码过程中查看代码调用情况.也可以检测单覆盖率. 2. Eclipse下EclEmma安装 1. 选择Help->Ecl ...

  2. 背水一战 Windows 10 (122) - 其它: 通过 Windows.System.Profile 命名空间下的类获取信息, 查找指定类或接口的所在程序集的所有子类和子接口

    [源码下载] 背水一战 Windows 10 (122) - 其它: 通过 Windows.System.Profile 命名空间下的类获取信息, 查找指定类或接口的所在程序集的所有子类和子接口 作者 ...

  3. Python 列表详细使用

    1. 列表 列表是Python中内置有序.可变序列,列表的所有元素放在一对中括号“[]”中,并使用逗号分隔开: 当列表元素增加或删除时,列表对象自动进行扩展或收缩内存,保证元素之间没有缝隙: 在Pyt ...

  4. Eclipse 启动报错 An internal error occurred during: "Initializing Java Tooling"

    如图所示,我的Eclispe版本是Oxygen,启动的时候turnaround弹出这种错误. 多种情况会导致这种报错.通过[重置窗口布局],可解决大部分情况: 解决办法:点击菜单导航栏的Window ...

  5. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  6. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  7. Vue的基本使用

    VUE vue挂载点 el:"标签id" vue绑定属性 :v-model:"属性值" vue绑定事件 @click:"事件名" vue基本 ...

  8. pycharm删除project

    1 在pycharm里面选择关闭project 2 返回到这个页面,然后点×让project不在project列表显示(最好记住project的位置) 3 到源文件夹删除这个project文件夹 大功 ...

  9. ubuntu 16.04 下安装动态链接库方法

    一般先使用ldd 来查看该应用程序缺少什么东西,然后,再根据sudo apt install XXX 去安装相应的动态库. 假如没有对应的库,可以使用: sudo ln -s /usr/lib/lib ...

  10. linux设置打开文件句柄数

    介绍 在Linux下有时会遇到Socket/File : Can't open so many files的问题.其实Linux是有文件句柄限制的,而且Linux默认一般都是1024(阿里云主机默认是 ...