浅谈JS封闭函数、闭包、内置对象

浅谈JS封闭函数、闭包、内置对象

JS封闭函数

JS的封闭函数,又称为IIFE(Immediately-Invoked Function Expression),是指定义一个匿名函数并立即执行该函数的语法结构。

封闭函数的特点:

  • 定义一个函数,并立即自动调用该函数;
  • 可以在全局作用域或另一个函数内部作用域中定义,从而实现封装变量和方法;
  • 封闭函数的返回值可以被外部调用使用。

封闭函数的代码示例:

(function() {
  var name = "John";

  console.log("My name is " + name + ".");
})();

以上代码定义了一个匿名函数,并立即执行。该函数内定义了一个name变量,可以在函数外部访问该变量的值。

JS闭包

闭包是指函数与其相关的变量构成的整体。闭包特性可以将函数内部的变量和方法封装私有化,同时又能让外部通过特定方式访问到其中的数据和方法。

闭包的基本概念:

  • 闭包就是内部函数和外部函数之间的环境;
  • 内部函数可以访问外部函数的参数和变量;
  • 外部函数的返回值可以是内部函数的引用或者通过调用内部函数的方式进行返回。

闭包的代码示例:

function outer() {
  var name = "John";

  function inner() {
    console.log("My name is " + name + ".");
  }

  return inner;
}

var foo = outer();
foo(); // 输出 “My name is John.”

以上代码中,outer函数内部定义了一个inner函数。outer函数返回inner函数的引用,并将其赋值给变量foo。之后,调用foo函数,即相当于调用inner函数并输出结果。

JS内置对象

JS的内置对象是指在语言标准中预定义的对象,直接可以使用而无需定义。JS的内置对象可以分为以下几类:

  • 基本数据类型对象(String、Number、Boolean、Date等);
  • 系统对象(Math、JSON等);
  • HTML DOM对象(document、location、element、style等);
  • BOM对象(window、history、navigator等)。

内置对象的代码示例:

var str = new String("Hello, world.");

console.log(str.toUpperCase()); // 输出 “HELLO, WORLD.”

console.log(Math.PI); // 输出 3.141592653589793

var btn = document.getElementById("btn");
btn.style.color = "red"; // 将按钮颜色设置为红色

以上代码创建一个字符串对象,将字符串转化为大写并打印,输出结果为 "HELLO, WORLD.";使用Math对象获取圆周率PI的值;通过getElementById获取一个DOM元素,将按钮颜色设置为红色。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈JS封闭函数、闭包、内置对象 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)

    当我们需要将时间戳转换为特定格式的日期时间字符串时,我们可以使用 JavaScript 中内置的 Date 对象来进行处理,然后使用字符串模板 (template string)即可实现。以下是将时间戳转换为 yyyy-MM-dd hh:mm 格式的完整攻略。 1. 创建 Date 实例 首先,我们需要通过 Date() 构造函数创建一个 Date 实例,构…

    JavaScript 2023年5月27日
    00
  • bootstrap表单示例代码分享

    接下来我将为您详细讲解“bootstrap表单示例代码分享”的完整攻略。 Bootstrap表单示例代码分享 1. Bootstrap表单介绍 Bootstrap是目前非常流行的前端开发框架,其能够快速构建响应式、移动设备优先的Web项目。表单是Web开发中非常常见的组件,Bootstrap也提供了丰富的表单组件样式和交互效果,大大简化了表单的开发难度。 B…

    JavaScript 2023年6月10日
    00
  • JavaScript使用concat连接数组的方法

    下面是关于JavaScript使用concat()连接数组的详细攻略: 什么是concat()方法? concat()方法用于连接两个或多个数组,生成一个新的数组。语法如下: array.concat(array1, array2, …, arrayX) 其中,array 为原始数组,array1, array2, …, arrayX 为需要连接的数…

    JavaScript 2023年5月27日
    00
  • js获取url传值的方法

    获取URL中传递的参数是JavaScript中常用的一个功能,以下是一些常见的方法: 1.使用location对象的search属性 URL中的查询参数可以通过location对象的search属性获得。该属性返回包含问号(?)的参数串,例如: console.log(location.search); // 输出 ?id=123&name=John…

    JavaScript 2023年6月10日
    00
  • chrome监听cookie变化与赋值问题

    针对“chrome监听cookie变化与赋值问题”的完整攻略,我们可以分为以下几个步骤: 1. 调试页面的cookie 在进行cookie监听和赋值之前,先要确保你的页面中已经存在cookie。可以通过chrome的开发者工具来进行调试。具体操作方法如下: 打开Chrome浏览器,进入需要调试的网站。 按下F12键或者右击页面空白处选择“检查”,打开开发者工…

    JavaScript 2023年6月11日
    00
  • js实现点击注册按钮开始读秒倒计时的小例子

    我来为您详细讲解实现“js实现点击注册按钮开始读秒倒计时的小例子”的完整攻略: 1. 准备工作 在开始实现 JavaScript 读秒倒计时功能前,我们需要准备一些基本的 HTML 结构和样式。 <!DOCTYPE html> <html lang="en"> <head> <meta chars…

    JavaScript 2023年6月11日
    00
  • 关于JavaScript中string 的replace

    下面是关于JavaScript中string的replace的详细攻略。 什么是replace replace() 方法是 JavaScript 中的字符串方法,它用于在字符串中查找一个指定的子串,并用另一个字符串替换它。这个替换过程是不影响原字符串,而是产生一个新的字符串。 replace() 方法接收两个参数:第一个是需要查找的子串或正则表达式,第二个是…

    JavaScript 2023年5月28日
    00
  • JS实现直接运行html代码的方法

    JS 实现直接运行 html 代码的方法其实比较简单,一般步骤如下: 创建一个 iframe,将需要运行的 html 代码动态插入到 iframe 中; 通过 iframe contentWindow 属性获取 iframe 文档 window 对象; 将要执行的代码放在 window.onload 回调函数中,保证代码执行在页面元素都已经加载完毕后; 在 …

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