深入浅析JavaScript中的Function类型
来源: 阅读:622 次 日期:2016-07-25 15:17:35
温馨提示: 小编为您整理了“深入浅析JavaScript中的Function类型”,方便广大网友查阅!

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类型介绍,希望对大家有所帮助

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map