JavaScript基础知识（二）

一、ES2015 基础语法

1.变量

使用 let 代替 var。
let 的优点：

• 块级作用域；

{  var str = 'hello world';}
console.log(str);     //  hello world
{  let str = 'hello world';}
console.log(str);     //  报错：str is not defined

• 不存在变量提升；

console.log(str);
var str = 'hello world';    // undefinedconsole.log(str);
let str = 'hello world';    // 报错：Cannot access 'str' before initialization

• 不允许重复声明。

var num = 10;
var num = 20;
console.log(num);     // 20let num = 10;
let num = 20;
console.log(num);     // 报错：Identifier 'num' has already been declared\n

总的来说，let 会让变量声明更加规范。

2.常量

使用 const 定义 常量（即不变的值）。
定义之后不可以修改：

const num = 10;
num = 20;
console.log(num);    //   报错：Assignment to constant variable.

使用 const 声明的几种情况：

• 不变的值；

const PI = 3.14;\nconsole.log(PI);    //   3.14

• 函数表达式；

const fun = function (a, b) {return a + b;
}fun(1, 1);

• 对象；

function getStundent() {return {name: 'Lulu',age: 20}
}
// 对象声明可以使用常量
const student = getStundent();
// 虽然是常量，但是对象里面的属性可以改变
student.name = 'Mary';
console.log(student.name);    // 'Mary'

• 引入外部模块。

const express = require('express');

3.模板字符串

语法：

// 反引号 ``
let str = `hello world`;
console.log(str);      // hello world

优点：

• 支持换行：

let str = `hello
world`;
console.log(str);

• 支持嵌入变量，${} 连接字符串：

let year = "2023";
let month = "08";
let date = "08";
// 拼接成 "2023年08月08日" 
let result = `${year}年${month}月${date}日`
console.log(result);     // 2023年08月08日

4.结构赋值

• 数组的解构赋值：

// let n = 10;
// let m = 20;
let [n, m] = [10, 20];
console.log(n);   // 10
console.log(m);  // 20

示例：交换 n 和 m 的值。

let n = 10;
let m = 20;
// 交换
[n, m] = [m, n];
console.log(n);   // 20
console.log(m);   // 10

• 对象的结构赋值：

// let obj = {name: "xiaoming", age: 10};
// let name = obj.name;
// let age = obj.name;
let { name, age } = { name: "xiaoming", age: 10 };
// 如果颠倒 name，age的顺序并不会影响结果：
// let { age, name } = { name: "xiaoming", age: 10 };  
console.log(name);   // xiaoming
console.log(age);    // 10

• 通过解构赋值传递参数：

// function getName(obj) {
//    return obj.name
//}
function getName({name, age}) {// name  ==> obj.name// age  ==> obj.agereturn name
}let result = getName({name: 'xiaoming', age: 10});
console.log(result);     // xiaoming

二、函数进阶

1. 设置默认参数值

ES2015 的语法可以为函数的参数设置默认值：

function fun(x = 10, y = 20) {return x + y;
}fun();    		// 30
fun(1);   		// 21
fun(10， 20);   // 30

• 未传递参数和未设置默认参数值时：

function fun(x, y) {console.log(x); // undefinedconsole.log(y); // undefinedreturn x + y;
}let result = fun();
console.log(result);   // NaN

2. 立即执行函数

(function () {let a = 10;let b = 20;console.log(a + b);
})();
// 30

功能：封装代码。

特点：

• 声明之后可以直接调用；
• 不可以多次调用；
• 某些第三方库实现封装。

作用域链：

• 每一个函数都会创建一个新的作用域；
• 函数外部无法访问函数内部的值；
• 函数内部的值可以访问函数外部的值（如果内部找不到值就去外部一层一层找）。
  示例：树状图。

|-window
| |-str
| |-fun1
| | |-str
| | |-num
| | |-fun2
| | | |-str
| | | |-num

