javascript function(函数类型)使用与注意事项小结


Posted in Javascript onJune 10, 2019

本文实例讲述了javascript function(函数类型)使用与注意事项。分享给大家供大家参考,具体如下:

在ECMAScript中,Function(函数)类型实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

学习要点:

1.函数的声明方式
2.作为值的函数
3.函数的内部属性
4.函数属性和方法

一.函数的声明方式

1.普通的函数声明

function box(num1, num2) {
  return num1+ num2;
}

2.使用变量初始化函数

var box= function(num1, num2) {
  return num1 + num2;
};

3.使用Function构造函数

var box= new Function('num1', 'num2' ,'return num1 + num2');

PS:第三种方式我们不推荐,因为这种语法会导致解析两次代码(第一次解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。但我们可以通过这种语法来理解"函数是对象,函数名是指针"的概念。

二.作为值的函数

ECMAScript中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。

function box(sumFunction, num) {
  return sumFunction(num); //someFunction
}
function sum(num) {
  return num + 10;
}
var result = box(sum, 10); //传递函数到另一个函数里

三.函数内部属性

在函数内部,有两个特殊的对象:argumentsthisarguments是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。

function box(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * box(num-1); //一个简单的的递归
  }
}

对于阶乘函数一般要用到递归算法,所以函数内部一定会调用自身;如果函数名不改变是没有问题的,但一旦改变函数名,内部的自身调用需要逐一修改。为了解决这个问题,我们可以使用arguments.callee来代替。

function box(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num-1);//使用callee来执行自身
  }
}

函数内部另一个特殊对象是this,其行为与Java和C#中的this大致相似。换句话说,this引用的是函数据以执行操作的对象,或者说函数调用语句所处的那个作用域。PS:当在全局作用域中调用函数时,this对象引用的就是window。

//便于理解的改写例子
window.color = '红色的'; //全局的,或者var color = '红色的';也行
alert(this.color); //打印全局的color
var box = {
  color : '蓝色的', //局部的color
  sayColor : function () {
    alert(this.color); //此时的this只能box里的color
  }
};
box.sayColor(); //打印局部的color
alert(this.color); //还是全局的
//引用教材的原版例子
window.color = '红色的'; //或者var color = '红色的';也行

var box = {
  color : '蓝色的'
};
function sayColor() {
  alert(this.color); //这里第一次在外面,第二次在box里面
}
getColor();
box.sayColor = sayColor; //把函数复制到box对象里,成为了方法
box.sayColor();

四.函数属性和方法

ECMAScript中的函数是对象,因此函数也有属性和方法。每个函数都包含两个属性:lengthprototype。其中,length属性表示函数希望接收的命名参数的个数。

function box(name, age) {
  alert(name + age);
}
alert(box.length); //2

PS:对于prototype属性,它是保存所有实例方法的真正所在,也就是原型。这个属性,我们将在面向对象一章详细介绍。而prototype下有两个方法:apply()call(),每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

function box(num1, num2) {
  return num1 + num2; //原函数
}
function sayBox(num1, num2) {
  return box.apply(this, [num1, num2]); //this表示作用域,这里是window
} //[]表示box所需要的参数
function sayBox2(num1, num2) {
  return box.apply(this, arguments); //arguments对象表示box所需要的参数
}

alert(sayBox(10,10)); //20
alert(sayBox2(10,10)); //20

call()方法于apply()方法相同,他们的区别仅仅在于接收参数的方式不同。对于call()方法而言,第一个参数是作用域,没有变化,变化只是其余的参数都是直接传递给函数的。

function box(num1, num2) {
  return num1 + num2;
}
function callBox(num1, num2) {
  return box.call(this, num1, num2); //和apply区别在于后面的传参
}
alert(callBox(10,10));

事实上,传递参数并不是apply()call()方法真正的用武之地;它们经常使用的地方是能够扩展函数赖以运行的作用域。

var color = '红色的'; //或者window.color = '红色的';也行
var box = {
  color : '蓝色的'
};
function sayColor() {
  alert(this.color);
}
sayColor(); //作用域在window
sayColor.call(this); //作用域在window
sayColor.call(window); //作用域在window
sayColor.call(box); //作用域在box,对象冒充

这个例子是之前作用域理解的例子修改而成,我们可以发现当我们使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了。

使用call()或者apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系(耦合,就是互相关联的意思,扩展和维护会发生连锁反应)。也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如 box.sayColor = sayColor;

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
javascript工具库代码
Mar 29 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
搞定immutable.js详细说明
May 02 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 #Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 #Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 #Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 #Javascript
vue通信方式EventBus的实现代码详解
Jun 10 #Javascript
Vue将页面导出为图片或者PDF
Aug 17 #Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
You might like
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
详解vue配置后台接口方式
2019/03/29 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
JavaScript实现筛选数组
2021/03/02 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Django实现跨域请求过程详解
2019/07/25 Python
详解django中Template语言
2020/02/22 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
行政人事经理职位说明书
2014/03/05 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
财产公证书样本
2014/04/04 职场文书
书香校园建设方案
2014/05/02 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
医院科室评语
2015/01/04 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis