博客列表 >闭包,访问器属性,对象的创建,数组和对象的构造

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

木子木杉
木子木杉原创
2022年01月06日 10:28:13405浏览

闭包原理

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";
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议