javascript中的闭包原理以及数组与对象的学习 -

Home > List of blog posts > javascript中的闭包原理以及数组与对象的学习

Blogger Information

Blog 14

fans 0

comment 0

visits 8244

Special Recommendation

More>

Related recommendations

一. 闭包的原理与经典应用场景

1.函数

私有变量: 声明在函数内部的变量;
- 参数变量:示例变量 a,b
- 内部变量:示例变量 c
自由变量: 声明在函数外面的变量;
- 自由变量:示例变量 d

示例代码：

let d = 10;
let fn = function(a, b) {
    // a, b, c 都是私有变量
    // d 就是自由变量
    let c = 5;
    return a + b + c + d;
};
console.log(fn(1, 2));//18

2. 闭包

父子函数:函数嵌套函数

子函数调用了父函数中的变量

fn = function(a) {
  // a = 10;
  // 1. 父子函数, f: 子函数
  let f = function(b) {
      // b = 20;
      return a + b;
  };
  // 2. 返回一个子函数
  return f;
};
let f = fn(10);
// fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失
console.log(typeof f);//function
console.log(f(20));//30

3.闭包: 偏函数(高阶函数的一种)

当一个函数需要多个参数的时候,不一定一次性全部传入,可以分批传入

fn = function(a, b, c) {
    return a + b + c;
};
console.log(fn(1, 2, 3)); //6
console.log(fn(1, 2)); 
fn = function(a, b) {
    return function(c) {
        return a + b + c;
    };
};
// 使用闭包, 可以将三个参数分2次传入
f = fn(1, 2);
console.log(f(3)); //6

4.闭包: 纯函数

纯函数: 函数中用到的变量全间自己的, 没有”自由变量”
如果函数内部必须要用到外部变量通过参数传入

// 外部变量
let discound = 0.8;
function getPrice(price, discound = 1) {
  // 纯函数中禁用有自由变量
  return price * discound;
}
console.log(getPrice(12000, discound));//9600
);

二. 访问器属性

进行属性伪装, 将一个方法伪装成属性进行访问 : 访问器属性
访问器属性: 看上去我们访问的是属性, 实际上调用的是方法

// 访问器属性
let address = {
    data: { province: "江苏", city: "南京" },
    get province() {
        return this.data.province;
    },
    set province(province) {
        this.data.province = province;
    },
};
//读
console.log(address.province); //江苏
//写
address.province = "江苏省";
console.log(address.province); //江苏省

三.类与对象的创建与成员引用

1.构造函数, 创建对象专用


let User = function(name, email) {
    // 1. 创建一个新对象
    // let this = new User;
    // 2. 给新对象添加自定义的属性
    this.name = name;
    this.email = email;
    // 3. 返回 这个新对象
    //   return this;
    //   以上, 1, 3 都是new的时候,自动执行, 不需要用户写
};
const user1 = new User("admin", "admin@php.cn");
console.log(user1);

2.定义公有方法

对象方法一般是公共, 操作的是当前对象的属性
任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说,没用
只有把函数当成构造函数来创建对象时, 这个原型属性才有用
给类User添加自定义方法,必须添加到它的原型对象属性上
声明在 User.prototype原型上的方法, 被所有类实例/对象所共用

let User = function(name, email) {
    this.name = name;
    this.email = email;
};
const user1 = new User("admin", "admin@php.cn");
User.prototype.getInfo = function() {
    return `name = ${this.name}, email = ${this.email}`;
};
console.log(user1.getInfo()); //name = admin, email = admin@php.cn

四. 数组与对象的解构过程与经典案例

1.数组解构

//模板 = 数组
let [name, email] = ["朱老师", "498668472@qq.com"];
console.log(name, email);

2.对象解构

//对象模板 = 对象字面量
let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };
console.log(id, lesson, score);
let {...obj } = { id: 1, lesson: "js", score: 80 };
console.log(obj);

3.应用场景

function getUser({id,name,email}) {
    console.log(id,name,email);
}
getUser({id:123, name:'张三',email:'zs@php.cn'})

五. JS引入到浏览器中的的方法

使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档
如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html 如：<script src="outer.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
<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" />
    <title>浏览器中的js</title>
</head>
<body>
    <!-- 1. 事件属性, 写到元素的事件属性 -->
    <button onclick="console.log('hello world');">按钮1</button>
    <!-- 2. 事件属性, 写到元素的事件属性 -->
    <button onclick="setBg(this)">按钮2</button>
    <script>
        function setBg(ele) {
            document.body.style.backgroundColor = "wheat";
            ele.style.backgroundColor = "yellow";
            ele.textContent = "保存成功";
        }
    </script>
</body>
</html>

六. 获取DOM元素的API

<!DOCTYPE html>
<html lang="zh-CN">
<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" />
    <title>获取dom元素</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>
        //将所有的item变成红色
        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";
        }
        //将第一个改为黄色背景
        const first = document.querySelector(".list > .item");
        console.log(first === items[0]);
        first.style.backgroundColor = "yellow";
        //将第三个改为绿色背景
        const three = document.querySelector(".list > .item:nth-of-type(3)");
        three.style.backgroundColor = "green";
        // 快捷方式
        //body
        console.log(document.querySelector("body"));
        console.log(document.body);
        //head
        console.log(document.head);
        // title
        console.log(document.title);
        // html
        console.log(document.documentElement);
    </script>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Ement常用语法使用学习记录

2021-12-22 18:32:21