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日

相关文章

  • js关闭浏览器窗口及检查浏览器关闭事件

    要实现JavaScript关闭浏览器窗口以及检查浏览器关闭事件,可以使用window.close()方法和window.onbeforeunload事件。 使用window.close()方法关闭浏览器窗口 使用window.close()方法可以轻易地关闭当前窗口或打开的窗口。但要注意,在现代浏览器中,该方法只能关闭由JavaScript打开的窗口,不能关…

    JavaScript 2023年6月11日
    00
  • JavaScript 判断判断某个对象是Object还是一个Array

    判断某个对象是Object还是Array,可以通过以下代码实现: if (typeof obj === ‘object’ && obj instanceof Array) { // obj是Array类型 } else { // obj是Object类型 } 关键点解释: typeof obj === ‘object’:使用typeof操作符…

    JavaScript 2023年5月27日
    00
  • JavaScript自定义数组排序方法

    接下来我会详细讲解如何使用 JavaScript 自定义数组排序方法。 步骤一:了解数组排序方法 在 JavaScript 中,Array 对象自带 sort() 方法,可以对数组进行排序。默认情况下,sort() 方法将按照字符串的 Unicode 位点值进行排序。但是,如果数组中存储的是数字、日期或其他对象,那么这个排序方式可能并不适用。此时,我们可以使…

    JavaScript 2023年5月27日
    00
  • Android中WebView无法后退和js注入漏洞的解决方案

    一、Android中WebView无法后退的解决方案 问题描述:在Android中使用WebView时,通过back键无法返回上一个网页,点击后退按钮也没有用。 解决方案:Android中WebView默认是不支持返回上一个网页的,需要在WebView中重写onKeyDown方法,当按下back键时,让WebView返回上一个网页。 示例代码: @Overr…

    JavaScript 2023年6月11日
    00
  • 108中超轻量级的加载动画!

    大家好,我是【程序视点】小二哥! 今天要上的菜不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库:Whirl. 最省力的加载动画 话不多说,直接来看例子。 以上只是冰山一角。whirl的CSS加载动画集合中有108种选项供你挑选。选中喜欢的动画后,点击“Grab the CSS on Github!”。将跳转到Github页面…

    JavaScript 2023年5月8日
    00
  • js弹出窗口返回值的简单实例

    下面我为你详细讲解“js弹出窗口返回值的简单实例”的完整攻略。 1. 简介 弹出窗口是指在当前页面之上打开另一个小窗口,通常用于提示/确认信息、输入数据等,其返回值也通常用于将弹出窗口中的数据传递到主页面。而在基于web技术的网站中,JavaScript是用来实现弹出窗口功能的主要技术。 2. 实现流程 2.1 弹出窗口 首先,在打开弹出窗口的链接/按钮中需…

    JavaScript 2023年6月11日
    00
  • Javascript中将变量转换为字符串的三种方法

    将变量转换为字符串是在Javascript中一个非常常见的操作,下面我将详细讲解Javascript中将变量转换为字符串的三种方法: 1. toString()方法 toString()方法是将变量转换为字符串的最简单的方法,它是所有对象都有的一个方法。当使用toString()方法将变量转换为字符串时,如果该变量的值为null或undefined,在使用t…

    JavaScript 2023年5月28日
    00
  • js 数组 fill() 填充方法

    JS 数组 fill() 填充方法 简介 在 JS 中,fill() 方法可以用来填充数组的某一段区间,即将数组中的所有元素都替换为指定的值。fill() 方法接收三个参数:要填充的值、起始位置和终止位置(不包括终止位置本身)。这个方法具有可变性,即不会创建新的数组,而是直接修改原数组。 语法 arr.fill(value, start, end) valu…

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