深入浅析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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
详解puppeteer使用代理
Dec 27 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
angular组件间通讯的实现方法示例
May 07 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
20个PHP常用类库小结
2011/09/11 PHP
PHP安全配置详细说明
2011/09/26 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
error和exception有什么区别
2012/10/02 面试题
文科生自我鉴定
2014/02/15 职场文书
借款协议书
2014/09/16 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
导游词之峨眉山
2019/12/16 职场文书