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

yizhihongxing

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 Date toGMTString() 方法

    以下是关于JavaScript Date对象的toGMTString()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的toGMTString()方法 JavaScript的toGMTString()方法返回一个表示对象日期和时间部分的字符串,该字符串为格林威治标准时间(GMT)。 下面是使用对象的toGMTString()方法的示例…

    JavaScript 2023年5月11日
    00
  • javascript中floor使用方法总结

    下面来详细讲解一下“javascript中floor使用方法总结”。 什么是floor函数? floor是Javascript内置的一个Math对象里的函数,可以得到一个小数的整数部分。 floor怎么使用? floor函数的使用很简单,可以直接用Math对象调用: Math.floor(3.14); // 3 上面的代码,调用了Math对象的floor方法…

    JavaScript 2023年5月28日
    00
  • js编写trim()函数及正则表达式的运用

    让我来详细讲解一下如何写js中的trim()函数以及正则表达式的运用。 编写js中的trim()函数 在js中,字符串的trim()函数可以去除字符串两端的空格,但是在一些老版本的浏览器中可能不支持。因此我们可以自己编写一个trim()函数来解决这个问题。 方法一:使用正则表达式 通过正则表达式,我们可以去掉字符串两端的空格。具体实现代码如下: functi…

    JavaScript 2023年6月10日
    00
  • 使用JS实现动态时钟

    使用JS实现动态时钟需要分为以下几个步骤: 第一步:创建HTML文件 在HTML文件中,你需要添加一个指向JavaScript文件的script标签和一个占位符用来显示时间。示例代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt…

    JavaScript 2023年5月27日
    00
  • js实现发送验证码后的倒计时功能

    下面是一个完整的JavaScript实现发送验证码后的倒计时功能攻略,分以下几个步骤: 1. 准备工作 首先,在你的HTML代码中添加一个按钮和一个用于显示时间的容器,如下面的代码所示: <button id="send-btn">发送验证码</button> <span id="countdown…

    JavaScript 2023年6月10日
    00
  • 支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

    以下是关于ValidationSuar框架的使用介绍。 什么是ValidationSuar框架? ValidationSuar是一个用于.net平台的权限验证框架,支持ASP.NET MVC、WebFroM,能够轻松应对各种表单验证需求。 如何使用ValidationSuar框架? 第一步:安装NuGet包 在Visual Studio中,右键点击项目 -&…

    JavaScript 2023年6月10日
    00
  • webgl 系列 —— 着色器语言

    其他章节请看: webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language (图形库着色器语言) GLSL 是一门独立的语言,和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句(if)、函数、数组等等。 GLSL 比较简单。其专门用于编写着色器,舍弃了许多编程语…

    JavaScript 2023年4月18日
    00
  • 仅IE支持clearAttributes/mergeAttributes方法使用介绍

    仅IE支持clearAttributes/mergeAttributes方法使用介绍 在IE浏览器中,我们可以使用 clearAttributes 和 mergeAttributes 方法来操作DOM元素的属性。这两个方法可以帮助我们快速设置或清除一个元素的所有属性。本文将详细介绍这两个方法的使用方法。 clearAttributes方法 clearAttr…

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