前端面试指南(一面)

本文主要是介绍前端面试指南(一面)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

知识点梳理

变量类型

ECMAScript 中定义了 6 种原始类型：
6种: Boolean String Number Null Undefinded Symbol
注意：原始类型不包含 Object。
typeof
typeof xxx得到的值有以下几种类型：undefined boolean number string object function、symbol

instanceof
用于实例和构造函数的对应。例如判断一个变量是否是数组，使用typeof无法判断，
但可以使用[1, 2] instanceof Array来判断。
因为，[1, 2]是数组，它的构造函数就是Array。

值类型 vs 引用类型

值类型变量包括 Boolean、String、Number、Undefined、Null，
引用类型包括了 Object 类的所有，如 Date、Array、Function 等

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}

提高题目
①

function foo(a){a = a * 10;
}
function bar(b){b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1 这里是因为 Number 类型的 a 是按值传递, 而 Object 类型的b是按照共享传递是
console.log(b); // value: new

②

var obj = {a: 1,b: [1,2,3]
}
var a = obj.a
var b = obj.b
a = 2
b.push(4)
console.log(obj, a, b)

输出

{ a: 1, b: [ 1, 2, 3, 4 ] }   
2     
[ 1, 2, 3, 4 ]

虽然obj本身是个引用类型的变量（对象），
但是内部的a和b一个是值类型一个是引用类型，
a的赋值不会改变obj.a，但是b的操作却会反映到obj对象上。

Symbol 类型

特点

唯一性: 通过 Symbol() 创建的符号都是唯一的
不可变性: 一旦创建就无法被更改
私有性: Symbol 可以作为对象私有属性键, 这些属性不会被 for…in 或者 Object.keys() 等迭代方法访问
创建唯一的属性键

// 创建一个 Symbol
const myUniqueKey = Symbol('myUniqueKey');
// 使用 Symbol 作为对象的属性键
const myObject = {[myUniqueKey]: 'This value is unique'
};
// 访问这个属性
console.log(myObject[myUniqueKey]); // 输出: This value is unique
// 尝试使用常规字符串作为键访问这个属性
console.log(myObject['myUniqueKey']); // 输出: undefined

避免属性名冲突
当你在不同的地方扩展同一个对象时，使用 Symbol 可以避免属性名冲突。

const mySymbol = Symbol('myProperty');const obj1 = {[mySymbol]: 'Value from obj1'
};const obj2 = {[mySymbol]: 'Value from obj2'
};console.log(obj1[mySymbol]); // 输出: Value from obj1
console.log(obj2[mySymbol]); // 输出: Value from obj2// 这两个属性是唯一的，即使它们在不同的上下文中使用了相同的 Symbol

私有属性
在JavaScript中，没有真正的私有属性，但 Symbol 可以用来模拟私有属性。

const privateKey = Symbol('privateKey');class MyClass {constructor() {this[privateKey] = 'I am a private property';}getPrivateProperty() {return this[privateKey];}
}const myInstance = new MyClass();
console.log(myInstance.getPrivateProperty()); // 输出: I am a private property// 尝试直接访问这个属性会失败，因为它看起来像是一个普通属性
console.log(myInstance.privateKey); // 输出: undefined

使用 Symbol.for 和 Symbol.keyFor
Symbol.for 允许你创建或访问一个全局的 Symbol，而 Symbol.keyFor 可以获取一个 Symbol 对应的字符串键。

// 创建一个全局 Symbol
const globalSymbol = Symbol.for('globalSymbol');// 访问这个全局 Symbol
const retrievedGlobalSymbol = Symbol.for('globalSymbol');
console.log(globalSymbol === retrievedGlobalSymbol); // 输出: true// 获取 Symbol 的字符串描述
console.log(Symbol.keyFor(globalSymbol)); // 输出: 'globalSymbol'

原型与原型链

所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象
所有的函数，都有一个prototype属性，属性值也是一个普通的对象
所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值

// 要点一：自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;// 要点二：__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);// 要点三：函数有 prototype
console.log(fn.prototype)// 要点四：引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype)

原型

// 构造函数
function Foo(name, age) {this.name = name
}
Foo.prototype.alertName = function () {alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {console.log(this.name)
}
// 测试
f.printName()
f.alertName()

执行printName时很好理解，但是执行alertName时发生了什么？
这里再记住一个重点
当试图得到一个对象的某个属性时，
如果这个对象本身没有这个属性，
那么会去它的__proto__（即它的构造函数的prototype）中寻找，
因此f.alertName就会找到Foo.prototype.alertName。