面试题：JavaScript 中类和构造函数常见错误及处理方式

忘记使用 new 关键字
- 错误描述：在调用构造函数时如果忘记使用 new 关键字，函数中的 this 会指向全局对象（在浏览器中是 window），而不是新创建的对象实例，可能导致意外的全局变量声明等问题。
- 处理方式：确保在调用构造函数时始终使用 new 关键字。例如：

function Person(name) {
    this.name = name;
}
// 正确调用方式
let person = new Person('John');

属性和方法命名冲突
- 错误描述：当不同的类或对象使用相同的属性或方法名时，会导致命名冲突，使得属性或方法的值被意外覆盖。
- 处理方式：使用更具描述性和唯一性的命名。例如在命名空间模式中，将相关的属性和方法组织在一个对象中。或者使用 ES6 模块，每个模块都有自己独立的作用域。

// 命名空间模式
const MyApp = {
    user: {
        name: 'user1',
        age: 25
    },
    displayUser: function() {
        console.log(`Name: ${this.user.name}, Age: ${this.user.age}`);
    }
};

继承中的错误
- 错误描述：在使用原型链继承或 ES6 类继承时，可能会出现错误。比如在原型链继承中忘记设置子类型的原型为父类型的实例，在 ES6 类继承中没有正确调用 super() 方法。
- 处理方式：
  - 原型链继承：确保设置子类型的原型为父类型的实例，并修正子类型的构造函数指向。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

    - **ES6 类继承**：在子类的构造函数中必须先调用 `super()` 方法，再对 `this` 进行操作。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

闭包和 this 指向问题
- 错误描述：在类的方法中使用闭包时，闭包内的 this 可能指向与预期不符。因为闭包有自己独立的作用域，this 指向取决于函数的调用方式，通常在闭包内 this 不会指向类的实例。
- 处理方式：
  - 使用箭头函数：箭头函数没有自己的 this，它的 this 继承自外层作用域，在类的方法中使用箭头函数定义的闭包，this 会指向类的实例。

class Counter {
    constructor() {
        this.count = 0;
        setInterval(() => {
            this.count++;
            console.log(this.count);
        }, 1000);
    }
}

    - **保存 `this` 的引用**：在方法内部，使用变量保存 `this` 的引用，在闭包中使用该变量。

class Counter {
    constructor() {
        this.count = 0;
        let self = this;
        setInterval(function() {
            self.count++;
            console.log(self.count);
        }, 1000);
    }
}

星途面试题库

面试题：JavaScript 中类和构造函数常见错误及处理方式

知识考点

面试题答案