热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JS拾荒の函数

函数的形参与实参arguments是一个类数组转真数组两种获取参数长度的方式形参和arguments都指向实际的参数函数、剩余运算符与解构运算函数与剩余函数与解构Function用
  • 函数的形参与实参
    • arguments是一个类数组
      • 转真·数组
    • 两种获取参数长度的方式
    • 形参和arguments都指向实际的参数
  • 函数、剩余运算符与解构运算
    • 函数与剩余
    • 函数与解构
  • Function
    • 用字符串创建一个函数
    • 所有函数们的粑粑
  • 箭头函数
    • 箭头函数木有arguments
    • 箭头函数木有this

函数的形参与实参

arguments是一个类数组

类数组的意味着什么呢?

这意味着他们都有长度,都能够被遍历,它们是长成如下样子的对象而不是数组

{'0':'a','1':'b',length:2,ƒ ifn(a,b,c),Symbol(Symbol.iterator):ƒ values(),__proto__:Object
}

但,毕竟只是相似,具有一些数组的特征,不是真正的数组,So他们不在Array的原型链上,不具有Array原型上的方法,也就是说所有数组独有的方法这些类数组都不能够使用。

转真·数组

  • Array.prototype.slice.call(arguments);
  • Array.from(arguments)

两种获取参数长度的方式

fn.lengtharguments.length都能获得一个函数的参数的长度,

但!fn.length拿到的是形参的长度,而arguments.length拿到的是所传实参的长度,这两个值不总是相等的,因为实际传入的参数的个数可以大于或小于形参的个数。

function ifn(a,b,c){console.log(arguments.length);console.log(ifn.length);
}
ifn();<<<
0
3

形参和arguments都指向实际的参数

下例中&#xff0c;实际传入的第一个参数的值将会被修改&#xff0c;并且在arguments中得到显示

function ifn(a,b,c){console.log(arguments[0]);a &#61; &#39;x&#39;; //实际传入的第一个参数的值将会被修改&#xff0c;并且在arguments中得到显示console.log(arguments)&#xff1b;
}
ifn(1,2,3)<<<
1
{ &#39;0&#39;: &#39;x&#39;, &#39;1&#39;: 2, &#39;2&#39;: 3 }

函数、剩余运算符与解构运算

函数与剩余

注意&#xff0c;若使用剩余运算符必须在形参的末尾处使用

function sum(zero,...args){return currency&#43;eval(args.join(&#39;&#43;&#39;));
}
sum (0,1,2,3,4,5,6)

函数与解构

对象作为实参可在形参处被解构

function ajax({url&#61;new Error(&#39;url不能为空&#39;),method&#61;&#39;get&#39;}){...
}
ajax({url:&#39;/test&#39;,method:&#39;get&#39;});

但并不支持解构数组

let fn1 &#61; function(...args){console.log(args)
};fn1([1,2,3])<<<
[ [ 1, 2, 3 ] ]
//--- --- ---
let fn1 &#61; function(a,b,c){console.log(a)
};fn1([1,2,3])<<<
[1,2,3]

Function

用字符串创建一个函数

此种创建函数的方式常常和模板拼接一起配套使用&#xff0c;让我们能够更自由的创建函数

let strFnBody &#61; &#96;if(arg1)console.log(&#39;参数存在&#39;)&#96;;
let fn &#61; Function(&#39;arg1&#39;,&#39;arg2&#39;,...,strFnBody);
fn(); //执行函数

所有函数们的粑粑

所有函数都是Function函数的实例

let fn1 &#61; function(){};
console.log(fn1.__proto__ &#61;&#61;&#61; Function.prototype)
<<<
true

箭头函数

箭头函数木有arguments

替代方案是利用剩余运算符&#xff0c;嘿&#xff0c;我们得到了还是一个真·数组

(...args)&#61;>{console.log(args);
}<<<
[ 1, 2, 3 ]

其次虽然没有arguments,我们仍然能通过fn.length来拿到形参的个数

let arrow &#61; (a,b,c)&#61;>{ console.log(arrow.length)
}
arrow(1,2,3);<<<
3

箭头函数木有this

let obj &#61; {fn:function(){console.log(this);}
}
let fn &#61; obj.fn;
fn(); //global||window
obj.fn(); //obj
//--- --- ---
let obj &#61; {fn:()&#61;>{console.log(this);}
}
let fn &#61; obj.fn;
fn(); //本模块的最顶层的this window||{}
obj.fn(); //因为箭头函数不再有this会往上找&#xff0c;如果是nodejs会找到{}&#xff0c;如果是浏览器会找到window

当一个函数本身没有this时&#xff08;箭头函数&#xff09;&#xff0c;那么谁调用的函数this就指向谁这句话就不再适用&#xff0c;它会查找上级作用域的this是指向谁。而又因为Node.js中&#xff0c;最顶层的作用域&#xff08;模块作用域&#xff09;的this指向的是{}&#xff08;空对象&#xff09;&#xff0c;故上栗中会指向{}。&#xff08;注意Node.js中文件模块的this并不指向全局对象global&#xff0c;而浏览器是指向window全局对象的&#xff09;

函数作用域链的查找

函数作用域链的查找 是顺着【函数定义时】所处的作用域来查找的

let b &#61; &#39;123&#39;function bbb(){console.log(b)}(function(){let b &#61; &#39;bbb&#39;;bbb(); //123})();



推荐阅读
  • Web开发实践:创建连连看小游戏
    本文详细介绍了如何在Web环境中开发一款连连看小游戏,适合初学者和技术爱好者参考。通过本文,您将了解游戏的基本结构、连线算法以及实现方法。 ... [详细]
  • 在AngularJS中,有时需要在表单内包含某些控件,但又不希望这些控件导致表单变为脏状态。例如,当用户对表单进行修改后,表单的$dirty属性将变为true,触发保存对话框。然而,对于一些导航或辅助功能控件,我们可能并不希望它们触发这种行为。 ... [详细]
  • 本文探讨了在 APICloud 平台使用 execScript 方法时如何正确传递对象参数,并提供了详细的示例和解释。 ... [详细]
  • 本文详细介绍了 Node.js 中 OS 模块的 arch 方法,包括其功能、语法、参数以及返回值,并提供了具体的使用示例。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • 本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 本文介绍了如何在React应用中实现延迟加载以提高性能,以及如何利用自定义Hook和高阶组件(HOC)来增强组件功能。通过这些技术,开发者可以构建更加高效和可维护的应用。 ... [详细]
  • 本文介绍了如何通过安装和配置php_uploadprogress扩展来实现文件上传时的进度条显示功能。通过一个简单的示例,详细解释了从安装扩展到编写具体代码的全过程。 ... [详细]
  • 本文介绍了如何使用Node.js通过两种不同的方法连接MongoDB数据库,包括使用MongoClient对象和连接字符串的方法。每种方法都有其特点和适用场景,适合不同需求的开发者。 ... [详细]
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • 本文探讨了如何利用RxJS库在AngularJS应用中实现对用户单击和拖动操作的精确区分,特别是在调整区域大小的场景下。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
author-avatar
赵小坑_38825
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有