正文

掌握JavaScript面向对象编程：常见面试题及实战解析

/0 浏览量
0409

1. 面向对象编程的基本概念

1.1 对象和类的定义

在JavaScript中，对象是一组无序的相关键值对集合，类是一个抽象的模板，用来创建具有相同属性和方法的对象。

1.2 构造函数

构造函数是使用function声明的对象创建的蓝图，通过new关键字实例化对象。

1.3 原型和原型链

每个JavaScript对象都有一个原型对象，它存储了该对象构造函数的共享属性和方法。原型链是对象通过其原型链向上查找属性和方法的机制。

2. 面向对象编程面试题

2.1 如何创建对象？

// 方法1：使用对象字面量
const obj1 = {};

// 方法2：使用new关键字
const obj2 = new Object();

// 方法3：使用构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person1 = new Person('张三', 18);

2.2 什么是原型链？

原型链是JavaScript中实现继承的一种机制。当一个对象无法访问自身的属性或方法时，它会沿着原型链向上查找，直到找到对应的属性或方法。

2.3 什么是原型继承？

原型继承是让一个对象继承另一个对象的属性和方法。在JavaScript中，可以通过设置原型来实现在构造函数之间的继承。

2.4 如何实现多态？

多态是指在运行时根据对象类型来调用相应的函数。在JavaScript中，可以通过继承和重写父类的方法来实现多态。

2.5 什么是闭包？

闭包是函数和其词法环境的一个引用。它允许函数访问其创建时的作用域中的变量。

2.6 如何实现深拷贝和浅拷贝？

浅拷贝只复制对象的第一层属性，而深拷贝会递归复制对象的所有层级。

// 浅拷贝
function shallowCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

// 深拷贝
function deepCopy(obj) {
  let copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return copy;
}

3. 实战解析

3.1 创建一个面向对象的数据存储系统

class DataStore {
  constructor() {
    this.data = {};
  }

  set(key, value) {
    this.data[key] = value;
  }

  get(key) {
    return this.data[key];
  }

  remove(key) {
    delete this.data[key];
  }

  getAll() {
    return this.data;
  }
}

3.2 使用原型链实现一个简单的继承

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`我的名字是${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  sayBreed() {
    console.log(`我是一只${this.breed}`);
  }
}

const dog1 = new Dog('旺财', '哈士奇');
dog1.sayName(); // 输出：我的名字是旺财
dog1.sayBreed(); // 输出：我是一只哈士奇

3.3 使用闭包实现一个计数器

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 输出：0
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2

通过以上面试题和实战解析，相信你已经对JavaScript面向对象编程有了更深入的了解。希望这些内容能帮助你更好地应对面试和实际开发中的挑战。

-- 展开阅读全文 --