美文网首页
JS函数整理

JS函数整理

作者: Mica_马超 | 来源:发表于2021-09-03 08:54 被阅读0次

函数声明

 // 普通函数表达式
  var aaa = function () {};

  // 箭头函数表达式
  const func = () => {};

  // 命名函数表达式
  var bbb = function f() {};
  
  // 函数声明
  function ccc() {}
  • 函数声明可以提前被解析出来,而表达式不可以。

解析器会先读取函数声明,并使其在执行任何代码之前可以访问,在任何地方调用都不会有问题;
而函数表达式则必须等到解析器执行到它所在的代码行才会真正被执行,提前调用会报错

        aaa(); //会报错--aaa is not a function
        ccc(); //可以调用
 
        var aaa = function(){};
        function ccc(){}
  • 函数表达式可以直接后面加括号执行,而函数声明是不可以。
        var aaa = function () {
        }();//可以直接执行
 
        function ccc() {
        }()//会报错

当同时使用这两种方式声明同一个函数名,最终执行的是函数表达式声明的函数

        // 函数表达式
        var f = function () {
            console.log(1);
        }
        // 直接声明
        function f() {
            console.log(2);
        }
        f();//控制台打印1

自执行函数

自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行。

        //可用来传参
        (function (x, y) {
            console.log(x + y);
        })(2, 3);
 
        //带返回值
        var sum = (function (x, y) {
            return x + y;
        })(2, 3);
        console.log(sum);
 
        ~function () {
            var name = '~';
            console.log(name);
        }();
 
        !function () {
            var name = '!';
            console.log(name);
        }();
 
        ;(function () {
            var name = ';';
            console.log(name);
        })();
 
        -function () {
            var name = '-';
            console.log(name);
        }();
 
        //逗号运算符
        1, function () {
            var name = ',';
            console.log(name);
        }();
 
        //异或
        1 ^ function () {
            var name = '^';
            console.log(name);
        }();
 
        //比较运算符
        1 > function () {
            var name = '>';
            console.log(name);
        }();
 
        ~+-!(function () {
            var name = '~+-!';
            console.log(name);
        })();
 
        ~!(function () {
            var name = '~!';
            console.log(name);
        })();
 
        (function () {
            var name = 'call';
            console.log(name);
        }).call();
 
        (function () {
            var name = 'apply';
            console.log(name);
        }).apply();

函数构造法,参数必须加引号

var sum3 = new Function('n1', 'n2', 'return n1+n2');
console.log(sum3(2, 3));//5

从技术角度讲,这是一个函数表达式。一般不推荐用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。

       var name = 'hello';
       function fun() {
           var name = 'world';
           return new Function('return name');//不能获取局部变量
       }
       console.log(fun()());//控制台打印hello

Function()构造函数每次执行时都会解析函数主体,并创建一个新的函数对象,所以当在一个循环或频繁执行的函数中调用Function()构造函数效率是非常低的。而函数字面量却不是每次遇到都会重新编译的,用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。

this(执行上下文)指向

1.普通函数中的this

  • 在简单调用中,非严格模式下,指向window。严格模式下,为undefined。
function parent() {
    console.log(this);    
}
parent(); // window   

'use strict';
function parent() {
   console.log(this);
 
}
 parent(1,2); // undefined
  • 作为某个对象方法调用时,this指向该对象。
  • 当该普通函数被间接调用时,即:使用call()apply()方法调用时,this指向call()apply()第一个参数。注意:在非严格模式下, 当第一个参数为null或者undefined时,调用函数中的this指向window哦~~~
function parent() {
   console.log(this);
}

 const obj = {
     name: 'ha'
}
        
 parent.call(obj); // this指向obj对象 
  • 该普通函数被用作构造函数用new关键字构造对象实例时,this指向新建的实例。

2.箭头函数中的this

  • 没有自己的this,内部this的值,依赖于外部非箭头函数的this。
function regular() {
  console.log(this);
  const arrowFun = () => {
    console.log(this); // obj
  }
  arrowFun();
}

const obj = {
  name: 'ha'
}
regular.call(obj);

构造函数

普通函数

  • 普通函数可以作为构造函数来用,用new去新建对象实例。
  • 普通函数内部,arguments为特殊的类数组对象。包含了函数被调用时的参数列表。
  • 用return去返回一个函数的结果。无return语句,或者return后面无表达式,则返回undefined
  • 由于普通函数的this,由执行时候确定。那么当做为定时器函数或者事件监听器的回调去执行时,就有this指向的问题了。这时候,你或许需要用bind()方法去绑定this值。

https://blog.csdn.net/qq_40713392/article/details/106319971
http://www.itcast.cn/news/20200908/17231826697.shtml

https://blog.csdn.net/weixin_30655569/article/details/101788084

相关文章

  • JS函数整理

    函数声明 函数声明可以提前被解析出来,而表达式不可以。 解析器会先读取函数声明,并使其在执行任何代码之前可以访问,...

  • JS笔记整理 - 函数

    本文是以前的学习笔记,已文档形式放在电脑中不方便随地查看,因此整理出来方便阅读 # 函数的类型   函数是对象,函...

  • 2021-04-15

    Js构造函数、原型、原型链整理 1,普通函数、构造函数区别: 1,名字: 构造函数首字母建议大写,普通函数首字母建...

  • JavaScript 05 函数

    js函数的概念和作用,js函数的定义,js函数的调用,js事件驱动的概念,js函数的实参和形参,js的作用域,js...

  • js 深入

    * js语法* js的动态函数和匿名函数* js动态函数Functionnew Function();* 匿名函数...

  • JS日记整理 - 正则函数RegExp()

    本文是以前的学习笔记,已文档形式放在电脑中不方便随地查看,因此整理出来方便随时阅读   开发过程中,强烈建议多使用...

  • 【Javascript】js实用方法函数整理

    No.1 取URL上的参数 No.2 动态插入 script to html No.3 判断平台 No.4 判断是...

  • 2018-12-01

    js中括号操作属性 js函数 js换肤 变量和函数预解析 匿名函数 函数传参 函数return关键字 流程控制语句...

  • jQuery入口函数的作用以及jQuery入口函数和js入口函数

    jQuery的入口函数 js和JQuery入口函数的区别 JS入口函数和JQuery入口函数

  • JS基础整理(1)—函数和闭包

    这段空闲时间,打算整理一些JS非常基础,但是又常常搞不清记不住的知识点。 第一篇,先整理一下JS的函数,特别是闭包...

网友评论

      本文标题:JS函数整理

      本文链接:https://www.haomeiwen.com/subject/ikmxwltx.html