0
点赞
收藏
分享

微信扫一扫

JS中的函数

JS函数

函数其实也是一种对象

1.定义一个函数

具名函数

有具体名字的函数

function 函数名(形参1,形参2 ...){
    语句...
    return 返回值
}
// 特殊情况
let a = function fn(x,y){return x + y;}
fn(1,3); // fn is not defined 报错
// 具名函数生命在'='的右边时,作用域仅在'='右边,别的地方使用只能用 a 变量 a(1,3)
匿名函数
function(形参1,形参2 ...){  // 就是具名函数去掉函数名
    语句...
    return 返回值
}
  •   let a = fuction(x,y){return x + y;} // 也叫函数表达式
    
箭头函数
let f1 = x => x * x;
let f2 = (x,y) => x + y;  // 多个参数()不能省略
let f3 = (x,y) => {return x + y};  //  写了return 不能省略{}
let f4 = (x,y) => ({name:x,age:y}); // 直接返回对象会出错,需要加个圆括号
使用构造函数创建一个函数
let f = new Function('x','y','return x + y'); 
// 基本没人用,但是能让你知道函数是由谁构造出来的,说有函数都是Function构造出来的,包括Object,Array,Function也是

2.函数的要素

每个函数都有的东西
  • 调用时机
  • 作用域
  • 闭包
  • 形式参数
  • 返回值
  • 调用栈
  • 函数提升
  • arguments(除了箭头函数)
  • this (除了箭头函数)

调用时机

JS在执行代函数的时候,由于变量的值会改变,所以在不用的时间,不同位置执行函数结果可能会不一样

作用域

每个函数都会创建一个作用域

function fn(){
    let a = 1;
}
console.log(a);   // a  不存在

全局变量与局部变量

function fn(){
    let  a = 1;   // 在函数中或者在{}中声明的变量就是局部变量
}
<script>
    let a = 1;   // 在顶级作用域声明的变量是全局变量
    function fn(){
        window.c = 1; // 挂在window对象上的属性也是全局变量
    }
</script>    

函数作用域的嵌套

function f1(){
    let a = 1;
    
    function f2(){
        let a = 2;
        consoloe.log(a);
    }
    console.log(a);
    a = 3;
    f2();
}
f1();   //   2   1  
作用域规则

如果多个作用域有同名变量a

  • 那么查找a的声明时,就向上取最近的作用域
  • 简称「就近原则」
  • 查找a的过程与函数执行无关
  • 但a的值与函数执行有关

闭包

function f1(){
    let a = 1;
    function f2(){
        let a = 2;
        function f3(){
            console.log(a);   // 这里的a用到了外部作用域的变量,形成闭包
        }
        a = 22;
        f3();
    }
    console.log(a);
    a = 100;
    f2()
}
f1();

如果一个函数用到了外部的变量,那么这个函数加这个变量就叫做闭包

形式参数

形式参数的意思就是非实际参数

function add(x,y){
    return x + y;
}
// 其中x和y就是形参,因为并不是实际的参数
add(1,2);
// 调用add时,1和2 是实际参数 ,会被赋给x和y

形参可认为是变量声明

上面的代码相当于下面的代码

function add(){
    var x = arguments[0];
    var y = arguments[1];
    return x + y;
}

返回值

每个函数都有返回值

function hi(){
    consloe.log('hi');  //不写return   返回值  为  undefined
}
function hi(){
   return consloe.log('hi');  //返回值为console.log('hi')的返回值undefined
}

函数执行完成以后才会返回,只有函数有返回值

调用栈

什么是调用栈呢?

JS引擎在调用一个函数前,需要把函数所在的环境push到一个数组里,这个数组叫做调用栈,等函数执行完了,就会把环境弹(pop)出来,然后return到之前的环境,继续执行后续代码

递归函数的使用

求n的阶乘

function f(n){
    return n !== 1 ? n * f(n -1) : 1;
}

f(4);
// 相当于
= 4 * f(3)
= 4 * (3 * f(2))
= 4 * (3 * 2 * f(1))
= 4 * (3 * (2))
= 4 * (6)
= 24
递归函数的调用栈
  • Chrome 11000 - 12000 之间
  • Firefox 26773
  • Node 12536

爆栈:调用栈中压入的栈过多,程序就会崩溃

函数提升

不管你把具名函数声明在哪里,它都会跑到第一行

let a = function(){   // 函数表达式不会被函数提升
    console.log('hi');
}

this关键字

  1.  function fn(){
         console.log(this);  //  这里this是window对象
     }
    
  2.  function fn(){
         console.log(this);
     }
     fn.call(1); //  通过call方法可以改变this的值为所传参数,如果参数不是对象,会自动被封装成对象,undefined会变成window对象,可以使用'use strict'严格模式来阻止这种行为
     fn.call(1,2,3);//   此时1为this,2,3为arguments
    
###### this原理解析

```js
let person = {
    name:'ouyang',
    sayHi('这里有隐藏的this'){
        console.log('你好,我叫' + this.name)
    }
}

//  person.sayHi()
//  相当于 person.sayHi(person)
//  然后person被传给了 this 了 (person是个地址)
//  这样,每个函数都能用this获取一个未知对象的引用了

3.JS函数的call调用方式

call

let person = {
    name:'frank',
    sayHi(){
        consoloe.log(this.name);
    }
}
person.sayHi(); //  'frank'  实际上这种调用方式相当于下面这种call方式,只不过是JS隐藏了对象的传参
person.sayHi.call(person); // 'frank'  call()里面的第一个参数就是将来执行函数里面的this对象

函数有参数的情况下

function add(x,y){
    return x + y;
}
add.call(undefined,1,2); // 3
// 因为第一个参数是表示函数中的this关键字,函数没有用到this,但是有别的参数,第一个位置需要用一个无用值(不一定非得是undefined)来占位,这样就能正常传参数了
this的两种使用方法

隐式传递

fn(1,2);   // 等价于fn.call(undefined,1,2)
obj.child.fn(1); // 相当于obj.child.fn.call(obj.child,1)

显式传递

fn.call(undefined,1,2);
fn.apply(undefined,[1,2]); // apply跟call用法就是参数的形式不同,apply参数是数组
使用bind绑定this
function f1(p1,p2){
    console.log(this,p1,p2);
}
let f2 = f1.bind({name:'frank'}); // f2 就是 f1 绑定了 this 之后的函数

箭头函数

箭头函数没有this和arguments

let fn = () => console.log(this);  //  在全局定义箭头函数表达式
fn().call(2);  // window 
// 结论:箭头函数中的this不受控制,在定义箭头函数的时候就决定了this是在次箭头函数所定义的位置或作用域的this值

立即执行函数

! function (){
    var a = 1;
}();  //  最初多是为了创建一个局部变量而产生的的,函数不用显式的调用便会立即执行  前面的符号可以是 + - ~ !等操作符,推荐使用 !

// 方式二
(function (){
    var a = 1;
}('这里可以放参数'));

(function (){
    var a = 1;
})('这里可以放参数');

举报

相关推荐

0 条评论