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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
List Installed Hot Fixes
2007/06/12 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python3实现基于用户的协同过滤
2018/05/31 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python通过format函数格式化显示值
2020/10/17 Python
python 批量将中文名转换为拼音
2021/02/07 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
自荐信模版
2013/10/24 职场文书
小学毕业感言150字
2014/02/05 职场文书
工程质量承诺书
2014/03/27 职场文书
企业文化口号
2014/06/12 职场文书
四风对照检查材料范文
2014/09/27 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书