闭包/访问器属性/类与对象/解构赋值/js引入与获取DOM对象

闭包

首先先来了解一个概念

自由变量：全局中声明的变量，独立在函数外面的变量；

// 自由变量
let num = 123;
// 参数变量：a,b
// 内部变量：c
// 以上统称为私有属性；函数外不不可访问
// num相对于函数来说是函数外部声明的，叫做自由变量。
let fn = (a, b) => { let c = 10; return a + b + c + num };
let f = fn(1, 2);
console.log(f);//136

闭包函数

// 闭包函数
// 1.父子函数
// 2.子函数调用了父函数中的变量
// 3.返回子函数
fn = function (a, b) {
    let f1 = function (c) {
        return a + b + c;
    }
    return f1;
}
console.log(fn(4, 5)(9));// 18

偏函数（高阶函数）

当一个函数需要多个参数且不是一次性传入时，可以进行分批传入

可以分层传递参数，一层传一个

let fn2 = function (a) {
    let ff1 = function (b) {
        let ff2 = function (c) {
            return a + b + c;
        }
        return ff2;
    }
    return ff1;
}
let res = fn2(1);
console.log(typeof res);//function
let res1 = res(2);
console.log(typeof res1);//function
let res2 = res1(3);
console.log(res2);//6
//简写：将参数逐个传入——柯里化传参
fn2 = a => b => c => a + b + c;
console.log(fn2(2)(3)(8));//13

反闭包函数——纯函数: 不使用外部变量,参数全是自己的，若要使用就当参数传进来

let discount = 0.9;
let getPrice = (price, discount = 1) => price * discount;
console.log(getPrice(100));//100
console.log(getPrice(100, discount));//90

访问器属性

正常我们调用对象的属性和给对象属性赋值的时候是这么写的：

let user = {
    data: { "user": "zhangsan", "email": "zhangsan@163.com" },
    getemail() {
        return this.data.email;
    },
    setemail(email) {
        this.data.email = email;
    }
}
console.log(user.getemail());
user.setemail('myemial@123.com');
console.log(user.getemail());

我们把对象中的方法伪装成属性来调用：

// 进行属性伪装，把函数伪装成属性进行调用和赋值
//访问器属性：看上去访问的是属性，其实是方法
let username = {
    data: { "name": "zhangsan", "age": 20 },
    get age() {
        return this.data.age;
    },
    set age(age) {
        if (age >= 18 && age <= 100) {
            this.data.age = age;
        } else {
            console.log("非法");
        }
    }
}
console.log(username.data.age);//20
username.age = 90;//赋值,自动调用set方法
console.log(username.data.age);//90

类与对象

// 构造函数：创建对象专用，当一个函数是一个构造函数时，他的首字母要大写
let User = function (name, emial) {
    this.name = name;
    this.emial = emial;
}
//实例化一个类
let user = new User('zs', 'zs@123.com');
console.log(user);//User { name: 'zs', emial: 'zs@123.com' }
// 对象方法一般是公共的，添加对象方法需要添加在构造方法的原型上,即User.prototype,声明在User.prototype上的方法，被所有实例化的对象公用
User.prototype.getInfo = function () {
    return `name:${this.name},emial:${this.emial}`;
}
console.log(user.getInfo());//name:zs,emial:zs@123.com 
// 静态成员，直接挂载到构造函数对象上的属性
User.status = 'enabled';
console.log(User.status);//可以直接被调用,输出enabled
// 私有成员:函数接收参数的名称不能和私有变量名称重复
User = function (user, mobile, add) {
    let address = '';//构造函数中声明的变量是私有变量
    this.user = user;
    this.mobile = mobile;
    this.address = add;
}
User.prototype.getInfo = function () {
    return `name:${this.name},mobile:${this.mobile},address:${this.address}`;
}
let user1 = new User('ls', '18888888888', '北京');
console.log(user1.address);//北京
console.log(user1.getInfo());//name:ls,mobile:18888888888,address:北京 
// ES6以后 类的写法
class Parent {
    name = 'zs';
    mobile = '139111111111';
    address = 'bj';
    // 私有成员
    #gender = 'male';
    //ES7 静态成员
    static type = 'nomal';
    //构造方法——初始化变量
    constructor(name, mobile, sex, address) {
        this.name = name;
        this.mobile = mobile;
        this.#gender = sex;
        this.address = address;
    }
    // 公共方法
    getInfo() {
        console.log(this.type);
        return `name:${this.name},mobile:${this.mobile},address:${this.address},sex:${this.#gender}`;
    }
}
const user2 = new Parent('ls', '17000000000', '1', 'jn');
//静态变量直接用类名.变量名来调用
console.log(user2.getInfo() + `,type:${Parent.type}`);

类的继承

class Son extends Parent {
    //类中的变量声明不用加修饰符
    myEmial = 'zs@qq.com';
    constructor(name, mobile, sex, address, emial) {
        // 实现父类中的构造函数
        super(name, mobile, sex, address);
        //子类中自己的成员
        this.myEmial = emial;
    }
    getInfo() {
        //重写父类中的方法
        return `emial:${this.myEmial},` + super.getInfo();
    }
    age = 10;
    // 类中可以使用访问器属性
    get age() {
        return this.age;
    }
    set age(age) {
        if (age >= 18 && age <= 130) {
            this.age = age;
        } else {
            console.log("错咯~");
        }
    }
}
const lilei = new Son('lilei', '13111111111', '1', '上海', 'lilei@qq.com');
console.log(lilei.getInfo());
console.log(lilei.age);//10
lilei.age = 110;
console.log(lilei.age);//110

解构赋值

数组解构

//正常我们去定义一个数组时：
let user = ['zs', '123456'];
let uname = user[0];
let uqq = user[1];
console.log(uname);//zs
//数组解构
// [模板]=[数组]
[uname, uqq] = ['hanmeimei', '1234567890'];
console.log(uname);//hanmeimei
//参数不足时：给默认值
let [id, name, time = 2] = [1, 'xiaohua'];
console.log(id, name, time);//1 xiaohua 2
//参数过多时：...rest
let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7];
console.log(d);//[4,5,6,7]
// 两数交换
let x = 10; y = 20;
[y, x] = [x, y];
console.log(x, y);//20 10

对象解构

// 对象解构
let obj = { id: 1, name: "xiaoming", age: 18 };
//对象模板=对象字面量 但是{}不能作为=左边的值，所以转化为一个表达式({}) = {},
({ id, name, age }) = { id: 1, name: "xiaoming", age: 18 };
console.log(id, name, age);//1 xiaoming 18
({ id, name, age }) = { id: 2, name: "xiaogang", age: 20 };
console.log(id, name, age);//2 xiaogang 20
//命名冲突（重复）时，使用别名
let { id: uid, name: username, age: uage } = { id: 3, name: "小刘", age: 19 };
console.log(uid, username, uage);//3 小刘 19
// 克隆对象: ...rest
let { ...obj1 } = { id: 3, name: "小刘", age: 19 };
console.log(obj1);//{ id: 3, name: "小刘", age: 19 }
// 应用场景：函数参数为一个对象时，我们可以利用解构对象参数的方式，简单传参，然后函数中直接调用参数值
function getUserInfo(user) {
    return `${user.id} , ${user.name}`;
}
console.log(getUserInfo({ id: 4, name: 123 }));//4,123
//对象解构传参{对象属性}，调用时直接传一个对象即可
function getUserInfo1({ id, name }) {
    return `${id},${name}`;
}
console.log(getUserInfo1({ id: 2, name: "zhangsan" }));//2 zhangsan

js引入与获取DOM对象

引入外部js：

<script src="out.js"></script>

获取DOM对象

<ul class="list">
        <li class="items">item1</li>
        <li class="items">item2</li>
        <li class="items">item3</li>
        <li class="items">item4</li>
        <li class="items">item5</li>
        <li class="items1">item6</li>
</ul>

以上一组列表，获取全部用document.querySelectorAll(css选择器名称);
获取第一个使用document.querySelector(css选择器名称)；
例如：

    // 获取一组 querySelectorAll(选择器)
    console.log(document);
    // 获取所有的li
    console.log(document.querySelectorAll('li'));
    //获取当前类选择器的li——NodeList——类数组
        console.log(document.querySelectorAll('.list > .items'));
    // 获取一个(一组中的第一个) querySelector
    let one = document.querySelector('.list > .items');
    console.log(one);
    one.style.color='red';//给第一个红色字体
    // 获取第三个
    let three = document.querySelector('.list > .items:nth-of-type(3)');
    three.style.backgroundColor='green';//给第三个添加绿色背景

经常试用到的快捷方式有：

写法	释义
document.body或document.querySelectorAll('body')	获取当前页面的body
document.head	获取当前页面的<head></head>标签
document.title	获取当前页面的title标签内的文本
document.documentElement	获取当前页面的html标签内容