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)
}
}
四、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自我整理</title>
<style>
ul{
margin:0;
padding: 0;
list-style: none;
}
li {
80px;
height: 35px;
background-color: pink;
border-radius: 5px;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//属性解决绑定变量污染
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
var index = this.index;
alert(index)
}
}
</script>
<script>
//初识JS面向对象
var obj = {};
obj.name = 'yxf'; //对象设置属性，以及属性值
obj.eat = function () { //给对象设置方法
console.log('吃吃吃');
alert('chichi')
}
console.log(obj.name);
obj.eat();
</script>
<script>
//构造函数
//特定的语法与规定：
// 1.采用首字母大写（驼峰体）
// 2.内部可以构建属性和方法，通过this关键词
function Person(name,age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name+'吃屎包子');
}
}
// 关键词，创建对象并实例化
var p1 = new Person('sql','18');
var p2 = new Person('lay','63');
console.log(p1.name,p1.age);
p2.eat();
// 总结
// 1.构造函数可以创建多个对象，{}构建出的对象是唯一的
// 2.属性与变量的语法规则不一样
</script>
<script>
// js获取页面元素，操作页面元素内容与样式
// 数据，面向对象思想让做操数据更加边界与容易
// js中没有字典（键值对存储数据的方式，但可以通过对象实现字典方式存储数据并使用数据）
var dict = {
key1 : 'one',
key2 : 'two',
'key-3' : '你真棒！'
}
console.log(dict['key-3']);
// 总结：
// 1.key全为字符串形式，但存在两种书写方式
// 2.key在js语法支持情况下，可以省略引号，但key为js标识符不支持的语法情况下，添加引号
// 3. value可以为任意类型
// 4.访问值可以通过字典名（对象名）.key语法与['key']来访问value
// 5.可以随意添加key与value完成增删改查
</script>
<script>
// 重点
// 面向对象的三大特性：继承 封装 多态
// js重点：继承
// 1. 完成继承，必须拥有两个构造函数
// 2. 一个函数要使用另外一个函数的属性与方法，需要对其进行继承（属性与方法的复用）
// 3. 属性的继承通过call方法,在继承函数中由被继承函数调用，传入继承函数的this与被继承函数创建属性对属性进行赋值的所有需要的数据，eg:如Sup有name属性，那么可以通过call将Sub的name传给Sup.
// 4.方法的继承prototype原型
// 类似于父级
function Sup(name) {
this.name = name;
this.func = function () {
console.log('继承的方法');
}
}
// 类似于子级，Sub继承于Sup
function Sub(name) {
Sup.call(this,name);
}
Sub.prototype = new Sup;
var sub_obj = new Sub('sub-name');
console.log(sub_obj.name);
sub_obj.func();
</script>
<script>
// ES6
// 类产生多对象
class People{
constructor(name){
this.name = name;
}
eat () {
console.log('ES6.吃吃吃');
}
static create () {
console.log('类方法');
}
}
var p1 = new People('p1-name');
var p2 = new People('p2-name');
p1.eat();
People.create();
//继承
class Stdent extends People{
constructor(name,age,sex){
super(name);
this.sex = sex;
this.age = age;
}
}
let s1 = new Stdent('王五',19,'male');
console.log(s1.name,s1.age,s1.sex);
s1.eat();
Stdent.create();
</script>
</html>