闭包访问器 js dom

闭包

自由变量


let x = 10;
let fn = function (a, b) {
   函数内部的变量
     1.参数变量：（a, b）
     2.内部变量： c
     3.a,b,c 都是私有变量
     4.x 在函数外面，叫自由变量
  let c = 3;
  return a + b + c + x;
};
console.log(fn(1, 2));
 实际开发中用到的闭包
 必须满足2个条件 1,父子函数 。 2，子函数调用父函数中的变量
fn = function (a) {
   a = 10
  1. 父子函数 1，fn：父函数 。2 f:子函数
  let f = function (b) {
    return a + b;
  };
  2.返回一个子函数
  return f;
};
let f = fn(10);
 fn()
 //调用完成，但是内部的a被子函数引用了，所以fn（）创建的作用域不消失
console.log(f(20));

闭包优点：在函数外部可以访问内部私有变量。缺点：大量的闭包使用会产生大量的父函数不消失还要占内存空间
闭包：偏函数（高阶函数的一种）
当一个函数需要多个参数的时候，不一定一次全部传入，可分批传入

fn = function (a, b, c) {
  return a + b + c;
};
console.log(fn(1, 2, 3));
console.log(fn(1, 2));
//闭包可以将三个参数分两次传入
fn = function (a, b) {
  return function (c) {
    return a + b + c;
  };
};
console.log(fn(1, 2)(3));
f = fn(1, 2);
console.log(typeof f);
console.log(f(3));
//也可以直接用"柯里化" 函数简写
console.log(fn(1, 2)(3));
// 闭包可以将三个参数分三次传入
fn = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
};
console.log(fn(1)(3)(4));
//将参数逐个传入叫做“柯里化”函数
//服务器获取数据，大量数据分块获取，分批传入
//用箭头函数写
fn = (a) => (b) => (c) => a + b + c;
console.log(fn(1)(3)(4));
//反闭包： 纯函数
//纯函数：函数中的变量都是自己的，没有用到外部的
//如果函数内部必须用到外部变量，可通过参数传入
//纯函数中禁止有外部变量 ，可通过参数方式传入
// "let discound = 0.8"为外部变量 ，通过"(10000, discound)"传参的方式传入
let discound = 0.8;
function getPrice(price, discound = 1) {
  return price * discound;
}
console.log(getPrice(10000, discound));

对象方式的访问

访问器属性

let user = {
  data: { name: "ianren", age: "34" },
};
console.log(user.data.name, user.data.age);


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="ceshi.js"></script>
    <title>Document</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      // 获取一组  queryselectorAll(css选择器)
      // document  表示html文档
      // 1.将所有的itme变成红色
      //   console.log(document);
      const items = document.querySelectorAll(".list > .item");
      console.log(items);
      for (let i = 0, length = items.length; i < length; i++) {
        items[i].style.color = "red";
      }
      //  获取一个 queryselectorAll(css选择器)
      //   2.获取第三行 背景颜色为黄色
      const items3 = document.querySelector(".list > .item:nth-of-type(3)");
      console.log(items3);
      items3.style.backgroundColor = "yellow";
    </script>
    <button onclick="ianRen(this)">按钮1</button>
  </body>
</html>

闭包 访问器 js dom

闭包

对象方式的访问

相关文章