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

闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API

程序员文章站 2022-06-01 20:18:18
...
  1. 实例演示闭包的原理与经典应用场景 2. 实例演示访问器属性(不要抄课堂案例) 3. 实例演示类与对象的创建与成员引用 4. 实例演示数组与对象的解构过程与经典案例 5. 实例演示JS引入到浏览器中的的方法 6. 实例演示获取DOM元素的二个API

闭包的原理与经典应用场景

  • 1.原理
    • 存在父子函数关系
    • 子函数调用了父函数的变量
    • 返回一个函数
    • 当子函数调用了父函数中的变量后,父函数的作用域不会消失,从而可以将函数内部的私有变量暴露到外部使用。
  • 2.经理应用场景
    • 偏函数(高阶函数):当一个函数需要多个参数时,可以分批传入
  1. fn=function(a,b){
  2. return function(c){
  3. return function(d){
  4. return a+b+c+d;
  5. }
  6. }
  7. }
  8. let f=fn(1,2)(3)(4);
  9. console.log(f);
  10. //转为箭头函数
  11. fn=(a,b)=>c=>d=>a+b+c+d;
  12. console.log(f=fn(1,2)(3)(4));

访问器属性 get/set (对象中的属性必需用{}包起来)

  1. // 访问器属性
  2. let obj={
  3. data:{name:'蓝魔',
  4. addr:'青岛'},
  5. get addr(){
  6. return this.data.addr;
  7. },
  8. set addr(addr){
  9. this.data.addr=addr;
  10. }
  11. }
  12. console.log(obj.data.name);
  13. console.log(obj.data.addr);
  14. obj.data.addr='山东';
  15. console.log(obj.data.addr);

类与对象的创建与成员引用

  1. // 传统构造函数
  2. let App=function(name,email){
  3. this.name=name;
  4. this.email=email;
  5. }
  6. // 定义公有方法 App.prototype
  7. App.prototype.getInfo=function(){
  8. return this;
  9. }
  10. // 创建对象
  11. const app1=new App('LST','lst@php.cn');
  12. console.log(app1.name,app1.email);
  13. console.log(app1.getInfo());;
  14. // ES6中的Class
  15. class Parent{
  16. // 公开属性
  17. name;
  18. phone;
  19. // 私有属性
  20. #sex;
  21. // 静态属性
  22. static flag=true;
  23. // 构造方法
  24. constructor(name,phone,sex){
  25. this.name=name;
  26. this.phone=phone;
  27. this.#sex=sex;
  28. }
  29. // 公开方法
  30. getInfo(){
  31. return this;
  32. }
  33. }
  34. // 实例化对象
  35. const p=new Parent('蓝魔','13200001111','Man');
  36. console.log(p);
  37. // 类的继承
  38. class Child extends Parent{
  39. childName;
  40. constructor(name,phone,sex,childname){
  41. super(name,phone,sex);
  42. this.childName=childname;
  43. }
  44. getInfo(){
  45. return `${super.getInfo()},${this.childName}`;
  46. }
  47. }
  48. const c=new Child('红魔','13677778888','Woman','小孩');
  49. console.log(c.getInfo());
  50. console.log();
  51. console.log(Parent.flag);

数组与对象的解构过程与经典案例

  • 数组解构
    1. // 数组解构 "模板=数组"
    2. let [a,b]=['lst','hello'];
    3. console.log(a,b);
    4. // 更新
    5. [a,b]=['SONG','TAO'];
    6. console.log(a,b);
    7. // 参数不足,使用默认值
    8. let [a2,b2]=[1,2];
    9. [a2,b2,c2=3]=[1,2];
    10. console.log(a2,b2,c2);
    11. // 参数过多,用...rest
    12. let [a3,b3,...c3]=[1,2,3,4,5,6,7];
    13. console.log(a3,b3,c3);
    14. // 实例:两数交换
    15. let g=66;
    16. let h=77;
    17. [h,g]=[g,h];
    18. console.log(g,h);
  • 对象解构
    1. // 对象解构 “对象模板 = 对象的键”
    2. let {id,name,dept}={id:1,name:'lst',dept:'技术部'};
    3. console.log(id,name,dept);
    4. // 更新,大括号不能直接出现在=左边。用()包裹起来转为表达式即可。
    5. ({id,name,dept}) = {id:11,name:'Song',dept:'采购部'};
    6. console.log(id,name,dept);
    7. // 当左边模板中出现变量命名冲突时,可用别名代替解决(原变量名:别名)
    8. let {id:id2,name:name2,dept:dept2}={id:2,name:'Tao',dept:'销售部'};
    9. console.log(id2,name2,dept2);
    10. // 克隆对象
    11. let {...obj2} = {id:5,name:'666',dept:777};
    12. console.log(obj2.id,obj2.dept);
    13. // 对象解构传参
    14. function getInfo({id,name,dept}){
    15. console.log(id,name,dept);
    16. }
    17. getInfo({id:1,name:'lst',dept:'JiShuBu'});

JS引入到浏览器中的的方法

  1. <!-- 1.写到元素的标签中,比如事件属性 -->
  2. <button onclick="this.style.color='red';document.body.style.background='yellow'">点击变字</button>
  3. <!-- 2.使用javascript标签引入 -->
  4. <button onclick="save(this);">点击保存</button>
  5. <script>
  6. function save(obj){
  7. document.body.style.background='yellow';
  8. obj.textContent='保存成功!';
  9. obj.style.background='green';
  10. }
  11. </script>
  12. <!-- 3.引入外部.js文件引入脚本 -->
  13. <script src='my.js'></script>

闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API

获取DOM元素的两个API

  1. <!-- 1.querySelectorAll(css选择器):选择一组 -->
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. <div class="item">item6</div>
  8. <script>
  9. let items=document.querySelectorAll('.item');
  10. for(let i=0,length=items.length;i<length;i++){
  11. items[i].style.background='lightgreen';
  12. }
  13. </script>

闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API

  1. <div class="item">item1</div>
  2. <div class="item">item2</div>
  3. <div class="item">item3</div>
  4. <div class="item">item4</div>
  5. <div class="item">item5</div>
  6. <div class="item">item6</div>
  7. <!-- 2.querySelector(css选择器):选择匹配到的第一个 -->
  8. <script>
  9. let item=document.querySelector('.item');
  10. item.style.background='lightgreen';
  11. // 匹配任意一个
  12. item=document.querySelector('.item:nth-of-type(3)');
  13. item.style.background='lightgreen';
  14. </script>

闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API