当前位置：首页 > news >正文

前端知识点---构造函数(javascript)

news 2025/7/5 17:34:25

文章目录

前端知识点---构造函数(Javascript)
1. 定义构造函数
2. 使用构造函数创建对象
3. 工作原理
4. 构造函数与原型
5. 类的语法糖
6. 注意事项

前端知识点—构造函数(Javascript)

在我的文章 “对象” 里我提到了构造函数 , 前端知识点—Javascript的对象(Javascript)
因为day14讲到了"函数" , 所以另起一篇文章. 来讲构造函数 , 这个是属于比较重要的部分

构造函数是一种用于创建和初始化对象的特殊函数。一般与new关键字一起使用，来创建具有相同结构和行为的多个对象。是属于复杂数据类型 , 前面的string , number这些属于简单数据类型 , 注意把基础知识捋顺 , 面试会考的 .

1. 定义构造函数

1 构造函数作用是初始化对象。定义对象的方法。
2 构造函数的名字通常以大写字母开头，以便与普通函数区分。普通函数是小驼峰命名法 .
3 默认返回新创建的对象（除非显式返回另一个对象）

function Person(name, age) {this.name = name;  // 为实例添加属性this.age = age;this.sayHello = function() {console.log(`My name is ${this.name} , I'm ${this.age} years old now'.`);};
}

里面的this是什么东西呢? 看我另一篇文章 , 我把成块的知识点写成专栏方便你们查看前端知识点—this几种用法

2. 使用构造函数创建对象

要使用构造函数创建对象，需要使用new关键字：

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);person1.sayHello();  // 输出: Hello, my name is Alice.
person2.sayHello();  // 输出: Hello, my name is Bob.

例子

function Person(name, age) {this.name = name; // 为新对象添加 name 属性this.age = age;   // 为新对象添加 age 属性this.greet = function() { // 定义一个方法console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);};
}// 使用构造函数创建对象
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);person1.greet(); // Hi, my name is Alice and I'm 25 years old.
person2.greet(); // Hi, my name is Bob and I'm 30 years old.

3. 工作原理

创建新对象：new关键字创建一个空对象。
绑定this：新对象的上下文被绑定到构造函数中的this。
设置原型：新对象的原型被设置为构造函数的prototype属性。
返回对象：构造函数返回这个新对象（如果没有显式返回其他对象）。

4. 构造函数与原型

为了节省内存，可以将方法添加到构造函数的prototype上，而不是每次创建对象时都重新定义方法。

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}.`);
};const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);console.log(person1.sayHello === person2.sayHello); // true

5. 类的语法糖

从ES6开始，JavaScript引入了class语法，它本质上是对构造函数和原型的封装，提供了更清晰的语法。

class Person {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name}.`);}
}const person1 = new Person("Alice", 25);
person1.sayHello();  // 输出: Hello, my name is Alice.

6. 注意事项

如果构造函数中显式返回一个对象，new将返回该对象，而不是this。
如果返回的是一个非对象值，new仍会返回this。

function Person(name) {this.name = name;return { greeting: "Hi" };  // 返回这个对象
}const person = new Person("Alice");
console.log(person);  // 输出: { greeting: "Hi" }