闭包及访问量属性和类与对象解构赋值以及js中对html中的dom操作(时间有点紧，没全理解透，需回头整理)

程序员文章站 2022-03-27 08:32:10

...

时间有点紧迫，写完来不及整理，直接贴的源代码，马上就上课了

回头回来整理

本文中提到的新知识点参数：

针对访问器属性的操作，
get是读取数据
set写入数据

类与对象的操作新知识点参数：

new 构建的新对象需要在对象名前增加
extendses6class中子类继承扩展中使用的，

新学了es6中的操作

class 操作

新es6中构造方法使用

constructor

继承公共方法使用的代码

super

js中操作html操作常用参数

点击事件的新参数
onclick不算新参数，之前也学到过，记一下
document对html操作的参数，也可以说是选中的参数
querySelectorAll页面选中一组的操作
querySelector页面选中一个的操作

具体示例均在以下代码中，如有不明白部分，需看1月4日教学文档及视频

闭包函数


// 闭包函数
// 先创建一个声明
// *变量
let name = 10;
let z = function (a, b) {
  let c = 10;
  //   声明一个c等于10
  //   空参数变量是a,b
  // c是内部变量
  // name是全局变量
  //   声明在外的变量,也叫*变量
  return a + b + c + name;
  //   老师的意思是a，b，c均为私有变量
};
// 给a和b传入参数
console.log(z(1, 2));

// 当实际开发中的闭包,必须满足2个条件,父级>子级
// 老师说的意思是父子函数,我这理解能力哎
//  闭包
//  1. 父子函数
//  2. 子函数调用了父函数中的变量

z = function (a) {
  let l = function (b) {
    return a + b;
  };
  return l;
};

let n = z(6);
console.log(n);
// 当前返回给a的值是6,但是子函数b的值并没有,已经提示l为函数
// 给子函数二次返回值 当前函数n等于外部的函数值
console.log(n(6));
// 已经提示是12了,明白了么?自己如果以后不明白,回来看视频,三遍以后还忘记,就...

// 闭包偏函数
// 我感觉类似上面的闭包,就是二次传入咯
// 当一个函数需要多个参数的时候,不一定一次性全部传入,可以分批传入
let a = function (a, b, c) {
  return a + b + c;
};
console.log(a(1, 2, 3));
console.log(a(1, 2));
// 提示nan,好像是空的意思 应该理解为缺少

a = function (a, b) {
  let s = function (c) {
    return a + b + c;
  };
  return s;
};

let e = a(1, 2);
console.log(e);
// 这里提示了s函数,
// 二次传入s
console.log(e(1));
// 等于4;
// 则是分两次传入的,其实还可以分三次,四次,五次,六次等传入
// 感觉以后用到的会更多

// 做一个分三次传入

let t = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
};

console.log(t(1)(2)(3));

t = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
};

let r = t(1);
// 刚刚试了下,返回的t如果为t(),然后在下面打印的时候,输入3个值不行,在声明的时候需要提前传入一个值
console.log(r(1)(2));
// 将参数逐个传入, 叫"柯里化"函数
// 服务器获取数据, 大量数据分块获取,分批传入

// 将上面的柯里化函数,改为箭头函数

t = a => b => c => a + b + c;

console.log(t(1)(2)(3));
// 也是一样的
// ! 把闭包: 纯函数

// 纯函数: 函数中用到的变量全间自己的, 没有"*变量"

// 如果函数内部必须要用到外部变量怎么办? 通过参数传入

// 外部变量

let zhekou = 0.8;

function chaoshi(wj, zhekou = 1) {
  return wj * zhekou;
  //   这个纯函数变量,我也没太懂意思,但是我感觉意思就是,如果函数内对象的值默认了一个,是大于外部变量的,想要使用外部变量,就需要传入参数值
}
// chaoshi(1200, 5000);
console.log(chaoshi(1200, zhekou));

访问器属性


