ES6 - 构造函数

ES6 - 构造函数 首页 / ES6入门教程 / ES6 - 构造函数

JavaScript中,构造函数用于创建对象。例如,

// 构造函数
function Person () {
    this.name = 'John',
    this.age = 23
}

// 创建一个对象
const person = new Person();

在上面的示例中, function 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

在上面的程序中,使用相同的构造函数创建了两个对象。

This关键字

在JavaScript中,当在构造函数中使用this关键字时,this会在创建对象时引用该对象。例如,

// 构造函数
function Person () {
    this.name = 'John',
}

// 创建对象
const person1 = new Person();

//访问属性
console.log(person1.name); //John

因此,当对象访问属性时,它可以直接使用 person1.name 来访问属性。

构造函数参数

您还可以使用参数创建构造函数。例如,

// 构造函数
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');

这允许每个对象具有不同的属性。如上图所示

链接:https://www.learnfk.comhttps://www.learnfk.com/es6/constructor-function.html

来源:LearnFk无涯教程网

console.log(person1.name); 给出 John

console.log(person2.name); 给出 Sam

构造函数与对象

  • 对象通常用于创建单个对象。如果要创建多个对象,则构造函数非常有用。例如,
//使用对象字面量
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';

// 更改 origins 对象属性
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

// Error code
// person2 没有 greet() 方法
person2.greet();

输出

hello
Uncaught TypeError: person2.greet is not a function

在上面的示例中,新属性 gender 和新方法 greet()被添加到 person1 对象。

但是,此新属性和方法仅添加到 person1 中。您无法从 person2 访问gender greet()。因此,当无涯教程尝试访问 person2.greet(); 时,程序将给出错误信息

对象原型

您还可以使用 prototype 将属性和方法添加到构造函数中。例如,

// 构造函数
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还具有内置的构造函数。他们之中有一些是:

let a = new Object();   //A new Object object
let b = new String();   //A new String object
let c = new Number();   //A new Number object
let d = new Boolean();  //A new Boolean object

在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'; constnumber = 57; const count = true;

您不应将字符串,数字和布尔值声明为对象,因为它们会使程序变慢。

注意:在JavaScript中,关键字 class 是ES6(ES2015)中引入的,它也允许创建对象。类类似于JavaScript中的构造函数。要了解更多信息,请访问 JavaScript 类

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

左耳听风 -〔陈皓〕

网络编程实战 -〔盛延敏〕

物联网开发实战 -〔郭朝斌〕

MySQL 必知必会 -〔朱晓峰〕

说透芯片 -〔邵巍〕

超级访谈:对话张雪峰 -〔张雪峰〕

计算机基础实战课 -〔彭东〕

AI大模型企业应用实战 -〔蔡超〕

工程师个人发展指南 -〔李云〕

好记忆不如烂笔头。留下您的足迹吧 :)