👨💻 作者简介:程序员半夏 , 一名全栈程序员,擅长使用各种编程语言和框架,如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性,不做切图仔,从订阅本专栏开始!
🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!
文章目录
在JavaScript中,构造函数用于创建对象。例如,
// 构造函数
function Person () {
this.name = 'John',
this.age = 23
}
// 创建对象
const person = new Person();
在上面的示例中,Person()
函数是一个对象构造函数。
要从构造函数创建对象,我们使用new
关键字。
注意:将构造函数的首字母大写被认为是一种良好的习惯。
使用构造函数创建多个对象
在JavaScript中,您可以使用构造函数创建多个对象。例如,
// 构造函数
function Person () {
this.name = 'John',
this.age = 23,
this.greet = function () {
console.log('hello');
}
}
// 创建对象
const person1 = new Person();
const person2 = new Person();
// 访问属性
console.log(person1.name); // John
console.log(person2.name); // John
在上面的程序中,使用相同的构造函数创建了两个对象。
JavaScript的this
关键字
在JavaScript中,当在构造函数中使用this
关键字时,this
指的是创建对象时的对象。例如,
// 构造函数
function Person () {
this.name = 'John',
}
// 创建对象
const person1 = new Person();
// 访问属性
console.log(person1.name); // John
因此,当对象访问属性时,可以直接访问person1.name
属性。
JavaScript构造函数参数
您还可以创建带有参数的构造函数。例如,
// 构造函数
function Person (person_name, person_age, person_gender) {
// 将参数值分配给调用对象
this.name = person_name,
this.age = person_age,
this.gender = person_gender,
this.greet = function () {
return ('Hi' + ' ' + this.name);
}
}
// 创建对象
const person1 = new Person('John', 23, 'male');
const person2 = new Person('Sam', 25, 'female');
// 访问属性
console.log(person1.name); // "John"
console.log(person2.name); // "Sam"
在上面的示例中,我们在创建对象时向构造函数传递了参数。
const person1 = new Person('John', 23, 'male');
和const person2 = new Person('Sam', 25, 'male');
允许每个对象具有不同的属性。如上所示,
console.log(person1.name);
输出John
console.log(person2.name);
输出Sam
创建对象:构造函数 vs 对象字面量
对象字面量通常用于创建单个对象。如果要创建多个对象,则构造函数很有用。例如,
// 使用对象字面量
let person = {
name: 'Sam'
}
// 使用构造函数
function Person () {
this.name = 'Sam'
}
let person1 = new Person();
let person2 = new Person();
从构造函数创建的每个对象都是唯一的。您可以具有与构造函数相同的属性,或者将新属性添加到特定对象中。例如,
// 使用构造函数
function Person () {
this.name = 'Sam'
}
let person1 = new Person();
let person2 = new Person();
// 向person1添加新属性
person1.age = 20;
现在,age
属性是person1
对象特有的,不可用于person2
对象。
然而,如果使用对象字面量创建对象,并且如果使用该对象值定义变量,则变量值的任何更改都将更改原始对象。例如,
// 使用对象字面量
let person = {
name: 'Sam'
}
console.log(person.name); // Sam
let student = person;
// 更改对象的属性
student.name = 'John';
// 更改原始对象的属性
console.log(person.name); // John
当使用对象字面量创建对象时,从该对象派生的任何对象变量将作为原始对象的克隆。因此,您对一个对象所做的任何更改也会反映在另一个对象中。
向对象添加属性和方法
您可以像这样向对象添加属性或方法:
// 构造函数
function Person () {
this.name = 'John',
this.age = 23
}
// 创建对象
let person1 = new Person();
let person2 = new Person();
// 向person1对象添加属性
person1.gender = 'male';
// 向person1对象添加方法
person1.greet = function () {
console.log('hello');
}
person1.greet(); // hello
// 错误代码
// person2没有greet()方法
person2.greet();
输出
hello
Uncaught TypeError: person2.greet is not a function
在上面的示例中,将新属性gender
和新方法greet()
添加到了person1
对象。
然而,这个新属性和方法只添加到了person1
。您无法从person2
访问gender
或greet()
。因此,当我们尝试访问person2.greet()
时,程序报错。
JavaScript对象原型
您还可以使用原型向构造函数添加属性和方法。例如,
// 构造函数
function Person () {
this.name = 'John',
this.age = 23
}
// 创建对象
let person1 = new Person();
let person2 = new Person();
// 向构造函数添加新属性
Person.prototype.gender = 'Male';
console.log(person1.gender); // Male
console.log(person2.gender); // Male
要了解更多关于原型的知识,请访问JavaScript原型。
JavaScript内置构造函数
JavaScript还具有内置的构造函数。其中一些是:
let a = new Object(); // 创建一个新的Object对象
let b = new String(); // 创建一个新的String对象
let c = new Number(); // 创建一个新的Number对象
let d = new Boolean(); // 创建一个新的Boolean对象
在JavaScript中,字符串可以通过以下方式创建为对象:
const name = new String ('John');
console.log(name); // "John"
在JavaScript中,数字可以通过以下方式创建为对象:
const number = new Number (57);
console.log(number); // 57
在JavaScript中,布尔值可以通过以下方式创建为对象:
const count = new Boolean(true);
console.log(count); // true
注意:建议使用基本数据类型并以正常方式创建它们,例如const name = 'John';
,const number = 57;
和const count = true;
。
不应将字符串、数字和布尔值声明为对象,因为它们会减慢程序的运行速度。
注意:在JavaScript中,关键字class
在ES6(ES2015)中引入,它也允许我们创建对象。类在JavaScript中类似于构造函数。要了解更多,请访问JavaScript类。