// 访问器属性
// 添加对象,超时的蔬菜
// data现有的蔬菜和价格等属性
let chaoshi = {
  data: { name: "青菜", mn: "6元", leimu: "蔬菜" },
  //   增加一个函数,返回当前蔬菜的价格，
  sc() {
    return chaoshi.data.mn;
  },
  //   增加一个函数，函数名sb，对象名为mn，外部传入值给mn，mn又赋值给了chaoshi.data.mn所以当前超市的价格变动了
  sb(mn) {
    chaoshi.data.mn = mn;
  },
};
console.log(chaoshi.sc());
chaoshi.sb("10元");
// 超市上调价格
console.log(chaoshi.sc());


// 访问器属性
// 添加对象,超时的蔬菜
// data现有的蔬菜和价格等属性
let chaoshi = {
  data: { name: "青菜", mn: "6元", leimu: "蔬菜" },
  //   增加一个函数,返回当前蔬菜的价格，
  // getage
  sc() {
    return chaoshi.data.mn;
  },
  //   增加一个函数，函数名sb，对象名为mn，外部传入值给mn，mn又赋值给了chaoshi.data.mn所以当前超市的价格变动了
  //   setage
  sb(mn) {
    chaoshi.data.mn = mn;
    // 进行的赋值,并不需要let声明
  },
};
console.log(chaoshi.sc());
chaoshi.sb("10元");
// 超市上调价格
console.log(chaoshi.sc());

chaoshi = {
  data: { name: "青菜", mn: 6, leimu: "蔬菜" },
  //   增加一个函数,返回当前蔬菜的价格，
  // getage
  sc() {
    return chaoshi.data.mn;
  },
  //   增加一个函数，函数名sb，对象名为mn，外部传入值给mn，mn又赋值给了chaoshi.data.mn所以当前超市的价格变动了
  //   setage
  sb(mn) {
    if (mn <= 5 && mn >= 100) {
      chaoshi.data.mn = mn;
    } else {
      console.log("超出市场价格");
    }
  },
};

console.log(chaoshi.sc());
chaoshi.sb(3);
console.log(chaoshi.sc());

chaoshi = {
  data: { name: "青菜", mn: 6, leimu: "蔬菜" },
  //   增加一个函数,返回当前蔬菜的价格，
  // getage
  get mn() {
    return this.data.mn;
  },
  //   增加一个函数，函数名sb，对象名为mn，外部传入值给mn，mn又赋值给了chaoshi.data.mn所以当前超市的价格变动了
  //   setage
  set mn(mn) {
    if (mn <= 5 && mn >= 100) {
      this.data.mn = mn;
    } else {
      console.log("超出市场价格");
    }
  },
};
console.log(chaoshi.mn);
chaoshi.mn = 150;
console.log(chaoshi.mn);

let ad = {
  data: { name: "红牛", lei: "饮料", jiage: 5 },
  // 下面是读取价格 目前是无伪装状态
  jiage() {
    return this.data.jiage;
  },
  // 下面是修改价格
  xiugaijiage(jiage) {
    this.data.jiage = jiage;
  },
};
console.log(ad.jiage());
ad.xiugaijiage(10);
console.log(ad.jiage());

// 第二轮测试，用get跟set
ad = {
  data: { name: "红牛", lei: "饮料", jiage: 5 },
  // 下面是读取价格 目前是无伪装状态
  // get跟set相当于特殊函数,类似function
  get jiage() {
    return this.data.jiage;
  },
  // 下面是修改价格
  set jiage(jiage) {
    this.data.jiage = jiage;
  },
};
console.log(ad.jiage);
// 使用get跟set之后， 不在使用ad.xiugaijiage(10);而是根据用户习惯
ad.jiage = 10;
console.log(ad.jiage);

类与对象


// 创建类与对象

// 构造函数创建类与对象
// 构建函数创建类 声明的单次首字母要大写，创建一个we的类
let We = function (qqh, mingzi) {
  // 赋值操作
  this.qqh = qqh;
  this.mingzi = mingzi;
};
// 构造函数要必须加入一个new来执行，看下面的
const weqq = new We("123456789", "名字");
console.log(weqq);
// 为什么要这样用？因为可以重复使用这个构造函数的类，就是一个类库，可以重复使用这个类（函数）创建多个对象
const weqw = new We("88888888", "靓号");
console.log(weqw);
////////////////////////////////////////////////////////
// 这里理解为给构造函数We创建一个对象方法，使用.prototype ，添加在we.prototype原型上，命名为gettttt，之后可以被所有的类实例跟对象公用

