首页 > 编程语言 >JavaScript 面向对象

JavaScript 面向对象

时间:2023-03-24 18:04:30浏览次数:37  
标签:console name Person age JavaScript 面向对象 class 属性

JavaScript 面向对象_初始化

类和对象

类是用于定义对象的模板或蓝图;它包含对象的属性和方法,我们可以使用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.`);
  }
}

在上面的例子中,我们定义了一个名为Person的类,它有两个属性:nameage,以及一个方法sayHello,构造函数constructor用于初始化对象的属性。

对象是类的一个实例,我们可以使用new关键字来创建对象。

let person1 = new Person('Alice', 25);

在上面的例子中,我们创建了一个名为person1Person对象,并将其属性初始化为Alice25

属性和方法

属性是对象的特征或状态。它们用于描述对象的特点。我们可以在构造函数中初始化对象的属性。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

在上面的例子中,我们定义了一个Person类,并在构造函数中初始化了两个属性:nameage

方法是对象的行为或操作。它们用于描述对象的行为。在类中,我们可以定义一组方法,以便对对象执行不同的操作。

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.`);
  }
}

在上面的例子中,我们定义了一个sayHello方法,它用于输出对象的属性。

继承

继承是面向对象编程的一个重要概念。它允许我们从现有的类创建新类,从而在不重复代码的情况下扩展现有的功能。在JavaScript中,我们可以使用extends关键字来创建一个新类,它从现有的类继承属性和方法。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I am in grade ${this.grade}.`);
  }
}

在上面的例子中,我们定义了一个名为Student的新类,它从现有的Person类继承了nameage属性和sayHello方法。Student类还有一个名为grade的新属性,并覆盖了sayHello方法以添加新信息。

多态

多态是面向对象编程的另一个重要概念。它允许不同的类实现相同的方法,以便在不同的情况下以不同的方式处理相同的请求。在JavaScript中,我们可以使用相同的方法名在不同的类中实现不同的行为。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const animals = [
  new Dog('Fido'),
  new Cat('Fluffy'),
  new Dog('Max'),
  new Cat('Whiskers')
];

animals.forEach(animal => {
  animal.speak();
});

在上面的例子中,我们定义了一个名为Animal的基类,并从中派生出DogCat类。这两个类都实现了Animalspeak方法,并在方法中以不同的方式输出信息。最后,我们创建了一些DogCat的实例,并在它们上面调用speak方法,以验证它们会输出不同的信息。

封装

当使用面向对象编程时,我们通常会封装数据和方法以确保对象的安全性和可维护性。在JavaScript中,封装是通过创建类和使用访问修饰符来实现的。

// 创建一个类
class Person {
  // 声明私有属性
  #name;
  #age;

  // 构造函数,用于初始化对象
  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  // 声明公有方法,用于访问私有属性
  getName() {
    return this.#name;
  }

  getAge() {
    return this.#age;
  }
}

// 创建一个Person对象
const person = new Person('张三', 18);

// 访问私有属性(会报错)
console.log(person.#name); // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class

// 访问公有方法
console.log(person.getName()); // '张三'
console.log(person.getAge()); // 18

标签:console,name,Person,age,JavaScript,面向对象,class,属性
From: https://blog.51cto.com/u_16007952/6147617

相关文章

  • JavaScript ES modules import and export with trailing commas All In One
    JavaScriptESmodulesimportandexportwithtrailingcommasAllInOneJavaScript最佳实践export+trailingcommasexport{module1,module2,//........
  • java面向对象
    封装的优点1.良好的封装能够减少耦合。2.类内部的结构可以自由修改。3.可以对成员变量进行更精确的控制。4.隐藏信息,实现细节。继承的特性子类拥有......
  • 系统化学习前端之JavaScript(01)
    前言JavaScript由三部分组成:ECMAScript,DOM,BOM。ECMAScript:JavaScript核心语法,本篇主要介绍ECMAScript,即JavaScript核心语法。DOM:文件对象模型,主要作用是通过JavaS......
  • javascript 高级编程系列 - Set集合与Map集合
    ES6中新增的Set集合类型是一种有序列表,其中含有一些相互独立的非重复值,通过Set集合可以快速访问其中的数据,更有效地追踪各种离散值。1.创建Set集合并添加元素调用newS......
  • vue全家桶进阶之路2:JavaScript
    JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在Web开发领域有着举足轻重的地位。JavaScript与HTML和CSS......
  • JavaScript的数学计算库:decimal.js
    阅读目录官网文档decimal.js特性安装实例代码加减乘除官网文档文档:https://mikemcl.github.io/decimal.js/github:https://github.com/MikeMcl/decimal.jsnpm地址:https......
  • JavaScript RegExp 对象
    阅读目录RegExp对象修饰符JavaScriptRegExpi修饰符JavaScriptRegExpg修饰符方括号JavaScriptRegExp[abc]表达式JavaScriptRegExp[^abc]表达式元字符JavaScript......
  • JavaScript DOM总结(文档事件)
    阅读目录DOM文档事件窗口事件表单事件键盘事件鼠标事件DOM文档事件事件概述HTML事件可以触发浏览器中的行为,比方说当用户点击某个HTML元素时启动一段JavaScript。窗口事......
  • JavaScript调试技巧
    阅读目录阐述debuggerconsole.table(animals)用表格显示对象使用console.time()和console.timeEnd()测试循环console.log()和console.dir()的区别阐述我们调试Javas......
  • 面向对象
    面向对象1.初识面向对象面向过程&面向对象属性+方法=类对于描述复杂的事物,为了从宏观上把握,从整体上合理分析,我们需要使用面向对象的思路来分析整个系统,但是具体到围观......