let str = "hello";
function fun1() {let str = "world";let num = 10; function fun2() {let str = 'fun2';let num = 20;console.log(str); // fun2console.log(num); // 20}fun2();console.log(str); // worldconsole.log(num); // 10
}
fun1();  
console.log(str); // hello

3. 闭包

• 闭包函数：声明在一个函数中的函数，叫做闭包函数。
• 闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回之后。
• 闭包的特性： 内部函数未执行完，外部函数即使执行完成，外部函数中的变量也不会被销毁。

示例1：想要在 fun1 的外部打印 fun2 的结果。

function fun1() {function fun2() {console.log("I'm fun2");}
}

利用 return在函数外部调用 fun2。

function fun1() {function fun2() {console.log("I'm fun2");}// 闭包的精华：returnreturn fun2;
}const f = fun1(); 
f();    // I'm fun2

示例2：想要在 fun1 的外部求和。

function fun1() {let n = 10;let m = 20;function fun2() {return n + m;}return fun2;
}const f = fun1(); // fun1的运行结果是fun2
let result = f();
console.log(result);  // 30

代码封装：
ES5 的一个模块化的语法。

const module = (function () {let a = 10;let b = 20;function add() {return a + b;}return add;
})();

4. 箭头函数

作用： 简化写法。

const add = function (x) {return x * x;
};
// 简化
const add = (x) => {return x * x;
};
// 简化
//         参数  返回值
const fun = x => x * x;

示例：每秒输出一次名字。

const cat = {name: "miaomiao",sayName() {let self = this；setInterval(function () {// window调用的setInterval// this 指向 window,所以需要提前保存console.log(self.name);}, 1000)},...// 使用箭头函数：sayName() {    // 箭头函数：在哪里定义，this 就指向谁setInterval(() => {// this 指向 catconsole.log(this.name);}, 1000);},...
};cat.sayName();  // miaomiao

• 使用 function 定义的函数， this 取决于调用的函数;
• 使用箭头函数， this 取决于函数定义的位置；

箭头函数和普通函数的 this 指向不同：
- 普通函数指向的是 调用该函数的对象；
- 箭头函数是 在哪里定义，this 就指向谁。

三、面向对象

1. 面向对象概述

面向对象是一种编程思想，这种编程思想可以当做一个学科来研究。

除了 JavaScript，例如 C++、Java、Python、PHP 等等编程语言都可以使用这种面向对象的编程思想来开发应用程序。

2. 基本概念

• 类：类型、模板、统称（例如：狗类、鸟类）；
• 对象：是类的一个实例，会具体到某一个事物上（天上飞的那只鸟，我加的那只猫）；
• 继承：狗类继承至哺乳动物类，猫类也继承至哺乳动物类，继承后，子类可以使用父类的属性和方法。

3. 新语法 与 旧语法

• ES5 面向对象语法：prototype；
• ES6(2015) 面向对象语法：class；

3.1 ES5 面向对象的知识

• 构造函数：用于创建对象的函数；
• 原型对象：prototype；
• 原型链：实现继承；

ES5构造函数

构造函数的函数名，首字母大写；

构造函数是用来创建对象用的。

语法：function Dog(){}

// 构造函数Dog
function Dog(name, age) {this.name = name;this.age = age;
}
let dog = new Dog("wangwang", 2);  // 创建了一个对象，狗类的实例：wangwang
console.log(dog.name);    // wangwang

原型对象

通过设置构造函数的 prototype 属性，可以扩展构造函数生成的对象。
通过原型对象，为构造函数生成的对象赋予新的方法。

function Dog(name, age) {this.name = name;this.age = age;
}
// 给 Dog.prototype 添加方法
Dog.prototype.sayName = function () {console.log(this.name);
}; let dog1 = new Dog("wangwang", 2);
let dog2 = new Dog("jimmy", 6);
// 所有 Dog 的实例都可以使用 sayName 方法
dog1.sayName();		// wangwang
dog2.sayName();     // jimmy

原型链（继承）

将该构造函数 Dog 的原型指向另一个构造函数 Animal 的实例，则 所有 Dog 的实例都可以使用 Animal 上的变量和方法。
Dog.prototype = new Animal()

function Animal(name) {this.name = name;
}
Animal.prototype.sayName = function () {console.log(`你好，我是${this.name}`);
};function Dog(name) {this.name = name;
}
// 继承的精华 => 就在这句
Dog.prototype = new Animal();var dog = new Dog("wangwang");
dog.sayName();  // 你好，我是wangwang

3.2 ES5 面向对象的知识

Class关键字

语法：
class 构造函数名字 {
// 使用constructor 声明属性
constructor() {…}
}

class Dog {// constructor 声明属性：constructor(name, age) {this.name = name;this.age = age;}// 方法在 constructor 下面写：sayName() {console.log(`我是${this.name}`);}
}let dog = new Dog("wangwang", 2);
dog.sayName();  // 我是wangwang

继承

语法：extends 关键字 + super。

示例1：让 Dog 继承 Animal。

class Animal {constructor(name) {this.name = name;}sayName() {console.log(`我是${this.name}`);}
}
// 使用 extends关键字：让 Dog 继承 Animal
class Dog extends Animal {}let dog = new Dog("wangwang");
dog.sayName();  // 我是wangwang

示例2：让 Dog 继承 Animal 中的一些属性，然后再声明自身所需要的属性。

class Animal {constructor(name, age) {this.name = name;this.age = age;}sayName() {console.log(`我是${this.name}`);}
}
// 使用 extends关键字：让 Dog 继承 Animal
class Dog extends Animal {constructor(name, age, id) {// 父级的属性: super关键字super(name, age);// 子级的属性就用 this 关键字声明this.id = id;}// 方法：getId() {console.log(`我的编码是${this.id}`);}	
}let dog = new Dog("wangwang", 2, 1234567);
console.log(dog.name, dog.age, dog.id); // wangwang, 2, 1234567
dog.sayName(); // 我是wangwang
dog. getId(); // 我的编码是1234567 

四、DOM 基础

1. 什么是DOM

DOM：是一套标准编程接口。
我们通过 DOM 这套接口来操作HTML元素。

2. 节点类型

• 元素节点；
• 属性节点；
• 文本节点；

网页效果：操作元素节点、属性节点、文本节点，以及修改元素的样式。

3. document 对象

DOM 通过 document 对象，为开发者提供了大量的接口（API）来操作 DOM 树。

3.1 获取节点

• document.getElementById() ：通过 ID 来获取元素，其返回值是一个 DOM 节点；

<h1 id="title">hello world</h1>

let h1 = document.getElementById("title");
console.log(h1);

• document.getElementByClassName() ：通过类名来获取元素，其返回值是一个 DOM 节点的集合，需要遍历；

<button>123</button>
<button>456</button>
<button>789</button>

let btns = document.getElementsByClassName("btn");
console.log(btns);

• document.querySelector() ：参数是 css 选择器 获取一个节点，不管能找到多少个，返回值都是一个 DOM 节点（如果是多个元素，它会返回第一个）；

let h1 = document.querySelector("#title");
h1.innerHTML = "你好世界";

• document.querySelectorAll() ：参数是 css 选择器 (通常是类选择器)，作用是获取多个节点，返回值一个 DOM 节点的集合，需要遍历；

let btns = document.querySelectorAll(".btn");
for (let i in btns) {btns[i].innerHTML = "test";
}

• element.innerHTML ： DOM 节点的属性，获取和设置元素内所有的内容。

let a = document.querySelector("#a");
a.innerHTML = "<span>链接</span>";

4. 事件类型

• click ： onclick 点击事件；

let btn = document.querySelector("button");// 事件监听函数
btn.onclick = function () {console.log("hello btn");
};

• mouseenter ： onmouseenter 鼠标移入元素；

let box = document.querySelector(".box");// 鼠标移入元素
box.onmouseenter = function () {console.log("hello");
};

• mouseleave ：onmouseleave 鼠标移出元素。

let box = document.querySelector(".box");// 鼠标移出元素
box.onmouseleave = function () {console.log("bye");
};

5. 设置样式

语法：
element.style.color = “red”
element.style.backgroundColor = “pink”

通过 click、mouseenter、mouseleave 事件控制样式。

示例1：设置 box 的样式。

let box = document.querySelector("#box");// 鼠标移入元素
box.onmouseenter = function () {this.style.backgroundColor = "blue";
};
// 鼠标移出元素
box.onmouseleave = function () {this.style.backgroundColor = "red";
};

示例2：通过点击 button 设置 box 的样式：

let btn = document.querySelector("#btn");
let box = document.querySelector("#box");// 点击事件监听函数
btn.onclick = function () {box.style.backgroundColor = "yellow";
};

6. 设置属性

语法：

element.src = "images/1.png";
element.id = "wrapper";

示例：点击数字列表切换图片。

// 图片列表
let imgList = ["images/1.png", "images/2.png", "images/3.png"];
let btnList = document.querySelectorAll("btn");
let imgBox = document.querySelector("#box");for(let i in btnList){btnList[i].onclick = function(){imgBox.src = imgList[i];}
}

页面效果：

6.1 通过 class 属性设置属性

语法：

element.className = "red";

示例：点击 li ，设置激活的背景色。

.active {background-color: red;
}

let liList = document.querySelectorAll("li");
for (let i in liList) {liList[i].onclick = function () {if(this.className === 'active'){this.className = ''return;}this.className = 'active';};
}