正文

面试官揭秘：掌握这10个JS原型面试题，轻松征服前端岗位

/0 浏览量
0418

在当今的前端开发领域，JavaScript（简称JS）是必备技能之一。面试时，原型相关的题目往往能体现出面试者对JavaScript基础知识的掌握程度。以下是我为您准备的10个JS原型面试题，助您轻松征服前端岗位。

1. 什么是原型（Prototype）？

原型是JavaScript中对象的一个属性，用于存储所有实例共享的属性和方法。每个构造函数都有一个原型对象，该对象的所有属性和方法都可以被构造函数的实例访问。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

2. 什么是原型链（Prototype Chain）？

原型链是JavaScript中对象访问属性的一种机制。当一个对象尝试访问某个属性或方法时，首先会检查自身是否拥有该属性或方法，如果没有，则会沿着原型链向上查找，直到找到为止。

let person = new Person('Alice');
console.log(person.sayHello()); // 输出：Hello, my name is Alice

3. 如何创建对象原型？

创建对象原型主要有以下几种方法：

  1. 使用构造函数和原型：
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};
  1. 使用Object.create()：
const personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person = Object.create(personPrototype, { name: { value: 'Alice' } });
  1. 使用ES6的类和继承：
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

4. 如何判断一个属性是否存在于对象的原型上？

可以使用Object.hasOwnProperty()方法来判断一个属性是否存在于对象自身上。如果要判断一个属性是否存在于对象的原型上，可以使用in运算符。

let person = new Person('Alice');
console.log(person.hasOwnProperty('name')); // 输出：true
console.log('name' in person); // 输出：true

5. 如何实现继承？

在JavaScript中，继承主要有以下几种方式：

  1. 原型链继承：
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = new Person();
Employee.prototype.constructor = Employee;

Employee.prototype.saySalary = function() {
  console.log(`My salary is ${this.salary}`);
};
  1. 构造函数继承：
function Person(name) {
  this.name = name;
}

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = new Person();
  1. 组合继承：
function Person(name) {
  this.name = name;
}

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
  1. 原型式继承：
function createObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

let personPrototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

let person = createObject(personPrototype);
  1. 寄生式继承：
function createObject(obj) {
  let clone = Object.create(obj);
  clone.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
  return clone;
}

let personPrototype = {
  name: 'Alice'
};

let person = createObject(personPrototype);
  1. 寄生组合式继承：
function inheritPrototype(child, parent) {
  let prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Person(name) {
  this.name = name;
}

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

inheritPrototype(Employee, Person);

6. 如何实现深拷贝和浅拷贝？

浅拷贝和深拷贝是复制对象时常用的两种方法。

  1. 浅拷贝：
let obj = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'gaming']
};

let shallowCopy = Object.assign({}, obj);
  1. 深拷贝：
function deepClone(obj) {
  let clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = (typeof obj[key] === 'object' && obj[key] !== null) ? deepClone(obj[key]) : obj[key];
    }
  }
  return clone;
}

let deepCopy = deepClone(obj);

7. 什么是闭包（Closure）？

闭包是JavaScript中的一个重要概念，指的是函数和其周围的状态（词法环境）的引用捆绑在一起形成的表达式。闭包允许函数访问其创建时的作用域中的变量，即使离开了该作用域。

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

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

8. 什么是立即执行函数表达式（IIFE）？

立即执行函数表达式（IIFE）是JavaScript中的一种语法结构，用于创建一个匿名函数，并在创建的同时立即执行该函数。

(function() {
  console.log('Hello, world!');
})();

9. 如何使用箭头函数？

箭头函数是ES6中引入的一种函数声明方式，其语法简洁，更易于理解。

let sayHello = () => {
  console.log('Hello, world!');
};

sayHello(); // 输出：Hello, world!

10. 如何使用解构赋值？

解构赋值是ES6中的一种语法结构，用于从对象或数组中提取多个值并赋值给多个变量。

let obj = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'gaming']
};

let { name, age } = obj;
console.log(name); // 输出：Alice
console.log(age); // 输出：25

掌握以上10个JS原型面试题，相信您在面试中能游刃有余。祝您面试顺利！

-- 展开阅读全文 --