- 实例演示闭包的原理与经典应用场景 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.prototypeApp.prototype.getInfo=function(){ return this;}// 创建对象const app1=new App('LST','lst@php.cn');console.log(app1.name,app1.email);console.log(app1.getInfo());;// ES6中的Classclass 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);// 参数过多，用...restlet [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>
