JS创建类、字面量构建对象、对象动态添加方法、对象方法与类的成员函数

最新推荐文章于 2024-08-08 10:17:16 发布

小卡规划

最新推荐文章于 2024-08-08 10:17:16 发布

阅读量376

点赞数 10

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_52133989/article/details/136376370

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中通过函数构造器、ES6Class语法、类表达式以及对象字面量创建类的方法，同时对比了对象方法和类的成员函数，并讨论了对象动态添加方法的特点。

摘要由CSDN通过智能技术生成

JS创建的类的方法

1.函数构造器 (Constructor Function)

函数构造器的方式是通过一个构造函数来创建类，根据ES6的语法，类的构造函数是写在class内部的以实现成员变量的初始化，但是我们也可以通过函数构造器的方式在创建类的同时也完成了类的构造函数。以下实例实现创建Person类。

function Person(name, age) {
  this.name = name;
  this.age = age;
  //函数构造器中函数必须带this
  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  };
}
const person = new Person("John", 25);
person.sayHello();

2.使用ES6的class语法

这种方式是最容易理解的方法，即利用class关键字后跟{}进行类的创建。

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

const person = new Person("John", 25);
person.sayHello();

3.使用类表达式 (Class Expression)

与函数构造的“函数表达式”类似，类表达式由于是表达式，因此会有“=”的赋值操作以体现“表达”，首先创建变量，通过将class类型赋值给变量的方式，实现类的创建。

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

const person = new Person("John", 25);
person.sayHello();

字面量方法构建对象

利用对象字面量这一概念可以快速的创建一个对象，而不用先创建类再对类进行实例化创建对象。

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  isStudent: false,
  sayHello: function() {
    console.log("Hello, my name is " + this.firstName + " " + this.lastName + ".");
  }
};

需要注意的是：对象字面量创建的对象不属于任何特定的类

对象方法与类的成员函数

在 JavaScript 中，对象方法和类的成员函数有一些相似之处，但也存在一些重要的区别。

1.对象方法

在JS中对象方法是指对象中包含的函数，对象方法可以通过两种方法定义，即对象字面量的方式、函数构造器方法（this指向具体的对象）
构造器：

// 构造函数
function Car(brand, model, year) {
    // 使用 this 关键字初始化对象的属性
    this.brand = brand;
    this.model = model;
    this.year = year;

    // 定义对象的方法
    this.startEngine = function() {
        console.log('Engine started!');
    };

    this.drive = function(speed) {
        console.log(`Driving at ${speed} km/h`);
    };
}

// 使用构造函数创建对象实例
const myCar = new Car('Toyota', 'Camry', 2022);

// 调用对象的方法
myCar.startEngine(); // 输出: Engine started!
myCar.drive(60); // 输出: Driving at 60 km/h

【有this为对象方法，无this为类的函数，并且构造器中的属性必须都要带this】

对象字面量：

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

2.类的成员函数

类的成员函数的定义主要有三种方式：ES6class语法中将函数写在构造器外面，类表达式写在构造器外面
【二者只是写法不同，本质相同】

对象动态添加方法

在JS中允许对象动态添加方法，即当对象已经创建后，直接通过点符号定义对象方法，但是该方法只为该方法独享。

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function Person(name,id){
	this.name = name;
    this.id = id;
    this.say = function(){
    	this.name = 'hahaha';
    }
    this.Say = function(){
    	console.log("hahaha");
    }
}
const me = new Person(1,1)
//me对象的方法call，其他同类对象不可使用
me.call = function(){
	console.log("hahaha");
}
document.getElementById("demo").innerHTML = me.call()
</script>

</body>
</html>