JavaScript基础知识(二)
- 一、ES2015 基础语法
- 1.变量
- 2.常量
- 3.模板字符串
- 4.结构赋值
- 二、函数进阶
- 1. 设置默认参数值
- 2. 立即执行函数
- 3. 闭包
- 4. 箭头函数
- 三、面向对象
- 1. 面向对象概述
- 2. 基本概念
- 3. 新语法 与 旧语法
- 3.1 ES5 面向对象的知识
- ES5构造函数
- 原型对象
- 原型链(继承)
- 3.2 ES5 面向对象的知识
- Class关键字
- 继承
- 四、DOM 基础
- 1. 什么是DOM
- 2. 节点类型
- 3. document 对象
- 3.1 获取节点
- 4. 事件类型
- 5. 设置样式
- 6. 设置属性
- 6.1 通过 class 属性设置属性
一、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';};
}