前端---ES5知识点小梳理二_es5回调函数-CSDN博客

本文链接：https://blog.csdn.net/m0_46677484/article/details/126770711

函数也是有变量声明提前的

函数内部属性

arguments 保存实际参数列表的类数组对象

this指向

改变this指向 call apply bind

IIFE 立即执行函数

作用域

作用域链

回调函数主函数的事先做完，回头再调用传进来的那个函数。

闭包

函数也是有变量声明提前的

foo(1)
function foo(a) {
  console.log('我是函数foo' + a);
}
foo(2);
//我是函数foo1
//我是函数foo2

函数内部属性

arguments 保存实际参数列表的类数组对象

arguments类数组
function foo(n) {
  // 当传递的实参个数超过形参的个数的时候 不会报错 所有的实参都会保存在arguments里 arguments类数组
  console.log(arguments);
}
foo(1,2,3,4)
// foo.length获取一个函数形参的长度
console.log(foo.length);

//[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }        
//3
//1

this指向

           1.在函数中this指向全局对象 node中指global 浏览器中指 window
           2.在对象中 this指向拥有该方法得调用者
           3.在当前模块 this指向当前模块 {}
           4.事件：this指向接收事件得dom元素

在方法中，this 表示该方法所属的对象
var person = {
  name:'lili',
  sayName: function () {
    console.log(this.name);
  }
}
person.sayName()
//lili

单独使用this
全局作用域 this  modules.export  空对象
console.log(this);
//{}

局部作用域 this 指向的就是全局对象 global
function foo() {
  console.log(this);
}
foo();

在浏览器环境下 this单独使用指向的就是window对象

在浏览器环境下 this单独使用 指向的就是window对象
 console.log(this);
    function foo() {
      console.log(this);
    }
    foo()

改变this指向 call apply bind

// call apply bind
var person1 = {
  sayName: function (a) {
    console.log(this.name + a);
  }
}
var person2 = {
  name:'lili'
}
person1.sayName.call(person2, 123);
//lili123


person1.sayName.apply(person2, [123]);
//lili123


var b=person1.sayName
var c=b.bind(person2, 123);
console.log(c);
//[Function: bound sayName]
c();
//lili123

IIFE 立即执行函数

js的代码是自上而下执行 注意代码的执行顺序
// 终止循环的条件
for (var i = 0; i < 6; i++) {
  function output() {
    console.log(i); 
  }
}
output()
//6


// 使用立即执行函数 来进行 局部作用域  的处理
for (var i = 0; i < 6; i++) {
  // 立即执行函数
  (function (j) {
    console.log(j);
  })(i)
}
<!--
0
1
2
3
4
5  -->

作用域

1.函数内作用域得变量是局部变量
2.函数外的作用域得变量是全局变量

全局作用域定义的变量 函数作用域里是可以获取到的
var v1 = 10
v3 = 30
function foo() {
//   // 函数局部作用域 里面定义的变量 外界是获取不到的
  var v2 = 20
  console.log(v1, v2, v3);
}
foo();
//10 20 30
console.log(v2);
//v2 is not defined

var a = 10;
function foo() {
  //声明提前 var a
  console.log(a);//undefined
  var a = 100;
  console.log(a);//100
  function fn() {
  //声明提前 var a
    console.log(a);//undefined
    var a = 200;
    console.log(a);//200
  }
  fn()
}
foo();

 
//undefined
//100
//undefined
//200

作用域链

var a = 10
var b = 200
function fn() {
  var b = 20
  function bar() {
    console.log(a + b)
  }
  return bar
}
fn()
var x = fn()
x()  //x()相当于执行bar
//30

回调函数主函数的事先做完，回头再调用传进来的那个函数。

回调函数的作用：回调函数一般都用在耗时操作上面：因为主函数不用等待回调函数执行完，可以接着执行自己的代码。比如ajax请求，比如处理文件等

function A(B) {
  B()
  console.log('我是函数A');
}
function B() {
  // 模拟异步操作 -> 延时操作
  setTimeout(() => {
    console.log('我是函数B');
  }, 3000);
}
//定义主函数，回调函数作为参数
A(B)
<!-- 
我是函数A
我是函数B -->

闭包

1..函数嵌套函数

2.内部函数引用了外部函数中的数据（属性、函数）

3.参数和变量不会被回收

4待定的条件一个函数return了另外一个函数

function A() {
  var a = 123
  function B() {
    console.log(a);
  }
  return B
}
var x = A()
x()
//123

案例1：

function f1() {
  var n = 999;
  nAdd = function () { n += 1 }
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result()//相当于执行f2
nAdd()
result()
<!-- 
999
1000
 -->

案例2：

<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <script>
      var name = 'window-name'
      var obj = {
        name: 'obj-name',
        say: function () {
          return function () {
            console.log(this.name);
          }
        }
      }
      var x = obj.say()
      x()
      console.log(this); //window
      console.log(window===this);//true
    </script>
  </body>

  </html>