2020前端面试题集锦（一）

来源： GItHub地址

1. What's the output?

class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor;
    return this.newColor;
  }

  constructor({ newColor = "green" } = {}) {
    this.newColor = newColor;
  }
}

const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

• A: orange
• B: purple
• C: green
• D: TypeError

答案：D

解析：colorChange函数是一个static函数，static函数仅作用于创建它的构造函数上，并且不能传递给任何子方法；freddie方法是一个子函数，不会继承colorChange方法，所以freddie实例会抛出一个类型错误。

2. What happens when we do this?

function bark() {
  console.log("Woof!");
}

bark.animal = "dog";

• A: Nothing, this is totally fine!
• B: SyntaxError. You cannot add properties to a function this way.
• C: undefined
• D: ReferenceError

答案：A

解析：这在JavaScript中是允许的，因为函数是对象!(除了基本类型之外的所有东西都是对象)

函数是对象的一种特殊类型。您自己编写的代码并不是实际的函数。函数是一个带有属性的对象。此属性是可调用的。

3. What's the output?

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实例都需要这个方法。这将浪费大量内存空间，因为它们仍然具有该属性，这将占用每个实例的内存空间。相反，如果我们只将它添加到原型中，那么它只存在于内存中的一个位置，但是它们都可以访问它!

4. What's the output?

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时，它引用我们创建的新空对象。但是，如果不添加new，它将引用全局对象! 我们知道this.firstName="Sarah", this.lastName =“Smith”。我们实际上做的是，定义 global.firstName = 'Sarah'和global.lastName =“Smith”。sarah本身没有定义。

5. All object have prototypes.

• A: true
• B: false

答案：B

解析：除了基本对象之外，所有对象都有原型。基本对象可以访问一些方法和属性，比如. tostring。这就是为什么您可以使用内置的JavaScript方法!所有这些方法在原型上都是可用的。虽然JavaScript不能直接在对象上找到它，但它会沿着原型链找到它，这使您可以访问它。

6. What's the output?

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

解析：如果使用带标记的模板文字，第一个参数的值总是字符串值的数组，其余的参数获取传递的表达式的值。

7.  What's the output?

function checkAge(data) {
  if (data === { age: 18 }) {
    console.log("You are an adult!");
  } else if (data == { age: 18 }) {
    console.log("You are still an adult.");
  } else {
    console.log(`Hmm.. You don't have an age I guess`);
  }
}

checkAge({ age: 18 });

答案：C

解析：在测试相等性时，通过值比较基本类型，而通过引用比较对象。JavaScript检查对象是否具有对内存中相同位置的引用。

我们正在比较的两个对象:作为参数传递的对象引用的内存位置与用于检查等式的对象不同。

This is why both { age: 18 } === { age: 18 } and { age: 18 } == { age: 18 } return false.

8.  What's the output?

const sum = eval("10*10+5");

• A: 105
• B: "105"
• C: TypeError
• D: "10*10+5"

​​​​​​​答案：A

解析：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。如果它是一个表达式，就像本例中那样，它对表达式求值。表达式是10 * 10 + 5。这将返回数字105。

9. What's the output?

const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);

obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);

• A: false true false true
• B: false true true true
• C: true true false true
• D: true true true true

​​​​​​​答案：C

解析：所有对象键(不包括Symbols)都是引擎盖下的字符串，即使您自己没有将其作为字符串输入。这就是obj.hasOwnProperty('1')也返回true的原因。 对于一个Set，它不是这样工作的。在我们的集合:set.has('1')中没有'1'返回false。它的数值类型为1,set.has(1)返回true。

10.  What's the output?

const a = {};
const b = { key: "b" };
const c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

• A: 123
• B: 456
• C: undefined
• D: ReferenceError

​​​​​​​答案：B

解析：对象键被自动转换为字符串。我们试图将对象设置为对象a的键，值为123。

然而，当我们将一个对象字符串化时，它就变成了“[object object]”。这里我们说的是，a["Object Object "] = 123。然后，我们可以再试一次。c是我们正在隐式字符串化的另一个对象。那么，a["Object Object "] = 456。

然后，我们log a[b]，它实际上是一个["Object Object "]。我们把它设为456，它返回456。

11. What's the output?

const person = { name: "Lydia" };

function sayHi(age) {
  console.log(`${this.name} is ${age}`);
}

sayHi.call(person, 21);
sayHi.bind(person, 21);

• A: undefined is 21 Lydia is 21
• B: function function
• C: Lydia is 21 Lydia is 21
• D: Lydia is 21 function

​​​​​​​答案：D

解析：使用这两种方法，我们都可以传递希望this关键字引用的对象。然而，.call也会立即执行!

.bind。返回函数的副本，但带有绑定上下文!它不是立即执行的。

12. What's the output?

(() => {
  let x, y;
  try {
    throw new Error();
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x);
  }
  console.log(x);
  console.log(y);
})();

• A: 1 undefined 2
• B: undefined undefined undefined
• C: 1 1 2
• D: 1 undefined undefined

​​​​​​​答案：A

解析：catch块接收参数x。当我们传递参数时，它与变量x是不同的。这个变量x是块范围的。

稍后，我们将这个block-scoped变量设置为1，并设置变量y的值，现在，我们将block-scoped变量x记录为1。

在catch块之外，x仍然是未定义的，y是2。当我们希望console.log(x)位于catch块之外时，它返回undefined，而y返回2。

13. What's the output?

[[0, 1], [2, 3]].reduce(
  (acc, cur) => {
    return acc.concat(cur);
  },
  [1, 2]
);

• A: [0, 1, 2, 3, 1, 2]
• B: [6, 1, 2]
• C: [1, 2, 0, 1, 2, 3]
• D: [1, 2, 6]

​​​​​​​答案：C

解析：[1,2]是初始值。这是我们开始时的值，也是第一个acc的值。在第一轮中，acc为[1,2]，cur为[0,1]。我们将它们连接起来，得到[1,2,0,1]。

然后，[1,2,0,1]为acc，[2,3]为cur。将它们串联起来，得到[1,2,0,1,2,3]