JavaScript函数
程序员文章站
2022-07-02 14:18:32
JS高级 一、函数高级 1、函数回调 2、闭包 二、循环绑定 js .js文件 var lis = document.querySelector('li'); for (var i = 0; i ......
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) } }
四、定时器
- setinterval
- settimeout