当前位置: 首页 > Web前端 > HTML

深入理解JavaScript——Function

时间:2023-03-27 23:22:24 HTML

在JavaScript中的始皇一文中,作者有一个观点:Object.prototype才是真正的始皇,任何原型都是从它派生出来的;而Function.prototype是仅次于Object.prototype的存在,它是内置构造函数的创建者,任何构造函数都是从它衍生出来的,所以Function的原型具有一定的重要性,Function(构造函数)和Function.在功能层面,它已经比Array、String、Number等重要,虽然不如Object重要,但仅次于它的存在。不仅如此,函数还可以做很多事情。首先,它是一个对象,我们在Everythingisanobject中已经解释过,所以它具有像对象一样的属性,也可以赋值给变量。另外,函数本身可以作为参数传递,它还具有返回值的特性。,有返回值)在讲解函数的特点之前,先了解一下它的属性和方法。示例中显示了属性和方法。函数func(){}控制台。,打印它。虽然我们没有对它进行任何赋值操作,但是它有自己的各种属性。显然,Function没有静态方法,它只有实例属性和实例方法,这两者都是继承自Function.prototype。我们看到函数func上有参数、调用者、长度和名称。这些都是继承自Function.prototype。您可以在func.__proto__中找到相同的属性。秘诀在于Function.__proto__===Function.prototype详见JavaScript中先帝了解实例属性Function.prototype.arguments:对应传递给函数的参数数组Function.prototype.constructor:指向构造函数Function.prototype.length:参数个数实例方法Function.prototype.apply(thisArg[,argsArray]):调用一个函数,将其this值设置为提供的参数,第二个参数传递给Function.prototype.call(thisArg[,arg1,arg2,...argN])作为数组对象:调用函数并将其this值设置为提供的参数,可选择传递新参数Function.prototype.bind(thisArg[,arg1[,arg2[,...argN]]):创建一个新函数,调用时,该函数会将this设置为提供的thisArg。调用新绑定的函数时,会预先将可选参数序列([,arg1[,arg2[,...argN]]])添加到参数序列中Function.prototype.toString():返回表示函数源代码字符串。覆盖Object.prototype.toString方法。更多信息可以查看MDN了解Function的实例属性和方法。让我们看看如何创建一个函数。创建函数有四种方式:函数构造函数、函数声明、函数表达式、箭头函数//函数构造函数:最后一个参数是函数逻辑,前面的参数都是参数,'y','returnx+y');//函数声明functionadd2(x,y){returnx+y;}//函数表达式varadd3=function(x,y){returnx+y;};//箭头函数varadd4=(x,y)=>x+yhere需要注意的是,在平时的开发中,基本不会用到函数构造函数。函数声明、函数表达式、箭头函数在开发中用的最多,那么这三者有什么区别呢?首先比较函数声明和函数表达式。函数声明会导致函数提升(且优先级高于变量提升)。然后比较箭头函数和没有this的普通函数。函数体中的this需要在外部词法环境中查找。没有参数,它不能用作构造函数。也就是说箭头函数不能使用new命令,否则会报错,没有super就不能使用yield命令,所以箭头函数不能作为Generator函数使用。返回对象时,必须在对象外加上括号。这就是函数的创建方式。如何调用函数?在不同的场景下,调用函数是不同的。以下是将函数作为函数作为方法作为构造函数调用的方法使用call/apply/bind自调用函数//作为函数varfunc1=function(){return'foo';};console.log(func1);//foo//作为方法,即对象中的函数被称为方法varobj1={func2:function(){return'bar';},};控制台.log(obj1.func2());//bar//作为构造函数Person(){this.name='johnny'this.age=28;this.gender='女';this.getName=function(){返回this.name;};}varcody=newCody();//调用构造函数console.log(cody);//使用调用/应用调用varobj2={sayHello:function(){console.log(this.name,arguments[0],arguments[1]);},};varjohan={name:'johan'};varelaine={name:'elaine'};//在johan对象上调用sayHelloobj2.sayHello.call(johan,'foo','bar');//johan,foo,barobj2.sayHello.apply(elaine,['foo','bar']);//elaine,foo,bar//self-invocation(function(){console.log('自调用函数');})();不管是创建函数还是调用函数,有什么用,能证明函数是一等公民吗?为什么函数是一等公民接下来,我们来解释一下为什么函数是一等公民?首先,函数是对象,这意味着函数可以存储在变量、数组或对象中。第二,因为是对象,所以也具有对象的特性,即具有属性。除了对象的特性外,作为一个函数本身,它可以作为参数传递,也可以作为返回值返回。通过这种方式,这些因素使函数成为JavaScript中的“一等公民”//将变量、数组和对象存储为变量varfuncA=function(){}//作为变量varfuncB=[function(){}]//作为数组变量varfuncC={method:function(){}}//作为对象方法//函数也是对象,这意味着它们可以有属性varfuncD=function(){}funcD.name='funcD'//赋值名称console.log(funcD.name)//funcD//作为参数varfuncE=function(func){func()}funcE(function(){console.log('作为参数传递的函数')})//作为函数返回值varfuncF=function(x,y){returnx+y//函数特性,返回值}console.log(funF(1,2))//3PS:so-称为一等公民,即一等函数,也称为一等函数,维基百科上是这样介绍的:函数可以作为其他函数的参数,函数的返回值,赋值给变量或存储在数据中结构。MDN也引入了函数传递参数和返回值的特性,使其成为函数式编程的基础。因为函数不仅具有对象的能力,而且具有传递参数和返回值的独特特性,使其成为一等公民。不仅如此,函数还具有其他特性的其他特性。函数作用域:JavaScript中的作用域分为全局作用域、函数作用域和块级作用域。块级作用域是ES6之后出现的变量提升的解决方案。可变覆盖、可变污染等设计缺陷造成的特征。在此之前只有全局作用域和函数作用域,世界上只有一个作用域可以理解。函数作用域是理解JavaScript的一个重要知识点——闭包的基础。关于scope的知识点,可以看这篇文章-scopethis:whatisthis,在写原型和构造函数的时候,我们在构造函数的时候,会用到This,而在用new实例化的时候,new关键字会指向this在构造函数中传递给新对象并执行构造函数中的代码,那么这和什么有关呢?它和作用域有点相似,但又不完全相同。它绑定到执行上下文。我们先讲一下this关键字,然后基本推导出三个将领:call、apply、bind。回过头来看执行上下文,但在讲之前,先理清词法环境,再讲执行上下文的作用域和执行栈,就会推导出一个作用域链。说到this关键字会引出执行上下文,两者结合会解释闭包,这是JavaScript中的一个难点。如果说原型是“少女杀手”,那么闭包就是“老师杀手”。AMD/CMD和ES中的模块化是为了让代码独立,不受其他文件的影响。简而言之,函数有很多特点。由于这些特性,函数可以成为JavaScript中的“字符”。小结我们从函数的属性和方法入手,介绍Function内置的属性和方法,方便开发者调用。然后介绍如何创建函数,介绍了四种方法,创建函数时调用函数,分为五种情况。最后,我们介绍了为什么函数是一等公民。成为一等公民,首先是因为它是客体,具有客体的“能力”。其次,它具有一些使其独一无二的特性,例如可以作为参数传递并具有返回值。这两个都是函数式编程你以为函数有那么简单吗?那你就低估了函数的特性和函数作用域。与全局作用域和块级作用域相比,函数作用域的实际使用率高达90%;而this,Function的原型方法中的call/apply/bind是为了修改this而存在的,说明修改this的点是高频操作。对此的解释将导致执行上下文。结合作用域中的作用域链,可以解释闭包行为。闭包还可以派生词法环境、执行上下文和调用堆栈,以及闭包的应用程序稳定性、节流和柯里化。垃圾回收机制等。总之,函数在JavaScript中的地位是一个非常高的参考。如何理解JavaScript中“函数是一等公民”这句话?深入理解JavaScript系列文章-深入理解JavaScript的开始-JavaScript是什么深入理解JavaScript——JavaScript由什么组成?深入理解JavaScript——万物皆对象深入理解JavaScript——Prototype深入理解JavaScript——继承深入理解JavaScript——JavaScript中的第一位皇帝深入理解JavaScript-Scope深入理解JavaScript——this关键字深入理解JavaScript——call、apply、bind三会深入理解JavaScript——立即执行函数(IIFE)深入理解JavaScript———词法环境深入理解JavaScript—执行上下文和调用栈深入理解JavaScript—ScopeVSExecutionContext深入理解JavaScript-Closure深入理解JavaScript-防抖与节流In-深入理解JavaScript——函数式编程深入理解JavaScript——垃圾回收机制In-深入理解JavaScript——数组深入理解JavaScript——循环来这里深入理解JavaScript——字符串