JS定义类的六种方式详解

yizhihongxing

JS定义类的六种方式详解

JavaScript 是一门面向对象的编程语言,定义类是面向对象编程中非常重要的部分。在JavaScript中,定义类的方式有六种。

方式一:函数定义类

使用函数定义类是最常见的方式之一。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
const person = new Person('John', 30);
person.greet();

该方法定义了一个名为 Person 的类,该类具有名称、年龄等基本属性,以及一个自定义方法 greet

通过使用 new 关键字创建一个名为 person 的具有给定初始化参数的新 Person 对象,并调用 greet 方法。

方式二:对象字面量定义类

使用对象字面定义类是另一种常见的方式。

const Person = {
  name: '',
  age: 0,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
  init(name, age) {
    this.name = name;
    this.age = age;
  },
};
const person = Object.create(Person);
person.init('John', 30);
person.greet();

这种方法使用对象字面量定义了一个类,名称为 Person,具有名称、年龄等基本属性, 以及两个自定义方法greetinit

使用 Object.create() 创建一个名为 person 的新对象,并执行初始化方法 init 以设置属性,并调用 greet方法。

方式三:工厂函数

使用工厂函数定义类是通过函数返回对象的方式创建的,与前面的函数定义方式略有不同。

function createPerson(name, age) {
  function greet() {
    console.log(`Hello, my name is ${name} and I am ${age} years old.`);
  }
  return {
    name,
    age,
    greet
  };
}
const person = createPerson('John', 30);
person.greet();

使用该方法定义了一个名为 createPerson 的函数,该函数返回一个拥有名称、年龄和 greet 方法的新对象。

创建一个名为 person 并传入初始化参数,该对象具有 greet 方法,并调用该方法。

方式四:类定义

从 ES6 开始,JavaScript 支持使用 class 关键字定义类,该方式更接近传统语言中的定义方式,如 Java 和 C#。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
const person = new Person('John', 30);
person.greet();

使用该方式定义了一个名为 Person 的类,该类具有名称、年龄等基本属性,以及一个自定义方法 greet.

创建一个名为 person 的新 Person 对象,该对象已初始化并具有 greet 方法,并调用该方法。

方式五:继承类

继承是面向对象编程中非常重要的部分。从 ES6 开始,JavaScript 支持 extends 关键字,用以实现继承。

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

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }
  getInfo() {
    console.log(`My name is ${this.name} and my salary is ${this.salary}.`);
  }
}

const employee = new Employee('Tom', 40, 5000);
employee.greet();
employee.getInfo();

该方法定义类 Employee,继承自 Person。同时新增了工资属性,并自定义了新的方法 getInfo

创建一个名为employee的新 Employee 对象,并拥有父类 Person 的初始化值和子类 Employee 的工资值。

方式六:单例模式

单例模式是保证只存在一个类实例对象的模式。 JavaScript 中,在创建对象方面,可以使用函数闭包加上对象字面量的方式,实现单例定义类。

const Singleton = (function(){
  let instance;
  function Singleton() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }
  return Singleton;
}());

const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1==s2);

该方法使用闭包和对象字面量结合的方式,创建了一个名为 Singleton 的类。使用第一个 Singleton 实例。

创建了两个名为 s1s2 的实例对象,两者相等,说明该方法实现了单例模式。

结论

以上就是 JavaScript 定义类的六种方式。学习并掌握这些方法,有助于你更好地理解面向对象编程,写出更加灵活的 JavaScript 代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS定义类的六种方式详解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 浅谈JS封闭函数、闭包、内置对象

    浅谈JS封闭函数、闭包、内置对象 JS封闭函数 JS的封闭函数,又称为IIFE(Immediately-Invoked Function Expression),是指定义一个匿名函数并立即执行该函数的语法结构。 封闭函数的特点: 定义一个函数,并立即自动调用该函数; 可以在全局作用域或另一个函数内部作用域中定义,从而实现封装变量和方法; 封闭函数的返回值可以…

    JavaScript 2023年6月10日
    00
  • javascript将url解析为json格式的两种方法

    当我们需要将 URL 解析为 JSON 格式时,有两种主要的方法可供选择: 方法一:手动解析 URL 字符串 步骤如下: 从 URL 字符串中提取出查询字符串部分(即由 “?” 后面的所有内容组成的字符串); 将查询字符串使用 “&” 和 “=” 进行分隔,封装成键值对的形式; 使用 Javascript 对象字面量语法创建 JSON 对象。 代码示…

    JavaScript 2023年5月27日
    00
  • javascript实现获取图片大小及图片等比缩放的方法

    以下是详细讲解“javascript实现获取图片大小及图片等比缩放的方法”的完整攻略。 获取图片大小 在JavaScript中,获取图片大小的主要方法是通过HTML5中的Image对象获取。具体步骤如下: 创建Image对象 给Image对象设置图片路径 等待图片加载完成 当图片加载完成后,可以获取到图片的width和height属性,就可以得到图片的大小了…

    JavaScript 2023年5月28日
    00
  • javascript实现计算指定范围内的质数示例

    下面是详细讲解JavaScript实现计算指定范围内的质数的完整攻略。 目录 什么是质数? 计算指定范围内的质数的思路 实现计算指定范围内的质数的步骤 示例1:计算100以内的质数 示例2:计算1000以内的质数 什么是质数? 质数指的是只能被1和它本身整除的自然数,如2、3、5、7、11等等。质数在数学上具有非常重要的地位,也是密码学等领域的基础。 计算指…

    JavaScript 2023年5月28日
    00
  • Android中Okhttp3实现上传多张图片同时传递参数

    完整攻略: 导入Okhttp3库 首先需要在项目中导入Okhttp3库。在build.gradle文件中添加以下依赖: implementation ‘com.squareup.okhttp3:okhttp:4.9.1’ 实现上传多张图片 使用Okhttp3上传多张图片可以借助MultipartBody方式,具体实现过程如下: //创建OkHttpClien…

    JavaScript 2023年6月10日
    00
  • JavaScript中json使用自己总结

    下面是关于“JavaScript中json使用”的攻略: 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它可以让数据以易于阅读的形式在程序之间进行传输,包括文本、数字、布尔值、数组和对象等类型的数据。 JSON的格式很简单明了,它由键值对组成,键必须是字符串,值可以是任意数据类型。JSON的语法…

    JavaScript 2023年5月27日
    00
  • 深入理解setTimeout函数和setInterval函数

    深入理解setTimeout函数和setInterval函数攻略 JavaScript 的 setTimeout 和 setInterval 函数是在开发中经常使用的工具,它们都可以用来延时执行某些代码。虽然看上去它们很简单,但是深入理解它们的原理和用法确实很重要,本文将从下面三个方面进行介绍: setTimeout 和 setInterval 函数的基本用…

    JavaScript 2023年6月11日
    00
  • 用JavaScript获取DOM元素位置和尺寸大小的方法

    获取DOM元素位置和尺寸大小对于前端开发来说非常重要,这篇文章将向你介绍使用JavaScript获取DOM元素位置和尺寸大小的方法。 获取DOM元素位置 getBoundingClientRect()方法 使用HTMLElement对象的getBoundingClientRect()方法可以获取一个元素相对于视口的位置和尺寸。该方法返回一个DOMRect对象…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部