JS函数内部属性之arguments和this实例解析


Posted in Javascript onOctober 07, 2018

在函数内部,有两个特殊的对象:arguments和this。

1、arguments

arguments是一个类数组对象。包含着传入函数中的所有参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。

经典案例:阶乘函数

function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * factorial(num-1);
  }
}

定义阶乘函数一般都要用到递归算法,如上所示,但你会发现,这个函数的执行与函数名factorial紧紧耦合在了一起,为解决这个问题,我们可以使用arguments.callee。

function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * arguments.callee(num-1);
  }
}

我们重写之后,factorial()函数里没有引用函数名factorial。这样无论引用函数时使用的是什么名字,都可以保证正常完成递归调用。例如:

var trueFac = factorial;

factorial = function(){
  return 0;
}

console.log(trueFac(5)); // 120
console.log(factorial(5)); // 0

2、this

函数内部的另一个对象是this,this引用的是函数执行的环境对象(当在网页的全局作用域中调用函数时,this对象引用的就是window)。

window.color = "red";
var o = { color: "blue" };

function sayColor(){
  alert(this.color);
}

sayColor(); // "red"

o.sayColor = sayColor;
o.sayColor(); // "blue"

在上面这个函数sayColor()是在全局作用域中定义的,它引用了this对象。由于在调用函数之前,this的值并不确定,因此this可能会在代码执行过程中引用不同的对象。

当在全局作用域中调用sayColor()时,this引用的时全局对象window;换句话说,对this.color求值会转换成对window.color求值,于是结果就返回了"red"。而当把这个函数赋给对象o并调用o.sayColor()时,this引用的是对象o,因此对this.color求值会转换成对o.color求值,所以返回“blue”。

函数的名字仅仅是一个包含指针的变量。

总结

以上所述是小编给大家介绍的JS函数内部属性之arguments和this实例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JS实现日期加减的方法
Nov 29 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 #Javascript
详谈js的变量提升以及使用方法
Oct 06 #Javascript
浅析js中mvvm模式实现的原理
Oct 06 #Javascript
js for终止循环 跳出多层循环
Oct 04 #Javascript
iView-admin 动态路由问题的解决方法
Oct 03 #Javascript
Angular resolve基础用法详解
Oct 03 #Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 #Javascript
You might like
php 正则 过滤html 的超链接
2009/06/02 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python实现的矩阵类实例
2017/08/22 Python
Python如何发布程序的详细教程
2018/10/09 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python基础 range的用法解析
2019/08/23 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
python之语音识别speech模块
2020/09/09 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
小学开学标语
2014/07/01 职场文书
公司踏青活动方案
2014/08/16 职场文书
护士实习自荐信
2015/03/06 职场文书
创建文明城市倡议书
2015/04/28 职场文书
毕业设计致谢词
2015/05/14 职场文书