We.prototype.gettttt = function () {
  return `qqh = ${this.qqh},mingzi=${this.mingzi}`;
};
// 给类User添加自定义方法,必须添加到它的原型对象属性上
// 声明在 User.prototype原型上的方法, 被所有类实例/对象所共用
console.log(weqq.gettttt());
console.log(weqw.gettttt());

// 拿老师的说法来看
// 对象方法一般是公共, 操作的是当前对象的属性
// 任何一个函数都有一个属性, 叫原型, 这个原型,对于普通函数来说,没用
// 只有把函数当 成构造函数来创建对象时, 这个原型属性才有用
///////////////////////////////////////////////////
// 静态成员
// 静态成员直接挂载到构造函数上面
We.w555 = "jingjng";
console.log(We.w555);
// 类与对象，糊里糊涂，意思就是先使用函数创建一个类，这类公共可以随便使用，然后这个函数封包成了声明的字段，通过声明的字段可以随便修改函数内的对象
// 通过.prototype对声明的函数添加一个自定义方法，用户可以随便调用，挂载静态成员直接追加即可

//////////////////es6系列//////////////////////////
// es6 class
// class就已经包含了上面所有的
// 先声明一个公共字段
class Pr {
  // 先声明两个公共字段
  name = "username";
  email = "useremail@email.com";
  // 私有成员使用#来代表//

  #gender = "male";
  //   构造方法 再es6中自带的语法constructor 程序自带的类似set get fun等
  constructor(name, email, sex) {
    this.name = name;
    this.email = email;
    this.#gender = sex;
  }
  // 公共方法：原型;

  getInfo() {
    return `name = ${this.name}, email = ${this.email}, sex = ${this.#gender}`;
  }
  // 静态成员语法static，也是程序自带的
  static status = "enabled";
}
// new构造函数使用的执行字段，不是构造函数不能使用
const user4 = new Pr("朱老师", "zhulaoshi@php.cn", "男");
// 这里还是使用公共方法原型调用，
console.log(user4.getInfo());
// es6中，所有的公共字段以及构造方法，私有属性，构造方法，公共方法原型，公共方法原型也就是.prototype，包括静态成员，都放到了class内
///////////////////////
//（子类）继承 为了扩展
/////////////////////
// 创建一个子类，名字叫Child 继承于Wewq (extends)程序自带的继承的意思
class Child extends Pr {
  // 继承的构造器，需要从父函数里面拿一下
  constructor(name, email, sex, salary) {
    //   继承自父级，构造器可以直接继承，继承的代码为
    super(name, email, sex);
    //   super程序自带的，也是简便下面的代码，继承父级，然后把构造器里面的三个对象（属性）拿过来，相当于引用了第51行代码
    // this.name = name;
    // this.email = email;
    // this.#gender = sex;
    // 刚刚又添加了一个对象（属性）叫做salary
    this.salary = salary;
  }
  getInfo() {
    // return `name = ${this.name}, email = ${this.email}, sex = ${this.#gender}`;其实就是继承第58行的getInfo公共方法
    //直接用super继承第58行的get方法，使用模板字符串，所以要加${},然后自定义属性salary上追加上去
    return `${super.getInfo()},salary = ${this.salary}`;
  }
}
// 直接调佣子类的名字Child
const user5 = new Child("灭绝", "mj@php.cn", "女", 12345676);
// 把新加的子类声明到user5中，然后打印
console.log(user5.getInfo());

class Stu {
  #age = 0;
  get age() {
    return this.#age;
  }

  set age(age) {
    if (age >= 18 && age <= 120) {
      this.#age = age;
    } else {
      console.log("非法数据");
    }
  }
}

let stu = new Stu();
console.log(stu.age);
stu.age = 40;
console.log(stu.age);

解构赋值


// 解构赋值
// 声明一个变量
const name = ["老卢", "123456"];
// 声明了一个数组
let username = name[0];
let useremail = name[1];
console.log(username, useremail);

// es6解构赋值 模板=数组

