JS面向对象面试题及答案（实战版）.docxVIP

JS面向对象面试题及答案（实战版）

一、基础概念题

问题：JS中“原型”和“原型链”的核心作用是什么？举个实际开发中的应用场景

答案：原型主要是为了实现属性和方法的复用，避免每个实例重复创建相同的方法；原型链则是解决继承问题，让实例能访问到父级乃至顶层对象的属性/方法。

比如开发组件时，写一个基础弹窗类BaseModal，把“打开”“关闭”这些通用方法放在它的原型上，之后的ConfirmModal、AlertModal都能通过原型链继承这些方法，不用重复写代码，还能在各自实例里扩展专属逻辑。

问题：用function定义类和用class定义类，本质上有什么区别？

答案：JS里没有真正的“类”，class其实是ES6语法糖，底层还是基于原型实现的。区别主要在写法和特性上：

function定义类需要手动绑定this（比如在构造函数里写this.method=this.method.bind(this)），否则实例调用方法时this可能指向全局；

class里的方法默认绑定实例this，而且有constructor、static、extends这些语法，更直观；

另外class不能像普通函数那样直接调用（会报错），而function定义的类直接调用时this指向全局（非严格模式）。

二、代码实操题

问题：用ES5实现一个“学生”构造函数，要求：①有姓名、学号属性；②有“打印信息”的方法；③所有实例共享“打印信息”方法

答案：

//构造函数

functionStudent(name,id){

//实例属性（每个实例独有的）

this.name=name;

this.id=id;

}

//把方法放在原型上（所有实例共享）

Student.prototype.printInfo=function(){

console.log(`姓名：${this.name}，学号：${this.id}`);

}

//测试

conststu1=newStudent(张三,2023001);

conststu2=newStudent(李四,2023002);

stu1.printInfo();//姓名：张三，学号：2023001

stu2.printInfo();//姓名：李四，学号：2023002

console.log(stu1.printInfo===stu2.printInfo);//true（证明共享）

问题：用ES6的class实现“动物”类和“猫”类，要求“猫”继承“动物”，且重写“叫”的方法，同时添加“抓老鼠”的专属方法

答案：

//父类：动物

classAnimal{

constructor(name){

this.name=name;//动物名称

}

//父类方法

shout(){

console.log(`${this.name}发出叫声`);

}

}

//子类：猫（继承动物）

classCatextendsAnimal{

//重写构造函数（如果需要扩展属性，必须先调用super()）

constructor(name,color){

super(name);//调用父类构造函数，传name

this.color=color;//猫的专属属性：颜色

}

//重写父类的shout方法

shout(){

console.log(`${this.name}（${this.color}）喵喵叫`);

}

//猫的专属方法

catchMouse(){

console.log(`${this.name}在抓老鼠`);

}

}

//测试

constmyCat=newCat(橘猫,橙色);

myCat.shout();//橘猫（橙色）喵喵叫

myCat.catchMouse();//橘猫在抓老鼠

console.log(myCatinstanceofAnimal);//true（证明继承关系）

三、深度理解题

问题：为什么会出现“原型链污染”？举个例子说明，以及实际开发中怎么避免？

答案：原型链污染是因为直接修改了对象的__proto__属性，导致所有继承自该原型的对象都被影响。

比如：

//正常对象

constobj={};

//恶意修改原型：给Object.prototype加了一个恶意属性

obj.__proto__.malicious=我污染了所有对象;

//其他完全无关的对象，也会有