Javascript基于对象三大特性(封装性、继承性、多态性)

JavaScript是基于对象设计的一种编程语言,其三大特性分别是封装性、继承性和多态性。下面我们将对这三个特性分别进行详细的介绍和示例说明。

封装性

封装性是指将对象的属性和方法组合成一个单独的单元,即封装成一个类。封装性可以隐藏对象的具体实现方式,只暴露必要的接口给外部使用,提高代码的安全性和可维护性。

示例一

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('Tom', 18);
person.sayHello(); // Hello, my name is Tom
console.log(person.age); // 18

在上面的示例代码中,我们通过定义一个Person类,将对象的nameage属性和sayHello()方法封装成一个单独的单元。外部只需要通过类的实例对象即可访问类中的属性和方法。

示例二

const person = {
  name: 'Tom',
  age: 18,
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // Hello, my name is Tom
console.log(person.age); // 18

在上面的示例代码中,我们通过一个对象字面量来封装对象。对象的属性和方法都集中在一个对象内部,只暴露必要的接口给外部访问。

继承性

继承是指子类可以继承父类的属性和方法,同时也可以覆盖父类的方法和属性。继承可以减少重复代码和提高代码的可重用性。

示例一

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

const dog = new Dog('Fido');
dog.speak(); // Fido barks.

在上面的示例代码中,我们定义了一个Animal类,拥有一个name属性和speak()方法。然后我们将Animal类作为父类,定义一个Dog类继承自Animal类。在Dog类中,我们定义了一个speak()方法,覆盖了父类的speak()方法。这样Dog类就继承了Animal类的属性和方法,并且扩展自己的行为。

示例二

function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
}

const dog = new Dog('Fido');
dog.speak(); // Fido barks.

在上面的示例代码中,我们通过构造函数的方式实现了继承。首先我们定义了一个Animal构造函数,拥有一个name属性和speak()方法。然后我们定义了Dog构造函数,通过调用Animal构造函数的call()方法来继承Animal的属性和方法。同时通过修改Dog类的原型,使其继承自Animal的原型,并且通过重新指定constructor属性来修正指向。在Dog类中,我们定义了一个speak()方法,覆盖了父类的speak()方法。这样Dog类就继承了Animal类的属性和方法,并且扩展自己的行为。

多态性

多态性是指同一种方法可以在不同的对象上有不同的行为。多态性可以提高代码的灵活性和可扩展性。

示例一

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 dog = new Dog('Fido');
const cat = new Cat('Nyan');
const animals = [dog, cat];

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

在上面的示例代码中,我们定义了一个Animal类,和两个继承自Animal类的子类DogCat。在DogCat类中,我们覆盖了Animal类的speak()方法,拥有了自己的行为。在主程序中,我们创建了一个Dog类和一个Cat类对象,并将它们放在一个数组中。然后我们通过数组的forEach()方法,遍历数组中的每个元素,并执行animal.speak()方法。由于DogCat类都实现了speak()方法,并且具有不同的行为,所以在遍历数组时会执行不同的行为。

示例二

function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
}

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.speak = function() {
  console.log(`${this.name} meows.`);
}

const dog = new Dog('Fido');
const cat = new Cat('Nyan');
const animals = [dog, cat];

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

在上面的示例代码中,我们通过构造函数的方式实现了多态性。首先我们定义了一个Animal构造函数,拥有一个name属性和speak()方法。然后我们定义了DogCat构造函数,通过调用Animal构造函数的call()方法来继承Animal的属性和方法。同时通过修改DogCat类的原型,使其继承自Animal的原型,并且通过重新指定constructor属性来修正指向。在DogCat类中,我们定义了一个speak()方法,分别覆盖了Animal类的speak()方法,拥有了自己的行为。在主程序中,我们创建了一个Dog类和一个Cat类对象,并将它们放在一个数组中。然后我们通过数组的forEach()方法,遍历数组中的每个元素,并执行animal.speak()方法。由于DogCat类都实现了speak()方法,并且具有不同的行为,所以在遍历数组时会执行不同的行为。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript基于对象三大特性(封装性、继承性、多态性) - Python技术站

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

相关文章

  • JavaScript制作简单计算器功能

    JavaScript可以用于制作简单的计算器功能。以下是实现此功能的步骤: 1. HTML布局 首先,在HTML文件中创建一个表单,包含数字和运算符按钮以及计算结果的文本框。例如: <form> <input type="text" id="result" name="result&quot…

    JavaScript 2023年5月28日
    00
  • 微信小程序 Page()函数详解

    微信小程序 Page() 函数详解 什么是 Page() 函数 在微信小程序中,一个页面通常对应着一个 .js 文件,这个 .js 文件中定义了一个名为 Page() 的函数。Page() 函数是小程序开发中最基础、最重要的函数之一,它用于定义一个页面,包括页面的生命周期函数、页面事件处理函数以及数据等内容。 Page() 函数语法 Page({ data:…

    JavaScript 2023年6月11日
    00
  • websocket直接绕过JS加密示例及思路原理

    下面是对“websocket直接绕过JS加密示例及思路原理”的完整攻略。 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得浏览器和服务器之间的数据交换变得更加实时和高效。 WebSocket旨在通过在数据传输过程中进行有效的适应和优化,使Web应用程序更加互动式和实时化。能够支持长时间开放的TCP连接,同时为W…

    JavaScript 2023年5月19日
    00
  • JS中取二维数组中最大值的方法汇总

    当我们需要在 JavaScript 中取二维数组中的最大值时,可能会遇到一些问题。下面我为大家详细讲解 JS 中取二维数组中最大值的方法汇总。 方法一:使用双重循环 这种方法比较直观,可以使用双重循环遍历整个二维数组,然后找到其中最大值。 function findMaxIn2DArray(arr) { let max = arr[0][0]; for (l…

    JavaScript 2023年5月27日
    00
  • 创建echart多个联动的示例代码

    创建 ECharts 多个联动的示例代码需要以下几个步骤: 引入 ECharts 的资源文件 首先,在你的 HTML 文件中,需要按照以下方式引入 ECharts 的资源文件: <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"&g…

    JavaScript 2023年6月10日
    00
  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    浅谈JS函数三种定义方式 在JavaScript中,函数也是对象。定义函数的方法有三种:函数声明、函数表达式和Function构造函数。它们的语法如下: 函数声明 function fnDeclaration(arg1, arg2, …) { // 函数体 } 函数声明是函数最基本的定义方式。它是在函数执行前就会被解析并创建,所以可以先调用函数再声明函数…

    JavaScript 2023年5月27日
    00
  • javascript中String类的subString()方法和slice()方法

    当我们需要对字符串进行裁剪或切片操作时,JavaScript中的String类提供了两个常用的方法:substring()和slice()。这两种方法都能够将一个字符串切分为多个子串,但它们有一些不同之处。 substring()方法 substring()方法用于将字符串中的一部分截取出来,返回一个新的字符串。其接受两个参数,分别代表子字符串的起始位置和终…

    JavaScript 2023年5月28日
    00
  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object的区别(详解) 在JavaScript中,object和Object是两个非常重要的概念,它们虽然名字相似,但它们之间存在着一些区别。下面将详细讲解这两个概念之间的区别。 object object是JavaScript中的一种原始数据类型,也被称为“对象类型”。object可以定义为一个独立的变量,也可以作为…

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