// es6: 解构, 将以上操作变得非常简单
// 1. 数组解构
// 模板  = 数组
let [name2, email] = ["laolu", "123456@qq.com"];
console.log(name2, email);

// 参数不足情况下
let [name3, email3, user3 = 0] = ["laolu", "123456@qq.com"];
console.log(name3, email3, user3);
// 参数不足的情况下，在默认参数增加一个值

// 参数过多
let [name4, email4, ...user4] = ["laolu", "123456@qq.com", "666", "7777", "88888"];
console.log(name4, email4, user4);

// 两组交换
let x = 1;
let y = 2;
console.log(x, y);
[y, x] = [x, y];
console.log(x, y);
// 对象解构
// 对象模板 = 对象字面量;
let { name5, name6, name7, name8 } = { name5: "666", name6: "777", name7: "888", name8: "999" };
console.log(name5, name6, name7, name8);
// 二次复用 在外层加个()
({ id, lesson, score } = { id: 2, lesson: "node", score: 90 });
console.log(id, lesson, score);
// 当左边模板中的变量出现命名冲突,使用别名解决,在原有的基础上加上:别名,
let { id: userId, lesson: userLesson, score: userScore } = { id: 3, lesson: "vue", score: 50 };
// 输出的时候也需要用别名
console.log(userId, userLesson, userScore);
// 克隆对象使用...
let { ...obj } = { id: 1, lesson: "js", score: 80 };
console.log(obj);

// 3. 应用场景（第一种写法）
function getUser(user) {
  console.log(user.id, user.name, user.email);
}

// 用对象解构传参（第二种写法，感觉就像函数的传统解法）
function getUser({ id, name, email }) {
  console.log(id, name, email);
}
getUser({ id: 123, name: "张三", email: "zs@php.cn" });

浏览器的js，与dom操作控制html页面

时间太紧迫，先贴代码，回头回来整理

下面是js，操作dom操作
html代码：


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解析一个浏览器按钮事件</title>
  </head>

  <body>
    <style>
      button {
        border: 0px;
        background-color: green;
        color: honeydew;
        padding: 4px;
        cursor: pointer;
      }

      button:hover {
        border: 0px;
        background-color: orange;
        color: blue;
        padding: 4px;
        cursor: pointer;
      }
    </style>
    <button onclick="qd(this)">开始签到</button>
    <script>
      function qd(ele) {
        // 意思是html页面body的style属性的backgroundColor背景颜色改为米色
        document.body.style.backgroundColor = "wheat";
        ele.style.backgroundColor = "yellow";
        ele.style.color = "blue";
        ele.textContent = "签到成功";
      }
    </script>
  </body>
</html>

操作的第二段代码：


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>示例演示dom操作2</title>
  </head>
  <ul class="list">
    <li class="li">测试看看</li>
    <li class="li">测试看看</li>
    <li class="li">测试看看</li>
    <li class="li">测试看看</li>
    <li class="li">测试看看</li>
  </ul>
  <!-- TODO 1. 一组: querySelectorAll(css选择器) 
TODO 2. 一个(一组中第1个): querySelector(css选择器) -->
  <script>
    // document代表html文档
    console.log(document);
    const items = document.querySelectorAll(".list>.li");
    console.log(items);
    for (let i = 0, length = items.length; i < length; i++) {
      items[i].style.color = "blue";
    }
  </script>
  <script>
    // TODO  1. 一组: querySelectorAll(css选择器)
    // TODO  2. 一个(一组中第1个): querySelector(css选择器)

    // 1. 将所有的item变成红色
    // html怎么表示?
    console.log(document);
    const items = document.querySelectorAll(".list > .li");
    console.log(items);
    for (let i = 0, length = items.length; i < length; i++) {
      items[i].style.color = "red";
    }
    //   items.forEach(item => (item.style.color = "green"));

    // 2. 将第一个改为黄色背景
    const first = document.querySelector(".list > .li");
    console.log(first === items[0]);
    first.style.backgroundColor = "yellow";

    const three = document.querySelector(".list > .li:nth-of-type(3)");
    three.style.backgroundColor = "wheat";

    // 3. 快捷方式
    //   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></body>
</html>

上一篇： Python中的类对象示例详解

下一篇： node.js实现的装饰者模式示例