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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JavaScript实现一键复制内容剪贴板
Jul 23 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安装为Apache DSO
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
定义php常量的详解
2013/06/09 PHP
php中namespace及use用法分析
2016/12/06 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python版简单工厂模式
2017/10/16 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
详解python程序中的多任务
2020/09/16 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
opencv实现图像几何变换
2021/03/24 Python
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
代理人委托书
2014/09/16 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
表扬信格式模板
2015/05/05 职场文书