前端之js函数-45-CSDN博客

一、函数高级

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

setInterval(持续性定时器)

setInterval(函数, 毫秒数, 函数所需参数(可以省略));
var timer = setInterval(function() {console.log("呵呵");}, 1000)

setTimeout(一次性定时器)

setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
setTimeout(function (data) {console.log(data);}, 1000, "数据");

清除定时器

    clearTimerout()|clearInterval()
    
 // 清除定时器
 document.onclick = function(){
  clearInterval(timer);
 }
 //timer表示的计时器的名字
 //清除所有定时器
 var timeout = setTimeout(function(){},1);
 for (var i = 0; i < timeout; i++) {
  clearTimeout(i);
 }