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

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

蓝魔
蓝魔原创
2022年01月05日 16:24:26536浏览
  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>

获取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>

  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>

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