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

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

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

• 1.原理
• • 存在父子函数关系
• • 子函数调用了父函数的变量
• • 返回一个函数
• • 当子函数调用了父函数中的变量后，父函数的作用域不会消失，从而可以将函数内部的私有变量暴露到外部使用。
• 2.经理应用场景
• • 偏函数（高阶函数）：当一个函数需要多个参数时，可以分批传入

fn=function(a,b){
    return function(c){
        return function(d){
            return a+b+c+d;
        }
    }
}

let f=fn(1,2)(3)(4);
console.log(f);
//转为箭头函数
fn=(a,b)=>c=>d=>a+b+c+d;
console.log(f=fn(1,2)(3)(4));

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

// 访问器属性
let obj={
    data:{name:'蓝魔',
    addr:'青岛'},
    get addr(){
        return this.data.addr;
    },
    set addr(addr){
        this.data.addr=addr;
    }
}

console.log(obj.data.name);
console.log(obj.data.addr);
obj.data.addr='山东';
console.log(obj.data.addr);

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

// 传统构造函数
let App=function(name,email){
    this.name=name;
    this.email=email;
}
// 定义公有方法 App.prototype
App.prototype.getInfo=function(){
    return this;
}

// 创建对象
const app1=new App('LST','[e-mail]');
console.log(app1.name,app1.email);
console.log(app1.getInfo());;

// ES6中的Class
class Parent{
    // 公开属性
    name;
    phone;
    // 私有属性
    #sex;
    // 静态属性
    static flag=true;
    // 构造方法
    constructor(name,phone,sex){
        this.name=name;
        this.phone=phone;
        this.#sex=sex;
    }
    // 公开方法
    getInfo(){
        return this;
    }
}

// 实例化对象
const p=new Parent('蓝魔','13200001111','Man');
console.log(p);

// 类的继承
class Child extends Parent{
    childName;
    constructor(name,phone,sex,childname){
        super(name,phone,sex);
        this.childName=childname;
    }
    getInfo(){
        return `${super.getInfo()},${this.childName}`;
    }
}

const c=new Child('红魔','13677778888','Woman','小孩');
console.log(c.getInfo());
console.log();
console.log(Parent.flag);

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

• 数组解构

  
  // 数组解构 "模板＝数组"
  let [a,b]=['lst','hello'];
  console.log(a,b);
  // 更新
  [a,b]=['SONG','TAO'];
  console.log(a,b);
  // 参数不足,使用默认值
  let [a2,b2]=[1,2];
  [a2,b2,c2=3]=[1,2];
  console.log(a2,b2,c2);
  // 参数过多，用...rest
  let [a3,b3,...c3]=[1,2,3,4,5,6,7];
  console.log(a3,b3,c3);
  // 实例：两数交换
  let g=66;
  let h=77;
  [h,g]=[g,h];
  console.log(g,h);
  

• 对象解构

  
  // 对象解构 “对象模板 ＝ 对象的键”
  let {id,name,dept}={id:1,name:'lst',dept:'技术部'};
  console.log(id,name,dept);
  // 更新,大括号不能直接出现在＝左边。用（）包裹起来转为表达式即可。
  ({id,name,dept}) = {id:11,name:'Song',dept:'采购部'};
  console.log(id,name,dept);
  // 当左边模板中出现变量命名冲突时，可用别名代替解决（原变量名：别名）
  let {id:id2,name:name2,dept:dept2}={id:2,name:'Tao',dept:'销售部'};
  console.log(id2,name2,dept2);
  // 克隆对象
  let {...obj2} = {id:5,name:'666',dept:777};
  console.log(obj2.id,obj2.dept);
  // 对象解构传参
  function getInfo({id,name,dept}){
   console.log(id,name,dept);
  }
  getInfo({id:1,name:'lst',dept:'JiShuBu'});
  

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

<!-- 1.写到元素的标签中，比如事件属性 -->
<button onclick="this.style.color='red';document.body.style.background='yellow'">点击变字</button>

<!-- 2.使用javascript标签引入 -->
<button onclick="save(this);">点击保存</button>
<script>
    function save(obj){
        document.body.style.background='yellow';
        obj.textContent='保存成功！';
        obj.style.background='green';
    }
</script>

<!-- 3.引入外部.js文件引入脚本 -->
<script src='my.js'></script>

获取DOM元素的两个API

<!-- 1.querySelectorAll（css选择器）：选择一组 -->
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>

<script>
    let items=document.querySelectorAll('.item');
    for(let i=0,length=items.length;i<length;i++){
        items[i].style.background='lightgreen';
    }
</script>

<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<!-- 2.querySelector(css选择器)：选择匹配到的第一个 -->
<script>
    let item=document.querySelector('.item');
    item.style.background='lightgreen';
    // 匹配任意一个
    item=document.querySelector('.item:nth-of-type(3)');
    item.style.background='lightgreen';
</script>