一周文章排行和最新试题汇总 #2

Posted 2021-07-10 前端开发博客

▲ 点击下方“前端开发博客”关注公众号

回复“面试”获取面试精选文章

‍

忙碌的一周过去了，一起来汇总一下前端开发博客最近一周有哪些值得阅读的东西吧。

‍

文章排行

1. 42条JavaScript开发优化技巧
   

2. 九个超级实用的 ES6 特性
   

3. 一道让人失眠的 Promise 试题深入分析
   

4. 5个常问的 Vue3 优势点
   

5. Vue 项目性能优化技巧分享
   

6. 老旧的API，你应该如何处理？
   

7. JS 定时器的 this 指向若干问题总结

8. 入职微软一月后的感悟，谈谈面试经历及入职体验
   

最新试题

10. 当我们这么做时，会发生什么？

function bark() {
  console.log('Woof!')
}

bark.animal = 'dog'

• A: 正常运行!

• B: SyntaxError. 你不能通过这种方式给函数增加属性。

• C: undefined

• D: ReferenceError

答案: A

这在 javascript 中是可以的，因为函数是对象！（除了基本类型之外其他都是对象）

函数是一个特殊的对象。你写的这个代码其实不是一个实际的函数。函数是一个拥有属性的对象，并且属性也可被调用。

---

11. 输出是什么？

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

console.log(member.getFullName());

• A: TypeError

• B: SyntaxError

• C: Lydia Hallie

• D: undefined undefined

答案: A

你不能像常规对象那样，给构造函数添加属性。如果你想一次性给所有实例添加特性，你应该使用原型。因此本例中，使用如下方式：

Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

这才会使 member.getFullName() 起作用。为什么这么做有益的？假设我们将这个方法添加到构造函数本身里。也许不是每个 Person 实例都需要这个方法。这将浪费大量内存空间，因为它们仍然具有该属性，这将占用每个实例的内存空间。相反，如果我们只将它添加到原型中，那么它只存在于内存中的一个位置，但是所有实例都可以访问它！

---

12. 输出是什么？

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const lydia = new Person('Lydia', 'Hallie')
const sarah = Person('Sarah', 'Smith')

console.log(lydia)
console.log(sarah)

• A: Person {firstName: "Lydia", lastName: "Hallie"} and undefined

• B: Person {firstName: "Lydia", lastName: "Hallie"} and Person {firstName: "Sarah", lastName: "Smith"}

• C: Person {firstName: "Lydia", lastName: "Hallie"} and {}

• D:Person {firstName: "Lydia", lastName: "Hallie"} and ReferenceError

答案: A

对于 sarah，我们没有使用 new 关键字。当使用 new 时，this 引用我们创建的空对象。当未使用 new 时，this 引用的是全局对象（global object）。

我们说 this.firstName 等于 "Sarah"，并且 this.lastName 等于 "Smith"。实际上我们做的是，定义了 global.firstName = 'Sarah' 和 global.lastName = 'Smith'。而 sarah 本身是 undefined。

---

13. 事件传播的三个阶段是什么？

• A: Target > Capturing > Bubbling

• B: Bubbling > Target > Capturing

• C: Target > Bubbling > Capturing

• D: Capturing > Target > Bubbling

答案: D

在捕获（capturing）阶段中，事件从祖先元素向下传播到目标元素。当事件达到目标（target）元素后，冒泡（bubbling）才开始。

14. 所有对象都有原型。

• A: 对

• B: 错

答案: B

除了基本对象（base object），所有对象都有原型。基本对象可以访问一些方法和属性，比如 .toString。这就是为什么你可以使用内置的 JavaScript 方法！所有这些方法在原型上都是可用的。虽然 JavaScript 不能直接在对象上找到这些方法，但 JavaScript 会沿着原型链找到它们，以便于你使用。

---

15. 输出是什么？

function sum(a, b) {
  return a + b
}

sum(1, '2')

• A: NaN

• B: TypeError

• C: "12"

• D: 3

答案: C

JavaScript 是一种动态类型语言：我们不指定某些变量的类型。值可以在你不知道的情况下自动转换成另一种类型，这种类型称为隐式类型转换（implicit type coercion）。Coercion 是指将一种类型转换为另一种类型。

在本例中，JavaScript 将数字 1 转换为字符串，以便函数有意义并返回一个值。在数字类型（1）和字符串类型（'2'）相加时，该数字被视为字符串。我们可以连接字符串，比如 "Hello" + "World"，这里发生的是 "1" + "2"，它返回 "12"。

---

16. 输出是什么？

let number = 0
console.log(number++)
console.log(++number)
console.log(number)

• A: 1 1 2

• B: 1 2 2

• C: 0 2 2

• D: 0 1 2

答案: C

一元后自增运算符 ++：

1. 返回值（返回 0）

2. 值自增（number 现在是 1）

一元前自增运算符 ++：

1. 值自增（number 现在是 2）

2. 返回值（返回 2）

结果是 0 2 2.

---

17. 输出是什么？

function getPersonInfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}

const person = 'Lydia'
const age = 21

getPersonInfo`${person} is ${age} years old`

• A: "Lydia" 21 ["", " is ", " years old"]

• B: ["", " is ", " years old"] "Lydia" 21

• C: "Lydia" ["", " is ", " years old"] 21

答案: B

如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值！

---

好了，以上就是本周的汇总，以后我们每周会汇总一次，相信你会从中找到你喜欢的内容，最后，记得点个在看，转发文章，关注一下我哦。

整理不易，点个“在看”，支持我们↓↓↓