Javascript中构造函数要注意的一些坑

2023年5月18日上午8:56 • JavaScript

下面是Javascript中构造函数要注意的一些坑的完整攻略。

1. 构造函数的概念

在Javascript中，构造函数是一种特殊的函数，用来创建对象，它与普通函数在语法上没有区别，但是它的调用方式和作用有所不同。构造函数通常以大写字母开头，这是为了与普通函数区分开来。

2. 构造函数的使用

使用构造函数创建对象的方法很简单，只需要在函数内部使用this关键字创建属性和方法，然后使用new关键字调用该构造函数即可。例如，下面是一个简单的构造函数示例：

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", and I am " + this.age + " years old.");
  }
}

var person1 = new Person("Alice", 25);
var person2 = new Person("Bob", 30);

person1.sayHello(); // 输出：Hello, my name is Alice, and I am 25 years old.
person2.sayHello(); // 输出：Hello, my name is Bob, and I am 30 years old.

在上面的例子中，我们使用构造函数创建了两个Person对象，并且每个对象都有一个sayHello方法。

3. 构造函数的坑

虽然构造函数使用起来很简单，但是在实践中还是有一些需要注意的坑点，下面我们来逐一讲解。

3.1 没有使用new关键字

如果在调用构造函数的时候没有使用new关键字，那么this关键字就会指向全局对象，这样就会导致构造函数内部的属性和方法无法正确的绑定到对象上。例如，下面是一个错误示例：

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", and I am " + this.age + " years old.");
  }
}

var person = Person("Alice", 25); // 错误的调用方式，没有使用new关键字

person.sayHello(); // 报错：TypeError: Cannot read property 'sayHello' of undefined

在上面的例子中，我们在调用Person函数的时候没有使用new关键字，这导致this关键字指向全局对象，从而导致person对象未定义。

3.2 在构造函数中定义方法时的注意事项

在构造函数中定义方法时，每次实例化对象时都会重新定义该方法，这会造成内存浪费。推荐的做法是将方法定义在原型对象中，这样就可以实现方法共享并且避免内存浪费。例如，下面是一个正确的示例：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + ", and I am " + this.age + " years old.");
}

var person1 = new Person("Alice", 25);
var person2 = new Person("Bob", 30);

person1.sayHello(); // 输出：Hello, my name is Alice, and I am 25 years old.
person2.sayHello(); // 输出：Hello, my name is Bob, and I am 30 years old.

在上面的例子中，我们使用了原型对象来定义sayHello方法，这样就实现了方法共享和避免内存浪费。