闭包 访问器 js dom
程序员文章站
2022-05-15 08:36:54
...
闭包
- *变量
let x = 10;let fn = function (a, b) {函数内部的变量1.参数变量：（a, b）2.内部变量： c3.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 = 101. 父子函数 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>