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实现生成并下载txt文件方式

    生成并下载 txt 文件是 JavaScript 中常见的需求之一,我们可以通过以下步骤来实现: 1. 创建 Blob 对象 首先,我们需要将文本内容转换成 Blob 对象。Blob 表示二进制数据,它的内容可以是文本、图片、音视频等,可以通过 Blob 构造函数创建。 示例代码: const content = "Hello, World!&qu…

    JavaScript 2023年5月27日
    00
  • 详解用js代码触发dom事件的实现方案

    下面是详解用JS代码触发DOM事件的实现方案的攻略。 什么是DOM事件? DOM事件,是当用户与网页交互时产生的事件。例如,当用户点击鼠标、滚动页面或按下键盘时,都会触发DOM事件。 如何用JS代码触发DOM事件? 我们可以使用JS代码来模拟用户与网页交互,从而触发DOM事件。以下是三种JS代码触发DOM事件的实现方案: 利用dispatchEvent方法 …

    JavaScript 2023年6月10日
    00
  • vue elementui 实现搜索栏公共组件封装的实例代码

    下面我将为你讲解”vue elementui 实现搜索栏公共组件封装的实例代码”的完整攻略。 一、需求分析 在实现搜索栏公共组件封装之前,我们需要先确定组件的需求,包括: 搜索栏包含的输入字段类型(文本输入、下拉框选择等); 搜索栏提交查询的方式(点击查询按钮、按下Enter键等); 查询参数的名称和格式; 查询结果的展示方式。 例如我们可以将搜索栏中的输入…

    JavaScript 2023年6月10日
    00
  • js获取当前日期前七天的方法

    要获取当前日期前七天的方法,可以使用JavaScript中的Date对象进行操作。以下是具体步骤: 步骤 1:获取当前日期 使用JavaScript内置的Date对象,可以获取当前的年月日。 const today = new Date(); const year = today.getFullYear(); const month = today.getM…

    JavaScript 2023年6月10日
    00
  • 总结js函数相关知识点

    以下是总结 JavaScript 函数相关知识点的攻略: JavaScript 函数基础 定义函数 function funcName(param1, param2, …, paramN) { // 函数体 return expression; } 其中,funcName 是函数名,param1到paramN是参数,函数体中的 expression 是函…

    JavaScript 2023年5月27日
    00
  • 简介JavaScript中的italics()方法的使用

    当需要将一段文字以斜体展示时,我们可以使用JavaScript中的italics()方法。下面,我将详细介绍italics()方法的使用方法。 方法介绍 在JavaScript中,italics()方法用于将字符串以斜体的样式呈现出来。具体的使用方法如下: string.italics() 其中,string代表要进行斜体处理的文本字符串。该方法返回值为一个…

    JavaScript 2023年6月10日
    00
  • 2014 年最热门的21款JavaScript框架推荐

    2014 年最热门的21款JavaScript框架推荐 简介 本篇文章将会为您推荐 2014 年最热门的 21 款 JavaScript 框架。其中包括前端和后端框架、JavaScript 模板引擎、数据可视化工具等。在这些框架中,您可以选择最适合您项目需求的框架,轻松实现快速开发。 前端框架 1. AngularJS AngularJS是一个由谷歌开发的前…

    JavaScript 2023年5月18日
    00
  • javascript:void(0)的含义及用法实例

    当我们在网页中点击一个按钮或链接时,为了防止页面刷新或跳转,常常会在href属性中使用“javascript:void(0)”这个值。那么这个值的含义以及用法实例是什么呢?接下来我们详细讲解。 含义 在javascript中,void是一个运算符,用于返回undefined。因此,使用“javascript:void(0)”就是将当前链接的默认行为赋值为“什…

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