浅谈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日

相关文章

  • javascript获取网页宽高方法汇总

    当我们需要编写一些Web应用或网站时,有时需要获取浏览器的宽度和高度等信息,以便根据宽高信息来做出一些响应式设计或适配不同尺寸设备的设计等。下面介绍一些获取网页宽高的方法。 方法一:获取浏览器窗口宽高 通过 window.innerWidth 和 window.innerHeight 可以获取浏览器窗口实际的宽高,这个方法可用于获取当前设备的可视区域大小。示…

    JavaScript 2023年6月11日
    00
  • js对象数组按属性快速排序

    下面就是关于“js对象数组按属性快速排序”的完整攻略: 1. 排序算法 在排序算法方面,我们可以使用JavaScript内置的sort()函数。sort()方法可以按照指定的方法对数组的元素进行排序,默认排序方式为按字母顺序。如果想要按属性对js对象数组进行排序,则需要传入一个比较函数。 比较函数的语法格式为: function compare(a, b) …

    JavaScript 2023年6月10日
    00
  • js用Date对象的setDate()函数对日期进行加减操作

    下面是js用Date对象的setDate()函数对日期进行加减操作的完整攻略: 1. setDate()函数简介 setDate()函数是Date对象自带的一个函数,用于设置Date对象所代表的日期中的天数部分。setDate()函数的具体语法是: Date.setDate(dayValue) 其中dayValue是一个数值,代表要设置的天数。当dayVal…

    JavaScript 2023年5月27日
    00
  • js中bool值的转换及“&&”、“||”、 “!!”详解

    bool是布尔类型,只有两种取值:true和false。在JavaScript中,存在一些将非布尔值转换为布尔值的规则,这些规则叫做隐式类型转换。而“&&”、“||”、 “!!”都是实现js中布尔值转换的常用操作符。 “&&”操作符 当使用“&&”操作符时,如果两个值都是true,则返回true;否则返回fal…

    JavaScript 2023年5月28日
    00
  • javascript json对象小技巧之键名作为变量用法分析

    本文将详细讲解”javascript json对象小技巧之键名作为变量用法”,该技巧可以提高代码的灵活性和可读性。 什么是json对象? JSON是一种轻量级的数据交换格式,JS中的JSON对象是Javascript原生支持的一种格式化的数据类型,它可以用来传递和存储简单的结构化数据。 JSON 常用于与服务端交换数据。 通常我们获取的json对象会有多个键…

    JavaScript 2023年5月27日
    00
  • javascript Range对象跨浏览器常用操作第1/2页

    下面是“JavaScript Range对象跨浏览器常用操作”完整攻略。 JavaScript Range对象跨浏览器常用操作 Range对象概述 Range对象代表文档中的一个区域,通常被用于选择文本或修改文档的样式。Range对象是DOM Level 2中新引入的,但是在各个浏览器中实现不一致,所以需要跨浏览器的操作和使用。 获取Range对象 在获取R…

    JavaScript 2023年5月27日
    00
  • 浅析JS中document对象的一些重要属性

    下面是关于“浅析JS中document对象的一些重要属性”的完整攻略: 一、什么是document对象 document对象代表当前HTML文档,是网页与JavaScript交互的关键。我们可以通过document对象来获取并操纵HTML元素,实现网页的动态效果。 二、 document对象的一些重要属性 1. document.title document…

    JavaScript 2023年6月10日
    00
  • 指定js可访问其它域名的cookie的方法

    指定js可访问其它域名的cookie的方法又称为“跨域访问”,一般涉及到前后端的交互,可以使用以下两种方法解决: 服务器端设置Access-Control-Allow-Origin响应头 在服务器端的响应头中设置Access-Control-Allow-Origin字段为指定的域名或所有域名(*),可以允许跨域访问,具体代码如下: header("…

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