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

首页 > 博客列表 > javascript中的闭包原理以及数组与对象的学习

博主信息

博文 14

粉丝 0

访问量 12194

专题推荐

更多>

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

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>