函数

125 阅读3分钟

函数声明

  1. 标准声明函数
function f() {
    
}
  1. 匿名函数
let hd = function() {}
  1. 箭头函数
()=>{}
item=>{}
(item,index)=>{}

不同函数之间的区别

  1. 标准声明函数VS匿名函数

    标准声明函数优先级会更高,解析器会优先提取函数到代码树顶端,所以标准声明函数的位置不做限定而匿名函数必须先声明后调用

    f()
    function f() {} //这是可以的
    
    user()
    let user = function() {}; //这是会报错的
    
  2. 标准声明函数,匿名函数VS箭头函数 this的指向不一致,可以理解为箭头函数中的this会继承定义函数时的上下文,可以理解为和外层函数指向同一个this

函数参数

形参和实参

  1. 定义

    • 形参:函数声明时设置的参数
    • 实参:调用函数时传递的参数
  2. 形参和实参之间关系

    • 值类型的参数 将实参的值赋值给形参,两者之间只有值一致,实际在内存中是放在不同的内存位置当中的。
    • 引用类型的参数 实参保存地址,传递给形参的也是地址,两者之间的指向的是同一块内存,所以修改通过地址引用地址存放的数据的变化
  3. 其它细节

    • 默认参数
    function filterFun(item,type="asc")
    {
        ...
    }
    filterFun(1); // 没有第二个实参,使用默认参数
    filterFun(1,"dasc"); // 有第二个参数,覆盖实参
    
    • 参数集合

    arguments不建议使用,使用展示语法

    function sum(...args) {
        ...
    }
    sum(1,2,3); // 会被收集成为一个名为args的数组
    
    • 回调函数:以函数作为参数,作为参数的函数就称为回调函数
    let hd = ([1,2,3]).map(item=>item+10);
    // map是一个方法(函数),而其中作为参数的箭头函数就是回调函数
    

函数中的this

  • 调用函数时 this 会隐式传递给函数,指向函数调用时的关联对象,也称为函数的上下文。

几种调用方式

  1. 函数调用

    全局环境下,严格模式use strictthis指向null,非严格模式this指向window对象

  2. 方法调用

    • 函数为对象的方法时this指向该对象
    • 构造函数
    function User() {
        this.name = "li";
        this.say = function() {
            console.log(this); // User {name: "后盾人", say: f}
            return this.name;
        };
    }
    let hd = new User();
    console.log(hd.say);
    
    • 对象字面量
    let obj = {
        site: "li",
        show() {
            console.log(this); // obj
            function hd() {
                console.log(this); // window
            }
            hd();
        }
    };
    obj.show();
    

改变this的指向

  • 改变this指针可以简单理解为对象借用方法
  • 原理分析 构造函数中this默认是一个空对象,然后构造函数处理后时这个空对象变得有值
    function User(age) {
        this.age = age;
    }
    let p = new User(12);
    
    改变构造函数中的空对象,然this指向另一个对象。
    function User(age) {
        this.age = age;
    }
    let person = {
        sayAge: function() {
            console.log(`我今年${this.age}岁`);
        }
    }
    User.call(person,12);
    person.sayAge();
    
  • apply/call callapply用于显示的设置函数的上下文,两个犯法作用都是将对象绑定到this,只是在参数的传递上有所不同。apply数组传参,call分别传参。
  • bind是将函数绑定到某个对象,例如a.bind(obj)就是将a函数绑定到obj对象上
    • call/apply 不同bind不会立即执行
    • bind 是复制函数形为会返回新函数