Javascript之面向对象–封装

Javascript之面向对象--封装

什么是封装

封装(Encapsulation)是面向对象编程的三大特性之一,它指的是将程序中的数据和方法包装在一起,形成一个类(Class),并且对外部隐藏这些实现的细节,只把公共的接口(接口就是能够被外部访问到的数据和方法)暴露出来,外部无法直接访问类内部的变量或函数。

封装能够提供以下优点:

  • 隐藏实现细节,保证数据的安全性;
  • 提高代码的可维护性,方便修改和拓展;
  • 简化编程,降低出错率。

Javascript中如何实现封装

在Javascript中,我们可以通过创建对象(Object)和类(Class)来实现封装。在对象的实现中,可以通过闭包(Closure)实现私有属性和方法的封装。在类的实现中,则可以通过ES6中的Class关键字来实现。

通过闭包实现封装

在Javascript中,闭包能够创建私有变量,而这些变量对于外部是不可见的,因此能够实现封装。一般情况下,我们用闭包来创建一个对象(Object),对象的属性和方法都在闭包里定义。

下面是一个例子:

function createPerson(name) {
  let age = 0; // 私有属性
  function getAge() { // 私有方法
    return age;
  }
  function setAge(newAge) { // 私有方法
    if (newAge >= 0 && newAge <= 120) {
      age = newAge;
    } else {
      throw new Error('年龄超出范围');
    }
  }
  return {
    getName() {
      return name;
    },
    getAge,
    setAge
  };
}

let person = createPerson('张三');
console.log(person.getName()); // 输出:张三
console.log(person.getAge()); // 输出:0
person.setAge(18);
console.log(person.getAge()); // 输出:18

在这个例子中,我们通过createPerson函数创建了一个包含私有属性和方法的对象。对象的外部只能通过公共接口getName、getAge和setAge来获取和修改数据,而不能直接访问age变量和getAge、setAge方法。

通过ES6的Class实现封装

在ES6中,我们可以使用Class关键字来声明一个类,类中包含了构造函数、属性和方法。

下面是一个例子:

class Person {
  #age = 0; // 私有属性
  // 构造函数
  constructor(name) {
    this.name = name; // 共有属性
  }
  // 公有方法
  getName() {
    return this.name;
  }
  // 私有方法
  #checkAge(newAge) {
    if (newAge >= 0 && newAge <= 120) {
      this.#age = newAge;
    } else {
      throw new Error('年龄超出范围');
    }
  }
  // 公有方法
  getAge() {
    return this.#age;
  }
  // 公有方法
  setAge(newAge) {
    this.#checkAge(newAge);
  }
}

let person = new Person('张三');
console.log(person.getName()); // 输出:张三
console.log(person.getAge()); // 输出:0
person.setAge(18);
console.log(person.getAge()); // 输出:18

在这个例子中,我们通过Class声明了一个Person类,类中包含了共有属性、私有属性、共有方法和私有方法,并且使用了ES6中的#符号来声明私有属性和方法。类的外部只能通过公共接口getName、getAge和setAge来获取和修改数据,而不能直接访问age变量和#checkAge方法。

总结

通过上面的例子,我们可以看到,通过封装,可以实现对数据和方法的保护,使程序更加安全和可维护。在Javascript中,我们可以通过闭包和Class来实现封装,它们都有各自的适用场景,需要根据实际情况选择使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript之面向对象–封装 - Python技术站

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

相关文章

  • 正则表达式详述 三

    正则表达式详述 三 – 完整攻略 正则表达式的元素 正则表达式(Regular Expression)是由原子和运算符组成的表达式,它可以用来描述字符串的规律和特征。在正则表达式中,原子是最基本的单位,它可以是任何单个字符、一组字符或者特殊的字符。 下面介绍几种常用的正则表达式元素: 字符 在正则表达式中,字符指的是每一个单一的字符,包括字母、数字、标点符号…

    JavaScript 2023年6月10日
    00
  • JS中的三个循环小结

    JS中有三个循环语句:for循环、while循环和do-while循环。这三个循环语句都能够让我们方便地对数组或对象进行遍历,执行重复的操作。 1. for循环 for循环是JS中最常用的循环语句之一,能够让你重复执行一个操作多次,for循环含有三个表达式:起始表达式、终止表达式和递增表达式。 语法: for (起始表达式; 终止表达式; 递增表达式) { …

    JavaScript 2023年6月10日
    00
  • 详解vue的双向绑定原理及实现

    关于《详解vue的双向绑定原理及实现》的攻略,我们可以分为以下几个部分进行讲解: 一、什么是双向绑定?为何要使用双向绑定? 双向绑定 Vue.js 中的双向绑定是将数据与视图进行双向绑定。在数据发生变化时,视图会自动更新并显示最新的状态;而在用户交互改变视图的值时,数据也会自动更新。 使用双向绑定的好处 使用双向绑定可以使我们写的代码更加简洁明了,减少了大量…

    JavaScript 2023年6月11日
    00
  • js控制的回到页面顶端goTop的代码实现

    下面我给你详细讲解“JS控制的回到页面顶端goTop的代码实现”的完整攻略。 1. 设置页面结构 首先,我们需要在HTML文件中添加一个按钮并设置其CSS样式。示例代码如下: <button id="goTop">回到顶部</button> <style> #goTop { position: fixe…

    JavaScript 2023年6月11日
    00
  • JavaScript面向对象编程

    我们来详细讲解一下“JavaScript面向对象编程”的完整攻略。 什么是JavaScript面向对象编程 Javascript 是一种面向对象的编程语言,也就是说,Javascript 具有类、对象、继承等面向对象的特性。面向对象的编程风格可以帮助我们更好地组织和管理代码,使其具有可复用性、可维护性和可扩展性。 在Javascript中,对象是一个集合,它…

    JavaScript 2023年5月17日
    00
  • .net 获取浏览器Cookie(包括HttpOnly)实例分享

    对于获取浏览器Cookie,我们需要了解浏览器的机制。浏览器的Cookie可以通过JavaScript代码进行读取,但是有些Cookie被设置为HttpOnly属性,此时JavaScript将无法读取该Cookie。因此我们需要通过服务端代码获取HttpOnly的Cookie。 在.NET中,我们可以通过以下步骤获取浏览器的Cookie,包括HttpOnly…

    JavaScript 2023年6月11日
    00
  • Javascript Date toString() 方法

    以下是关于JavaScript Date对象的toString()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的toString()方法 JavaScript的toString()方法返回一个表示日期时间部分的字符串,该字符串格式根据国际标准时间(UTC)而定。该方法不接受任何参数。 下面是使用对象的toString()方法的示例:…

    JavaScript 2023年5月11日
    00
  • js输出数据精确到小数点后n位代码

    下面是 js 输出数据精确到小数点后 n 位代码的完整攻略。 方式一:Number.prototype.toFixed() 方法 Number.prototype.toFixed() 方法可以将一个数四舍五入为指定小数位数的数字。它的基本语法如下: number.toFixed(digits) 其中,number 是要转换的数字,digits 是要保留的小数…

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