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 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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中的字符串函数
2006/10/09 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php中__toString()方法用法示例
2016/12/07 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python简单实现插入排序实例代码
2020/12/16 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
学校标语大全
2014/06/19 职场文书
大学生求职意向书
2015/05/11 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers