前端面试指南(一面)

知识点梳理

变量类型

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。

原型和原型链定义

继承的写法