JS高级
一、函数高级
1、函数回调
// 回调的函数
function callback(data) {}
// 逻辑函数
function func(callback) {
// 函数回调
if (callback) callback(data);
}
// 函数回调的本质:在一个函数中(调用函数),当满足一定条件,调用参数函数(回调函数)
// 回调函数作为调用函数的参数传入
// 回调函数通过参数将调用还是内部数据传出
2、闭包
function outer() {
var data = {}
function inner() {
return data;
}
return inner;
}
// 闭包目的:不允许提升变量作用域时,该函数的局部变量需要被其他函数使用
// 闭包本质:函数的嵌套,内层函数称之为闭包
// 闭包的解决案例:①影响局部变量的生命周期,持久化局部变量;②解决变量污染
二、循环绑定
.html文件
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
.js文件
var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 打印列表项的索引
console.log(i);
}
}
// 变量污染
// 获取局部作用域解决
// 闭包解决
// 对象属性解决
三、面向对象JS
1、属性与方法
var obj = {}; | var obj = new Object();
// 属性
obj.prop = "";
// 方法
obj.func = function () {}
// 删除属性与方法
delete obj.prop
delete obj.func
2、类字典结构使用
var dict = {name: "zero", age: 18}
var dict = {"my-name": "zero", fn: function () {}, fun () {}}
dict.name | dict["my-name"] | dict.fn()
3、构造函数(ES5)
function People(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
return 'eat';
}
}
4、继承(ES5)
// 父级
function Sup(name) {
this.name = name;
this.fn = function () {
console.log('fn class');
}
}
// 原型
console.log(Sup.prototype);
console.log(sup.__proto__);
// 子级
function Sub(name) {
// 继承属性
Sup.call(this, name);
}
// 继承方法
Sub.prototype = new Sup;
// 创建子级对象
var sub = new Sub("subClass");
// 使用属性
console.log(sub.name);
// 使用方法
sub.fn();
// 指向自身构造函数
Sub.prototype.constructor = Sub;
5、类及继承(ES6)
// 父类
class People {
// 构造器
constructor (name, age) {
this.name = name;
this.age = age;
}
// 实例方法
eat () {
console.log('吃吃吃');
}
// 类方法
static create () {
console.log('诞生');
}
}
// 子类
class Student extends People {
constructor (name, age) {
// super关键词
super(name, age)
}
}
四、定时器