深入浅析JavaScript中的Function类型


Posted in Javascript onJuly 09, 2016

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念。

1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法。正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针。

2. 常用的函数定义方式

1. 函数声明:

function sum(a , b ){
return a+b;
}

2. 表达式:

var sum = function(){
return a+b; 
}; //注意分号
 //两种方式的区别:
 //解释器会率先读取函数声明,并使其在执行之前可以访问,而使用表达式则必须等到解析器执行到它所在的代码行,才会真正被解释执行(变量声明提前,而值留在原地)
alert (sum (10 ,10));
function sum(a ,b){
return a+b;
}
//↑上面的代码会正常执行,因为在代码执行前,解析器通过函数声明提升,读取并将函数声明添加到执行环境中,放到代码树的顶部
alert (typeof sum);
alert(sum(10 , 10));
var sum = function (a ,b){

return a+b;
}
//↑报错,原因在于函数位于一个初始化语句中,不是一个函数声明,不会被提前,而只会把var sum提前,用typeof操作符显示sum是undefined,所以报错

3. 函数名仅仅保存指向函数对象的指针,因此函数名与包含对象指针的其他变量没什么不同,也就是说,一个函数对象可以有多个名字:

function sum(a , b ){
return a+b;
}
console.log(sum(2 ,3)); //5
var anotherSum = sum; //变量anotherSum也指向了同一个函数对象
console.log(anotherSum(4 , 5)); //9
sum = null; //sum变量不再保存函数对象的指针了
console.log(anotherSum(1 , 3)); //anotherSum这个变量仍能调用

4. JS为何没有重载这个概念。

function add(a){
return a+3 ;
}
function add(a){
return a+5;
}
var result = add(3); //8
//两个函数同名了,结果只能是后一个函数覆盖前一个,所以不能重载

5. 函数的内部属性:函数内部,有两个特殊的对象,arguments和this

1. arguments:

arguments是个类数组对象,包含着传入函数的所有参数,这个对象有一个叫callee的属性,属性值是一个指针,指向拥有这个arguments对象的函数本身

function foo (){
var a =arguments.callee; 
return a.toString();
}
foo();
/*
返回结果:
"function sum(){

var a =arguments.callee; 

return a.toString();

}"
也就是说,一个函数内部,arguments.callee指的就是这个函数本身。这个函数在递归调用时有点用,有许多缺陷,在ES5严格模式被移除
*/

2. this:简单来说,this指的就是函数执行的环境对象,在哪个对象中执行,this就指哪个对象。展开来说比较复杂,单开一篇

//TODO:

3. ES5规范了函数的另一个属性:caller,这个函数属性指的是调用当前函数的函数

function inner(){
console.log(inner.caller);
} 
function outer(){
inner();
}
outer(); 
//function outer(){
inner();
}

4. length属性:表示函数希望接受的参数个数

function add(a ,b ,c){
return a+b+c;
}
add.length; //3

5. 著名的prototype属性,简单来说,是一个对象,是通过调用构造函数而创建的一个对象,包含可以由特定类型的所有实例共享的属性和方法。展开来说比较复杂,单开一篇

//TODO:

6. 函数的两个方法:call()和apply(),作用都是在特定的作用域中调用函数,实际上就是设置函数内部的this值

1. call():与apply()方法类似,区别在接收参数的方式不同,参数必须逐个列出来。

2. apply():接收两个参数,一个是函数运行的作用域,另一个是参数数组,可以是数组,也可以是arguments这个类数组对象

function sum(a , b){
return a+b;
}
function callSum(a , b){
return sum.apply(this , arguments);
}//第二个参数是一个类数组对象arguments
function callSum1(a , b){
return sum.apply(this, [a , b]);
} //第二个参数是一个数组
console.log(callSum(2 , 3)); //5 
console.log(callSum1(3 ,5)); //8

3. 传递参数并调用函数并非call()和apply()的用武之地,二者真正强大的地方是扩充函数运行的作用域

var color = 'red';
var obj = {
color :'blue' 
}
function foo(){
console.log(this.color); 
}
foo(); //'red'
foo.call(this);//'red'
foo.call(obj); //'blue'
//最后一次调用foo()函数的执行环境变了,其中的this指向了obj对象,所以是'blue'

 使用call()和apply()扩充作用域的最大好处,就是使对象与方法之间解耦

4. ES5定义了一个新方法:bind(),返回一个函数,这个函数中this值会被绑定到传给bind()函数的值

var x = 9; 
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var retrieveX = module.getX;
retrieveX(); // 9, 因为在这种情况下, "this" 指向全局变量
var boundGetX = retrieveX.bind(module);//把retrieveX()函数中的this永远与module绑定,再调用这个函数永远都是在module对象中运行
boundGetX(); // 81

以上所述是小编给大家介绍的深入浅析JavaScript中的Function类型介绍,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木。

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
JS添加删除DIV的简单实例
Jul 08 #Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 #Javascript
简单封装js的dom查询实例代码
Jul 08 #Javascript
JS选取DOM元素的简单方法
Jul 08 #Javascript
封装获取dom元素的简单实例
Jul 08 #Javascript
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php session 错误
2009/05/21 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
原生js实现随机点名
2020/07/05 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python检测lvs real server状态
2014/01/22 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python如何求解两数的最大公约数
2018/09/27 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python 命令行传入参数实现解析
2019/08/30 Python
tensorflow的计算图总结
2020/01/12 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
校园文明标语
2014/06/13 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js