前端---ES5知识点小梳理二

客官°小女子只卖身不卖艺 2024-04-07 14:35 64阅读 0赞

##  ##

**目录**

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

函数内部属性

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();

![71b812558c01498ca119c198cd2ce2e0.png][]

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

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

![606c5286617c4041bd8147a6abc48315.png][]

## 改变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)
    }

## 作用域 ##

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请求，比如处理文件等

## 闭包 ##

1..函数嵌套函数

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

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

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

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

案例1：

案例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>

![ea6efbe3b9f64ca1b9a14c7918e38c95.png][]

[71b812558c01498ca119c198cd2ce2e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a43d07e4f8154b7e87e244d697268498.png
[606c5286617c4041bd8147a6abc48315.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4c85173e22ed43afb849dd4909ea28ad.png
[ea6efbe3b9f64ca1b9a14c7918e38c95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/42580fa27c8549d1b3bd1ec81ff87598.png