1. 實例演示閉包的原理與經典應用場景 2. 實例演示訪問器屬性(不要抄課堂案例) 3. 實例演示類與對象的創(chuàng)建與成員引用 4. 實例演示數(shù)組與對象的解構過程與經典案例 5. 實例演示JS引入到瀏覽器中的的方法 6. 實例演示獲取DOM元素的二個API

閉包的原理與經典應用場景

• 1.原理
• • 存在父子函數(shù)關系
• • 子函數(shù)調用了父函數(shù)的變量
• • 返回一個函數(shù)
• • 當子函數(shù)調用了父函數(shù)中的變量后，父函數(shù)的作用域不會消失，從而可以將函數(shù)內部的私有變量暴露到外部使用。
• 2.經理應用場景
• • 偏函數(shù)（高階函數(shù)）：當一個函數(shù)需要多個參數(shù)時，可以分批傳入

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);
//轉為箭頭函數(shù)
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);

類與對象的創(chuàng)建與成員引用

// 傳統(tǒng)構造函數(shù)
let App=function(name,email){
    this.name=name;
    this.email=email;
}
// 定義公有方法 App.prototype
App.prototype.getInfo=function(){
    return this;
}
// 創(chuàng)建對象
const app1=new App('LST','lst@php.cn');
console.log(app1.name,app1.email);
console.log(app1.getInfo());;
// ES6中的Class
class Parent{
    // 公開屬性
    name;
    phone;
    // 私有屬性
    #sex;
    // 靜態(tài)屬性
    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);

數(shù)組與對象的解構過程與經典案例

• 數(shù)組解構

  // 數(shù)組解構 "模板＝數(shù)組"
  let [a,b]=['lst','hello'];
  console.log(a,b);
  // 更新
  [a,b]=['SONG','TAO'];
  console.log(a,b);
  // 參數(shù)不足,使用默認值
  let [a2,b2]=[1,2];
  [a2,b2,c2=3]=[1,2];
  console.log(a2,b2,c2);
  // 參數(shù)過多，用...rest
  let [a3,b3,...c3]=[1,2,3,4,5,6,7];
  console.log(a3,b3,c3);
  // 實例：兩數(shù)交換
  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);
  // 更新,大括號不能直接出現(xiàn)在＝左邊。用（）包裹起來轉為表達式即可。
  ({id,name,dept}) = {id:11,name:'Song',dept:'采購部'};
  console.log(id,name,dept);
  // 當左邊模板中出現(xiàn)變量命名沖突時，可用別名代替解決（原變量名：別名）
  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>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：