javascript Function函数理解与实战


Posted in Javascript onDecember 01, 2017

Function函数是javascript的基础也是实现功能的一个引爆点,我们通过实例分析让你对Function函数有一个更加深刻的理解以及在实际中的用法讲解。

Function 确实是一个对象.而我们定义的任何一个函数其实都是Function 对象的一个实例,也可以理解为指向 Function 对象的一个实例.

既然是对象的一个实例,那肯定指向了Function 类型的一个引用. 既然指向了一个引用类型的内存地址,那你也可以简单的把我们定义的函数理解为一个变量,这个变量指向了一个引用类型的地址,这个地址指向了Function 对象的一个实例.

既然我们定义的函数其实是一个变量,那这个函数实例地址可以同时指向多个变量.

看下面的代码:

var add = new Function("n", "m", "return n + m");

上面是标准的函数定义,调用了Function对象的构造函数,这个构造函数把前面的N个参数都默认为新函数的参数,直到最后一个参数认为是新函数的函数体.

从上面的语句中非常直观的看到 add这个变量指向了一个Function 类型的实例,但是这种命名方法非常繁琐,等价于:

(1)函数表达式

var add=function(n,m){
return n+m;
}

(2)函数申明

function add(n,m){
return n+m;
}

由于javascript语言中的申明提前,所以一版提倡用第二种方法定义函数,关于函数申明提前单独开辟一篇来说

但是第一种定义方法让人很直观看到 add 是一个指向函数实例的一个变量.

既然是一个变量,就可以赋值给其他变量,可以当做参数在函数中传递,也可以从函数返回.

所以 var add2=add3=add; 现在 三个变量都指向了这个实例的引用, 现在 add=null; 以后 add2,add3 俩个函数完全可以使用不受影响,因为add 移除函数对象的引用后指向了null的引用.所以根本不影响add2 和 add3 两个函数.

所以函数可以当做其他函数的参数传入.

所以函数可以当做函数的返回值返回.

因为函数名只是一个指向函数实例的变量,所以javascript中函数不会有 重载,因为相同的变量指向的是相同的引用地址.最后表示的还是同一个函数.

函数既然是对象的实例,那么就应该有属性,就应该有方法.所以javascript中的 函数有属性也有方法.

比较重要的4个属性 arguments , this , length , prototype

arguments 表示当前函数的参数类数组,这个属性很特殊,他自己还有个属性叫 callee ,

arguments.callee 属性保存了一个指针,指针指向了拥有此 arguments 属性的函数实体(也就相当于函数名)

this属性是当前环境,类似与C# 中的this,表示当前上下文

length 属性表示当前函数接收最大参数个数

prototype 表示该函数的原型,也就是把对象实例的方法完整的保存下来,换句话说就是原型上的方法都继承下来了.比如 toString() valueOf() 等.

接下来,我们来看看function函数种类

普通函数:介绍普通函数的特性:同名覆盖、arguments对象、默认返回值等。

function ShowName(name) {
 alert(name);
}

匿名函数:介绍匿名函数的特性:变量匿名函数、无名称匿名函数。

//变量匿名函数,左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
 alert(p1+p2);
}
anonymousNormal(3,6);//输出9

闭包函数:介绍闭包函数的特性。

function funA() {
 var i = 0;
 function funB() { //闭包函数funB
  i++;
  alert(i)
 }
 return funB;
}
var allShowA = funA(); //全局变量引用:累加输出1,2,3,4等
 
function partShowA() {
 var showa = funA();//局部变量引用:只输出1
 showa();
}
Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
动态控制Table的js代码
Mar 07 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
Vue.js学习示例分享
Feb 05 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
React Native react-navigation 导航使用详解
Dec 01 #Javascript
分析JS单线程异步io回调的特性
Dec 01 #Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 #Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 #Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 #Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 #Javascript
You might like
php之Smarty模板使用方法示例详解
2014/07/08 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
python概率计算器实例分析
2015/03/25 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
高三毕业生自我鉴定
2013/12/20 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
先进党员事迹材料
2014/12/24 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
golang 接口嵌套实现复用的操作
2021/04/29 Golang
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js