利用js的闭包原理做对象封装及调用方法

实现利用js的闭包原理做对象封装及调用方法,需要遵循以下步骤:

1. 创建一个闭包函数

首先创建一个闭包函数,该函数需要返回一个对象,该对象作为外部函数的返回值,从而使内部对象获得封装,外部程序无法访问内部变量。

var createPerson = (function(){
  // 内部变量,对外不可见
  var name = '';
  var age = 0;

  // 返回一个“Person”对象
  return {
    setName: function(n){
      name = n;
    },
    setAge: function(a){
      age = a;
    },
    getInfo: function(){
      return `${name}, ${age} years`;
    }
  }
})()

在这个创建的闭包函数中,定义了三个方法,其中setName和setAge通过传递参数修改了内部变量name和age,而getInfo方法返回了内部变量的字符串表示。这样,外部程序就无法直接访问内部变量了。

2. 调用闭包函数,创建一个对象

调用createPerson函数,可以得到一个Person对象。这个对象包括三个方法:setName、setAge和getInfo。使用这些方法,就可以修改/访问内部变量。

var obj = createPerson;
obj.setName('Tom');
obj.setAge(20);
obj.getInfo(); // "Tom, 20 years"

在上面的代码中,设置Person对象的name和age,然后使用getInfo方法得到内部变量之前转换的字符串。

示例说明

示例1

var createCounter = function(){
  var count = 0;
  return {
    increment: function() {
      return ++count;
    },
    reset: function() {
      count = 0;
    }
  }
}

var counterObj = createCounter();
counterObj.increment(); // 1
counterObj.increment(); // 2
counterObj.reset();
counterObj.increment(); // 1

这个示例展示了如何使用闭包创建一个计数器对象。通过闭包,内部变量count被保护起来,外部程序无法直接访问/修改。通过increment方法,增加计数值并返回它,通过reset方法,可以将计数器归零。

示例2

var createLoginModule = function(){
  var username = '';
  var password = '';
  return {
    setUsername: function(un) {
      username = un;
    },
    setPassword: function(pw) {
      password = pw;
    },
    login: function(un, pw) {
      if(un === username && pw === password) {
        console.log('Login success!');
      } else {
        console.log('Login failed!');
      }
    }
  }
}

var loginObj = createLoginModule();
loginObj.setUsername('admin');
loginObj.setPassword('123456');
loginObj.login('admin', '123456'); // Login success!
loginObj.login('admin', 'XXXXXXXX'); // Login failed!

这个示例展示了如何使用闭包创建一个登录验证对象。通过闭包,内部变量username和password被保护起来,外部程序无法直接访问/修改。通过setUsername和setPassword方法,设置登录用户名和密码,通过login方法,输入用户名和密码,进行登录验证。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:利用js的闭包原理做对象封装及调用方法 - Python技术站

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

相关文章

  • 实例讲解JS中数组Array的操作方法

    下面是详细讲解“实例讲解JS中数组Array的操作方法”的完整攻略。 一、数组的含义及创建 1.1 数组的含义 数组是一种可以用来存储多个数据的数据结构,每个数据项都有一个与之对应的索引,该索引可以是数字或字符串。 1.2 创建数组 在 JavaScript 中,可以使用以下两种方式创建数组: 字面量方式创建: javascript const arr1 =…

    jquery 2023年5月28日
    00
  • 利用JS实现一个同Excel表现的智能填充算法

    对于实现一个同Excel表现的智能填充算法,我们可以使用JavaScript来完成。实现智能填充算法需要遵循以下基本步骤。 步骤1:获取数据 从Excel电子表格或其他源中获取数据。我们可以使用各种数据源,包括Excel电子表格、SQL数据库和API。 步骤2:数据预处理 在进行智能填充之前,我们需要对数据进行预处理。预处理包括数据清洗、数据去重和数据排序。…

    jquery 2023年5月27日
    00
  • jQWidgets jqxDataTable rtl属性

    jQWidgets 是一个流行的 JavaScript UI 库,提供了许多可定制的 UI 组件。其中一个组件是 jqxDataTable,它是用于显示和编辑表格数据的件。jqDataTable 提供多个属性和,其中之一是 rtl。下面是关于 jqxDataTable 的 rtl 属性的详攻略: rtl属性概述 rtl 属性用于指定表格的文本方向是否为从右到…

    jquery 2023年5月11日
    00
  • 浅谈$(document)和$(window)的区别

    浅谈$(document)和$(window)的区别 简介 在使用jQuery时,我们常常使用一些全局对象来操作网页元素,其中 $(document) 和 $(window) 是两个非常常用且容易混淆的对象,在此,我来详细讲解它们之间的区别。 $(document) 在jQuery中,$(document) 相当于网页中整体的文档,即 <html&gt…

    jquery 2023年5月27日
    00
  • Ajax请求和Filter配合案例解析

    关于“Ajax请求和Filter配合案例解析”的完整攻略,我给你详细讲解一下。 Ajax请求与Filter配合解析 什么是Ajax请求? Ajax是Asynchronous JavaScript and XML的缩写,中文名为“异步的JavaScript与XML技术”。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加…

    jquery 2023年5月27日
    00
  • 如何使用jQuery Mobile创建一个过渡性弹出窗口

    下面是使用jQuery Mobile创建一个过渡性弹出窗口的完整攻略: 第一步:引入jQuery Mobile库文件 在页面中引入jQuery和jQuery Mobile库文件,例如: <head> <meta charset="UTF-8"> <title>过渡性弹出窗口</title> …

    jquery 2023年5月12日
    00
  • jQWidgets jqxDraw circle()方法

    以下是关于“jQWidgets jqxDraw circle() 方法”的完整攻略,包含两个示例说明: 简介 jqxDraw 控件的 circle() 方法用于创建一个圆形元素。该方法可以用于绘图中创建圆形元素。 完整攻略 下面是 jqx 控件 circle() 方法的完整攻略: 创建圆形元素 var circle = draw.circle(50); 在上…

    jquery 2023年5月10日
    00
  • jQWidgets jqxListBox rtl属性

    jQWidgets jqxListBox rtl属性详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件工具包。ListBox是其中之一。本文将详细介绍jqxListBox的rtl属性,包括定义、语法和示例。 rtl属性的定义 jqxListBox的rtl属性用于设置列表框的文本方向。如果设置为true,则列表框的文本方向从右到左。…

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