深入浅析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类型介绍，希望对大家有所帮助，如果大家想了解更多内容，敬请关注我们。
相关推荐
-
javascript中的 object 和 function小结
在学习过传统的面向对象语言后,如 java c++,转学 javascript 却有点不适应,特别是 javascript 中所谓的 object(对象) function(函数),有时候会被搞晕.于是乎简单整理了下面的一些概念性的东西,方便学习和理解,会结合一点 java面向对象的知识加以说明. 先了解几个概念: 1.首先 Object 在 ECMAScripe 中是指什么,在 ECMAScripe 中有5种简单数据类型:Undefined,Null,Boolean,Number,String
-
JavaScript function函数种类详解
本篇主要介绍普通函数.匿名函数.闭包函数 目录 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 闭包函数:介绍闭包函数的特性. 1. 普通函数 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 =
-
Javascript使用function创建类的两种方法(推荐)
1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它
-
深入浅析JS Function()构造函数
js中function对象是一个令人着迷的东西,但由于他太过于灵活,常常令人迷惑. 先给大家看个代码片段. var scope="global"; function constructFunction(){ var scope="local"; return new Function(" return scope"); } constructFunction()(); function constructFunction2(){ var scop
-
每天一篇javascript学习小结（Function对象）
小编两天都没有更新文章了,小伙伴们是不是等着急了,今天开始再继续我们的<每天一篇javascript学习小结>系列文章,希望大家继续关注. 1.Function 函数调用(类似call方法) function callSomeFunction(someFunction, someArgument){ return someFunction(someArgument); } function add10(num){ return num + 10; } var result1 = callSo
-
浅谈javascript中的Function和Arguments
javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用, 则返回null(firefox返回undefined). 注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法 由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])
-
JavaScript获取function所有参数名的方法
我写了一个 JavaScript函数来解析函数的参数名称, 代码如下: function getArgs(func) { // 先用正则匹配,取得符合参数模式的字符串. // 第一个分组是这个: ([^)]*) 非右括号的任意字符 var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1]; // 用逗号来分隔参数(arguments string). return args.split(",").map(functi
-
浅析JS中对函数function的理解(基础篇)
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参
-
深入浅析JavaScript中的Function类型
Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va
-
浅析JavaScript中的对象类型Object
ECMAScript中的对象其实就是一组数据和功能的集合. ECMAScript中Object是所有对象的基础. 理解:Object类型是所有它的实例的基础,换句话说,Object类型所具有的任何属性和方法也同样存在于更具体的对象中. Object的实例都具有以下属性和方法 1.Constructor:保存着用于创建当前对象的函数 2.hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是原型中)是否存在.其中作为参数的属性名必须以字符串指定 3.i
-
浅析JavaScript中两种类型的全局对象/函数
这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Object,分为以下几种 1, 值属性的全局对象(Value Properties of the Global Object).有NaN,
-
浅析JavaScript中的类型和对象
JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的. 网上对于prototype的文章很多,一直没明白核心的思想.最后写了很多例子代码后才明白:prototype只能用在类型上. 以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系
-
浅析JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 一.事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()">点击</button> <script> function clickEvent(){ alert("点击事件"); } </script> //方法二:通过addEventListener <button id="bt
-
JavaScript中判断对象类型的几种方法总结
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type
-
浅析JavaScript中var that=this
在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? $('#conten').click(function(){ //this是被点击的#conten var that = this; $('.conten').each(function(){ //this是.c
-
浅析Javascript中bind()方法的使用与实现
在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write; altwrite("hello"); //1.以上代码有什么问题 //2.正确操作是怎样的 //3.bind()方法怎么实现 对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示非法调用异常,正确的方案就是使用bind()方法: altwrite.bind(document
-
浅析JavaScript中浏览器的兼容问题
浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏
-
javascript中对Date类型的常用操作小结
javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD