Static 前端面试题及详细答案（真实职场版）

Static前端面试题及详细答案（真实职场版）一、基础概念题（入门必问）1.请简述JavaScript中static关键字的作用答案：static是ES6引入的类关键字，用于定义类的静态属性和静态方法。核心特点：静态属性/方法属于类本身，不属于类的实例对象。只能通过类名直接调用，无法通过实例调用。简单理解：实例属性/方法是每个对象独有的，static定义的内容是所有对象共享的，全局挂载在类上。示例：PlainText

classPerson{

staticname="公共名称";//静态属性

staticsayHi(){//静态方法

console.log("静态方法执行");

}

}

Person.sayHi();//正确：类直接调用

constp=newPerson();

p.sayHi();//报错：实例无法调用静态方法2.静态方法和实例方法的核心区别是什么？答案：1.归属不同：静态方法归属类，实例方法归属new出来的实例对象。2.调用方式不同：静态方法通过类名.方法名调用；实例方法通过实例对象.方法名调用。3.this指向不同：静态方法内的this指向当前类；实例方法内的this指向当前实例对象。4.继承访问不同：子类可继承父类静态方法，通过子类直接调用；实例方法只能通过子类实例调用。5.使用场景不同：静态方法用于工具方法、全局通用逻辑；实例方法用于每个对象独立的行为逻辑。3.静态属性和普通实例属性的区别？答案：1.实例属性：每个实例都会开辟独立内存，相互不影响，仅实例可访问。2.静态属性：仅挂载在类上，全局只有一份内存，所有实例共享，只能通过类访问，实例无法直接访问。3.实例属性常用于存储对象独有数据（比如用户姓名、年龄）；静态属性常用于存储全局配置、常量、计数器等公共数据。二、核心原理与坑点题（面试高频）4.静态方法可以访问实例属性/实例方法吗？为什么？答案：不可以直接访问。原因：静态方法执行时，不需要创建实例，函数内部没有实例上下文，无法获取实例的属性和方法。静态方法的this指向类本身，只能访问静态属性和静态方法。如果一定要访问，必须手动new实例，通过实例对象调用。示例：PlainText

classDemo{

age=18;//实例属性

staticfn(){

console.log(this.age);//undefined，无法访问实例属性

}

}

Demo.fn();5.实例方法可以访问静态属性和静态方法吗？答案：可以。实例方法执行时，已经存在实例上下文，可通过类名直接调用静态属性和静态方法，也可以通过this.constructor访问当前类的静态内容。示例：PlainText

classDemo{

staticnum=100;

test(){

console.log(Demo.num);//100

console.log(this.constructor.num);//100

}

}

constd=newDemo();

d.test();6.静态方法中的this指向是什么？会不会随调用方式改变？答案：1.常规调用（类名.静态方法）：this指向当前类本身。2.静态方法的this遵循JS普通函数的this规则，可被call、apply、bind改变指向。3.若直接解构调用静态方法，this会丢失，指向undefined（严格模式）或window（非严格模式）。坑点举例：PlainText

classDemo{

staticnum=10;

staticgetNum(){

console.log(this.num);

}

}

const{getNum}=Demo;

getNum();//undefined，this不再指向Demo类7.为什么静态方法不能被实例继承调用？答案：类的实例的原型链上，只有实例方法，没有静态方法。静态方法直接挂载在类的构造函数本身，而非原型对象上。new出来的实例，原型指向类.prototype，无法访问挂载在类构造函数上的静态方法，因此实例无法调用静态方法。三、继承场景面试题（进阶必考）8.子类继承父类后，父类的静态方法会被继承吗？如何调用？答案：会继承。ES6类的继承中，子类会继承父类的静态属性和静态方法，可以直接通过子类名调用，无需实例化。同时子类可以重写父类静态方法，重写后子类优先使用自身静态方法，不影响父类。示例：PlainText

classFather{

staticsay(){

console.log("父类静态方法");

}

}

classSonextendsFather{}

Son.say();//父类静态方法（继承成功）9.子类静态方法中如何调用父类的静态方法？答案：通过super.xxx调用父类静态方法，这是ES6标准写法。在静态方法中，super指向父类构造函数，可直接调用父类静态属性和方法。示例：PlainText

classFather{

staticmsg(){

return"父类消息";

}

}

classSonextendsFather{

staticmsg(){

returnsuper.msg()+"+子类扩展";

}

}

console.log(Son.msg());//父类消息+子类扩展四、手写代码面试题（实操考核）10.手写一个工具类，包含静态方法实现数组去重答案：PlainText

classArrayUtil{

//静态数组去重方法

staticunique(arr){

if(!Array.isArray(arr)){

return[];

}

return[...newSet(arr)];

}

}

//调用

constres=ArrayUtil.unique([1,2,2,3,3,4]);

console.log(res);//[1,2,3,4]解析：工具类无需实例化，所有通用工具逻辑都适合用静态方法，符合日常开发封装规范。11.利用静态属性实现一个类的计数器，统计实例创建次数答案：PlainText

classCount{

//静态计数器，全局共享

statictotal=0;

constructor(){

//每创建一个实例，计数器+1

Count.total++;

}

}

newCount();

newCount();

newCount();

console.log(Count.total);//3五、工程化场景题（职场实战）12.日常开发中，static静态方法/属性适合用来做什么？答案：结合业务开发，static最常用的场景有4种：1.封装工具类：数组处理、时间格式化、金额计算、正则校验等通用方法，无需实例，直接类调用。2.定义全局常量：接口地址、状态码、枚举值、配置项，统一管理，方便维护。3.全局计数器/状态统计：统计实例数量、接口请求次数、页面渲染次数。4.类工厂方法：通过静态方法统一创建实例，优化new实例的写法，统一参数处理。13.静态方法和模块化导出的独立函数有什么区别？什么时候优先用static？答案：1.独立模块函数：松散、无归类，适合单一独立工具逻辑。2.static静态方法：归类性强，统一挂载在类下，语义清晰、便于统一管理，支持继承、super调用，适合一组同类型工具方法封装。优先用static的场景：多个工具方法属于同一业务模块，需要