2019前端面试题集锦（一）
来源： 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:
undefinedundefined
答案：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"}andundefined - B:
Person {firstName: "Lydia", lastName: "Hallie"}andPerson {firstName: "Sarah", lastName: "Smith"} - C:
Person {firstName: "Lydia", lastName: "Hallie"}and{} - D:
Person {firstName: "Lydia", lastName: "Hallie"}andReferenceError
答案：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:
falsetruefalsetrue - B:
falsetruetruetrue - C:
truetruefalsetrue - D:
truetruetruetrue
答案：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 21Lydia is 21 - B:
functionfunction - C:
Lydia is 21Lydia is 21 - D:
Lydia is 21function
答案：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:
1undefined2 - B:
undefinedundefinedundefined - C:
112 - D:
1undefinedundefined
答案：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]