欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

闭包,访问器属性,对象的创建,数组和对象的构造

程序员文章站 2022-03-01 18:35:03
...

闭包原理

1.父子函数
2.子函数调用了父函数中的变量

  1. fn = function (a) {
  2. let f = function (b) {
  3. return a + b;
  4. };
  5. return f;
  6. };
  7. let f = fn(10);
  8. console.log(typeof f);
  9. console.log(f(20));

经典应用
闭包:偏函数(参数分批传入,柯里化函数)

  1. fn = function (a) {
  2. return function (b) {
  3. return function (c) {
  4. return a + b + c;
  5. };
  6. };
  7. };
  8. console.log(fn(1)(2)(3));

反闭包:纯函数
纯函数:函数中用到的变量全是自己的,没有*变量
如果用到外部变量,传入参数

  1. let discound = 0.8;
  2. function getPrice(price, discound = 1) {
  3. return price * discound;
  4. }
  5. console.log(getPrice(1200, discound));

访问器属性

访问器属性:进行属性伪装,将一个方法伪装成属性进行访问

  1. user = {
  2. data: { name: "李同学", height: 160 },
  3. get height() {
  4. return this.data.height;
  5. },
  6. set height(height) {
  7. if (height >= 150 && height <= 200) {
  8. this.data.height = height;
  9. } else {
  10. console.log("不正常");
  11. }
  12. },
  13. };
  14. console.log(user.height);
  15. user.height = 165;
  16. console.log(user.height);

数组与对象的解构过程

1.数组解构 模板=数组

  1. let [name, email] = ["朱老师", "364967906@qq.com"];
  2. console.log(name,email);

2.对象解构 对象模板=对象字面量

  1. let{id,lesson,score}={id:1,lesson:'js',score:80}
  2. console.log(id,lesson,score);

3.应用场景

  1. function getUser({id,name,email}){
  2. console.log(id,name,email);
  3. }
  4. getUser({id:123,name:'li',email:'123@php.cn'})

js引入到浏览器的方法

1.事件属性,写到元素的事件属性
<button onclick="console.log('hello world');">按钮</button>
2.使用script标签引入js脚本,写到标签中,仅于当前的文档

  1. <button onclick="setBg(this)">按钮2</button>
  2. <script>
  3. function setBg(ele) {
  4. document.body.style.backgroundColor = "wheat";
  5. ele.style.backgroundColor = "yellow";
  6. ele.textContent = "保存成功";
  7. }
  8. </script>

3.如果这个按钮功能,需要多个页面使用,可以将js脚本保存为外部脚本,然后再引入HTML中
<script src="out.js"></script>

获取DOM元素的二个API

1.一组:querySelectorAll(css选择器)

  1. console.log(document);
  2. const items = document.querySelectorAll(".list>.itme");
  3. console.log(items);
  4. for (let i = 0; i < items.length; i++) {
  5. items[i].style.color = "red";
  6. }

2.一个:querySelector(css选择器)

  1. const first = document.querySelector(".list>.itme");
  2. console.log(first);
  3. first.style.backgroundColor = "yellow";