JavaScript中的Function类型浅析
1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法。正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针。
2. 常用的函数定义方式
. 函数声明:
function sum(a , b ){
return a+b;
} . 表达式:
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)); //
var anotherSum = sum; //变量anotherSum也指向了同一个函数对象
console.log(anotherSum(4 , 5)); //
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); //
//两个函数同名了,结果只能是后一个函数覆盖前一个,所以不能重载
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; //
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)); //
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(); // var retrieveX = module.getX;
retrieveX(); // 9, 因为在这种情况下, "this" 指向全局变量 var boundGetX = retrieveX.bind(module);//把retrieveX()函数中的this永远与module绑定,再调用这个函数永远都是在module对象中运行
boundGetX(); //
JavaScript中的Function类型浅析的更多相关文章
- JavaScript中判断对象类型方法大全1
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- JavaScript中判断对象类型的种种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- 转 JavaScript中判断对象类型的种种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- JavaScript中判断变量类型最简洁的实现方法以及自动类型转换(#################################)
这篇文章主要介绍了JavaScript中判断整字类型最简洁的实现方法,本文给出多个判断整数的方法,最后总结出一个最短.最简洁的实现方法,需要的朋友可以参考下 我们知道JavaScript提供了type ...
- javaScript中Number数字类型方法入门
前言 Number和Math都属于JavaScript中的内置对象,Number数字类型作为基础数据类型,我们在开发过程中会经常用到,包括数字精度的格式化,还有字符串转换成数字等操作. Number数 ...
- JavaScript中的Function(函数)对象详解
JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...
- javascript基础篇--function类型(上)
在js中,function类型实际上是对象,每一个函数都是function类型的一个实例.并且与其它引用类型一样具有属性和方法. 声明 1普通方式 Function sum(num1,num2) { ...
- javascript中的function命名空間與模擬getter、setter
function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...
随机推荐
- kali Linux 文本图形界面切换遇到的怪问题
前段装了在Virtual Box上装一个Kali Linux玩,然后设为了开机进入文本界面,后来遇到无法上网的问题,网上找到解决方法,说是NAT地址转换和host-only双网卡顺序问题,按照网上的说 ...
- typeof应该注意的地方(网龙公司校招笔试题)
<script language="javascript" type="text/javascript"> alert(new String('a' ...
- easyui-validatebox验证 radio
添加规则 $.extend($.fn.validatebox.defaults.rules, { requireRadio: { validator: function(value, param){ ...
- Visual Studio 2015中的常用调试技巧分享
.NET 技术交流群:337901356 欢迎您的加入! 为什么要学习调试? 调试(Debug)是作为一个程序员必须要学会的东西,学会调试可以极大的提高开发效率,排错时间,很多人不喜欢调试,但我认为这 ...
- Map集合的两种遍历方式
Map集合:即 接口Map<K,V> map集合的两种取出方式: 1.Set<k> keyset: 将map中所有的键存入到set集合(即将所有的key值存入到set中) ...
- nvl()函数
Oracle里面的nvl()函数 Nvl(字段名,0):如果你某个字段为空,但是你想让这个字段显示0,nvl(字段名,0) ,就是当你选择出来的时候,这个字段虽然为空,但是显示的是0,当然这个0也可以 ...
- 转:『代码』JS封装 Ajax级联下拉列表
在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...
- SDL_Test库(1)——SDL不用TTF库绘制文字
SDL库有很多的扩展,这很方便.但是每个扩展库都很臃肿,一般都会拖上额外的两三个开源库,更有甚者,扩展库的大小比SDL库本身还大得多.但有一个自带的.很有用的库很容易被大家忽视.它就是本文要讲的SDL ...
- HDU 4763 (KMP算法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4763 题目大意:给定一串字符,从中找出符合“EAEBE”格式的E的最大字符数.AB可以是任意数量的任意 ...
- [算法] get_lucky_price price
int get_lucky_price(int price, const vector & number) 题意大概是给你一个数price,比如1000,然后有unlucky_num,有{1, ...