利用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日

相关文章

  • jQWidgets jqxBarcode isValid()方法

    jQWidgets jqxBarcode isValid()方法详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富的UI组件和工具,包括表格、图表、表单、历、菜等。其中,jqxBarcode是jQWidgets中的一个条形码组件,可以用于生成各种类型的条码。jqxBarcode提供了isValid()方法,用于检查条形码的值是否有效。本文…

    jquery 2023年5月9日
    00
  • 2019年度web前端面试题总结(主要为Vue面试题)

    让我们来详细讲解一下“2019年度web前端面试题总结(主要为Vue面试题)”的完整攻略。 什么是“2019年度web前端面试题总结(主要为Vue面试题)” “2019年度web前端面试题总结(主要为Vue面试题)”是一份面向前端开发人员的面试题集合,主要包含Vue相关的问题。通过学习这些问题,可以帮助前端开发人员更好地了解Vue的特点和应用方法,提高应对面…

    jquery 2023年5月18日
    00
  • jQuery–遍历操作实例小结【后代、同胞及过滤】

    jQuery–遍历操作实例小结【后代、同胞及过滤】 jQuery是一款非常强大、易用且广泛应用于前端开发的JavaScript库。它提供了多种遍历操作的方法,包括后代、同胞和过滤等。本文将详细讲解这些操作的实现方法和使用技巧。 后代选择器 后代选择器是指通过指定元素的父元素及其后代元素的标签名等信息,选取后代元素的操作。jQuery中通过空格符实现后代选择…

    jquery 2023年5月28日
    00
  • 如何使用jQuery的ajax()函数进行异步的HTTP请求

    使用jQuery的ajax()函数可以进行异步的HTTP请求。该函数可以向服务器发送请求并获取响应,而不会导致页面刷新。以下是详细攻略,含两个示例,演示如何使用jQuery的ajax()函数进行异步的HTTP请求: 语法 ajax()函数的语法如下: $.ajax({ url: "url", method: "GET/POST&…

    jquery 2023年5月9日
    00
  • js简单实现表单中点击按钮动态增加输入框数量的方法

    下面是“js简单实现表单中点击按钮动态增加输入框数量的方法”的攻略: 前言 在表单中,我们经常会遇到需要动态调整表单项数量的情况,例如填写多个收货地址,多个电话号码等等。使用JavaScript可以轻松实现这一功能,接下来详细讲解如何实现。 解决方案 我们可以通过添加事件监听器来实现按钮点击后增加表单项的功能,具体步骤如下: 选中按钮元素,添加事件监听器; …

    jquery 2023年5月28日
    00
  • jQuery Mobile filterable事件

    jQuery Mobile是一个非常流行的移动端开发框架,提供了丰富的组件和事件来快速搭建响应式、可触摸的移动应用。其中之一就是filterable事件,本文将详细讲解filterable事件的完整攻略。 概述 filterable事件是jQuery Mobile中用于实现自动搜索和筛选的事件。该事件通常应用于包含大量数据的列表、表格、滚动视图等组件中。当用…

    jquery 2023年5月12日
    00
  • 如何使用jQuery从AJAX请求中获得服务器响应

    在Web开发中,我们经常需要使用AJAX来向服务器发送请求并获取响应。在本攻略中,我们将详细介绍如何使用jQuery从AJAX请求中获得服务器响应,并提供两个示例说明它们的用途。 使用jQuery从AJAX请求中获得服务器响应 要从AJAX请求中获得服务器响应,我们可以使用jQuery的$.ajax()方法。以下是一个示例: $.ajax({ url: &q…

    jquery 2023年5月9日
    00
  • jQuery Mobile Listview dividerTheme选项

    jQuery Mobile是一个基于HTML5和CSS3的框架,它专注于为移动设备开发Web应用程序。其中一个非常常见的组件是Listview组件,它可以用来显示列表信息。 在Listview组件中,dividerTheme选项是一个非常重要的选项,它用于定义分隔线的颜色主题。下面我们来详细讲解如何使用这个选项。 基本用法 在Listview组件中添加div…

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