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

Home > List of blog posts > 闭包/访问器属性/类与对象/解构赋值/js引入与获取DOM对象

Blogger Information

Blog 11

fans 0

comment 0

visits 6712

Special Recommendation

More>

Related recommendations

闭包

首先先来了解一个概念

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

// 自由变量
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标签内容

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 16:16:25