收藏
PHPz批改状态：合格
老师批语：
闭包:有权访问另一个函数作用域中的变量的函数;一般情况就是在一个函数中包含另一个函数，也即是一个父子函数，且子函数调用了父函数中的变量。
fn = function (a) {let f = function (b) {return a + b;};return f;};let f1 = fn(10);// fn()调用完成,但是内部的a被子函数引用了, 所以fn()创建的作用域不消失console.log(f1(20));
let user = {data: { name: "Harvey", height: 187 },getHeight() {return user.data.height;},setHeight(height) {user.data.height = height;},};console.log(user.getHeight());user.setHeight(167);console.log(user.getHeight());
class Parent {// 公共字段name = "username";email = "userman@isidun.com";//私有成员#gender = "male";//构造方法constructor(name, email, sex) {this.name = name;this.email = email;this.#gender = sex;}// 公共方法getInfo() {return `name = ${this.name} ,email = ${this.email}, sex = ${this.#gender}`;}//静态成员static status = "enabled";}const user1 = new Parent("Aiden", "aiden@isidun.com", "male");console.log(user1.getInfo());//继承，为了扩张功能class Child extends Parent {constructor(name, email, sex, salary) {super(name, email, sex);//子类中的新属性this.salary = salary;}getInfo() {return `${super.getInfo()}, salary = ${this.salary}`;}}const user2 = new Child("Sunny", "sunny@isidun.com", "female", 25000);console.log(user2.getInfo());
let [name, email] = ["Harvey", "harvey@isidun.com"];console.log(name, email);
参数不足，给定默认参数
[name, email, age = 18] = ["Herman", "heaman@isidun.com"];console.log(name, email, age);
参数过多…rest
let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];console.log(a, b, c, d);
let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };console.log(id, lesson, score);
function getUser({id,name, email}){console.log(id,name, email);}getUser({id:123,name:"Herman",email:'herman@samrtusedphones.com'});
点击按钮改变body背景色、按钮背景色及按钮文字。
<button onclick="document.body.style.backgroundColor='wheat';this.style.backgroundColor='yellow';this.textContent='保存成功'">按钮2</button>
效果同上
<button onclick="setBg(this)">按钮2</button><script>function setBg(ele) {document.body.style.backgroundColor = "wheat";ele.style.backgroundColor = "yellow";ele.textContent = "保存成功";}</script>
效果同上，HTML核心代码：
<body><button onclick="setBg(this)">按钮2</button><script src="outer.js"></script></body>
JS文档代码：
function setBg(ele) {document.body.style.backgroundColor = "wheat";ele.style.backgroundColor = "yellow";ele.textContent = "保存成功";}
选择一组css标签/class，演示：
<body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>const items = document.querySelectorAll(".list > .item");console.log(items);for (let i = 0, length = items.length; i < length; i++) {items[i].style.color = "green";}</script></body>
选择一组中的一个，演示：
<body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>// 将第一个改为黄色背景const first = document.querySelector(".list> .item");console.log(first === items[0]);first.style.backgroundColor = "yellow";//将第4个改为wheat背景const fourth = document.querySelector(".list> .item:nth-of-type(4)");fourth.style.backgroundColor = "wheat";</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
