Tareas asincrónicas:
1. Función de devolución de llamada
2. Temporizador
3. Función de devolución de llamada Ajax
1. Funciones de orden superior
- Las funciones de orden superior son funciones que operan en otras funciones y reciben funciones como parámetros o parámetros de salida como valores de retorno.
- La función también es un tipo de datos y también se puede pasar a otro parámetro como parámetro, como una función de devolución de llamada.
function fn(callback) {
callback && callback();
}
fn(function () {
alert("hi");
})
function fn() {
return function () {
}
}
fn();
Por ejemplo: jQuery llama a la función de devolución de llamada, ejecuta los parámetros anteriores y finalmente llama a la función de devolución de llamada.
$("div").animate({
left: 200 }, function () {
$("div").css("backgroundColor", "purple");
})
Dos, cierre
Alcance variable:
1. Alcance local: El alcance local no se puede utilizar fuera de la función.
2. Alcance global
3. Cuando se ejecuta la función, el alcance local se destruirá.
El llamado cierre se refiere a una función que tiene acceso a una variable en el ámbito de otra función.
Rol: extender el alcance de la variable (extender el ciclo de vida).
El ejemplo más simple:
function fn(){
var num = 0;
function func(){
console.log(num);
}
func();
}
fn(); // 0 子类访问到父类的变量
Se accede a la variable num en fn, por lo que se puede decir que fn es una función de cierre. También se puede decir que los cierres son un fenómeno.
function fn() {
var num = 0;
return function () {
console.log(num);
};
}
var f = fn();
f(); // 用return返回出去，使外部能访问内部变量。
El cierre se da cuenta de bucle pequeño 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);
}
Cálculo de cierre del precio del taxi
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
Pregunta de pensamiento 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
Tres, recursividad
- Una función puede llamarse a sí misma internamente.
- Dado que la recursividad es propensa a errores de desbordamiento de pila, se debe agregar la condición de salida return.
var num = 1;
function fn() {
console.log("我要打印6句话");
if (num == 6) {
return;
}
num++;
fn();
}
fn();
secuencia Fibonacci
// 斐波那契数列（兔子序列） 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
Atravesar datos complejos de forma recursiva
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)); //
