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日

相关文章

  • Json字符串转换为JS对象的高效方法实例

    下面是“Json字符串转换为JS对象的高效方法实例”的完整攻略: 1. 使用JSON.parse()方法 在JavaScript中,我们可以使用JSON.parse()方法将JSON字符串转换为JS对象。这个方法非常简单,只需要将JSON字符串作为参数传递进去,就可以得到对应的JS对象。 例如,假设我们有一个JSON字符串: var jsonString =…

    JavaScript 2023年5月27日
    00
  • 分享19个JavaScript 有用的简写写法

    下面为您详细讲解“分享19个JavaScript 有用的简写写法”的完整攻略。 前言 JavaScript 是目前应用广泛的编程语言之一,对于初学者来说,熟练使用一些简写写法可以提高编码效率,降低调试成本。本文将分享19个 JavaScript 有用的简写写法,方便开发者们在使用 JavaScript 过程中更加高效、便捷地完成编码工作。 内容 1. Ter…

    JavaScript 2023年5月19日
    00
  • vue3:vue2中protoType更改为config.globalProperties问题

    在Vue.js 3中,一些API的使用方式发生了更新。其中,一个重要的改变是将Vue 2.x中的全局对象$和prototype更改为了config.globalProperties,以便更好的支持TypeScript类型和减少变量泄漏的问题。 下面是完整攻略: 1. 理解问题 在Vue.js 2.x 版本中,我们可以通过以下方式为Vue实例添加全局属性: V…

    JavaScript 2023年6月11日
    00
  • Dialog底部弹出自定义view并且伴随动画弹出和消失

    要实现Dialog底部弹出自定义view并且伴随动画弹出和消失,我们可以使用以下步骤: 自定义Dialog布局:创建一个XML文件来定义我们Dialog的布局,包括我们想要显示的视图。 示例1: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu…

    JavaScript 2023年6月10日
    00
  • 浅谈HTML5 Web Worker的使用

    HTML5 Web Worker是一个在HTML5规范下新增的技术,用于在Web应用程序中提供多线程支持,使得JavaScript线程可以在后台同时执行而不影响用户界面的渲染和响应。 Web Worker的使用需要几个步骤:1. 创建一个Web Worker对象2. 给Worker对象绑定一个JS文件,用于在Worker线程中执行3. 在主线程通过postM…

    JavaScript 2023年5月28日
    00
  • js中cookie的添加、取值、删除示例代码

    下面是JS中操作Cookie的完整攻略,包括添加、取值、删除示例代码: 添加Cookie 在JS中添加Cookie,我们可以利用document.cookie来设置Cookie值。下面是添加Cookie的示例代码: function setCookie(cname, cvalue, exdays) { let d = new Date(); d.setTim…

    JavaScript 2023年6月11日
    00
  • Apache加速模块mod_pagespeed安装使用详细介绍

    下面是“Apache加速模块mod_pagespeed安装使用详细介绍”的完整攻略: 1. 简介 mod_pagespeed是一个Apache的开源速度优化模块,可自动优化网页以提高加载速度并提升用户体验。本文将介绍如何在Apache服务器上安装和配置mod_pagespeed,并给出两个示例说明其用法。 2. 安装 安装mod_pagespeed的步骤如下…

    JavaScript 2023年6月11日
    00
  • iframe子页面与父页面在同域或不同域下的js通信

    对于iframe子页面与父页面通信,需要注意同域或不同域等情况。 同域下的js通信 当子页面和父页面在同一个域名下时,js通信可以通过window.parent对象来进行。以下是一个简单的示例。 父页面代码: <!DOCTYPE html> <html> <head> <title>父页面</title&…

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