Asynchronous tasks:
1. Callback function
2. Timer
3. Ajax callback function
1. Higher-order functions
- Higher-order functions are functions that operate on other functions. They receive functions as parameters or output parameters as return values.
- Function is also a data type, and can also be passed to another parameter as a parameter, such as a callback function.
function fn(callback) {
callback && callback();
}
fn(function () {
alert("hi");
})
function fn() {
return function () {
}
}
fn();
For example: jQuery calls the callback function, executes the previous parameters, and finally calls the callback function.
$("div").animate({
left: 200 }, function () {
$("div").css("backgroundColor", "purple");
})
Two, closure
Variable scope:
1. Local scope: Local scope cannot be used outside the function.
2. Global scope
3. When the function is executed, the local scope will be destroyed.
The so-called closure refers to a function that has access to a variable in the scope of another function.
Role: Extend the scope of the variable (extend the life cycle).
The simplest example:
function fn(){
var num = 0;
function func(){
console.log(num);
}
func();
}
fn(); // 0 子类访问到父类的变量
The num variable in fn is accessed, so it can be said that fn is a closure function. It can also be said that closures are a phenomenon.
function fn() {
var num = 0;
return function () {
console.log(num);
};
}
var f = fn();
f(); // 用return返回出去，使外部能访问内部变量。
Closure realizes loop small li
var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++){
//一般做法将每次循环的索引号赋值给i 比闭包简单
lis[i].index = i;
lis[i].onclick = function(){
console.log(this.index);
}
}
// 2.利用闭包得到当前小li的索引号
for(var i =0;i<lis.length;i++){
//利用for循环创建了4个立即执行函数
//立即执行函数也称为小闭包，因为立即执行函数里所有函数都可以访问到i变量
(function(i){
lis[i].onclick = function(){
console.log(i);
}
})(i);
}
Closure calculation of taxi price
var car = (function () {
var start = 13; //起步价
var total = 0; //总价
return {
price: function (n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5
} return total;
},
delay: function (flag) {
return flag ? total + 10 : total;
}
}
})()
console.log(car.price(5)); //23
console.log(car.delay(true)); //33
console.log(car.price(3));//13
console.log(car.delay(false));//13
Thinking Question 1
var name = "Hello Window";
var object = {
name:"MyObject",
getNameFunc:function(){
return function(){
return this.name;
}
}
}
console.log(object.getNameFunc()()); // Hello Window
//匿名函数this指向window window下又有个name属性 = Hello Window
// 拆解如下：
var f = object.getNameFunc();
= function(){
return this.name;
}
// 不是闭包，没有局部变量使用
var name = "Hello Window";
var object = {
name: "MyObject",
getNameFunc: function () {
var that = this;
return function () {
return that.name;
}
}
}
console.log(object.getNameFunc()()); // MyObject
Three, recursion
- A function can call itself internally.
- Since recursion is prone to stack overflow errors, the exit condition return must be added.
var num = 1;
function fn() {
console.log("我要打印6句话");
if (num == 6) {
return;
}
num++;
fn();
}
fn();
Fibonacci sequence
// 斐波那契数列（兔子序列） 1 1 2 3 5 8 13 21 前两项后第三项的和
function fn(n) {
if (n === 1 || n === 2) {
return 1;
}else{
return fn(n-1) + fn(n-2);
}
}
console.log(fn(8)); // 21： 表示第8个数是21
Recursively traverse complex data
var data = [{
id: 1,
name: "小米",
goods: [{
id: 11,
gname: "小明"
}, {
id: 12,
gname: "小兰"
}]
}, {
id: 2,
name: "小新"
}];
//利用递归遍历到每一次id 根据用户输入id号匹配输出
function getId(json, id) {
json.forEach(function (item) {
if (item.id == id) {
console.log(item);
} else if (item.goods && item.goods.length > 0) {
getId(item.goods, id);
}
});
}
(getId(data, 11)); //
