JS function的定义方法,及function对象的理解。
废话篇:
今天看到了Function的内容,各种晕,各种混淆有木有。简直是挑战个人脑经急转弯的极限啊。不过,最终这一难题还是被我攻克了,哇咔咔。现在就把这东西记下来,免得到时候又忘了就悲催了。。。。
正文篇:
function的定义方法,及function对象的理解。
在我大js中秉承着一切都是对象的原则,不论是方法还是其他都不例外。
我们在使用java的时候经常要编写方法,这时候其用的关键字是function,而在js中我们在编写函数的时候也是用这个关键字,所以常常会使我们错把两者进行关联,所以常常会吧我们引导只一个错误的方向。
所以接下来我们先从function的定义开始说起。
一:实际上就和我们最为平常的方法是一样的。
function fname(test){ alert(""+test); }
二:通过Function的函数的构造器进行函数对象的定义。
var fname = new Function("test", "alert(''+test);"); 第一个参数实际上是表示要传入函数中的参数,二第二个参数表示的是当前的函数要执行的过程。两个参数实际上都是string类型的。但是又上可以看出实际上当前的内容是十分的繁杂。
三:通过变量只带一块function关键字定义的方法来进行定义。
var fname = function(test){alert(""+test);}
上面的三种方法虽然最后都是声明定义了一个函数,但是也是有区别的。第一种方法实际上是为函数命名为fname,而二三种方法使用起来实际上是把一个匿名函数赋值给一个变量。使用第二种方法来定义函数的时候,实际上就是调用构造函数并在每次解析的时候都会重新读取并创建一新的函数对象,由此可见当在循环体中调用这样的函数的时候会是十分的低效的,还有一点就是,当我们使用其创建一个函数对象的时候,其并不遵循典型的作用域,而是一直作为顶级函数来执行的。意思就是,当在函数内部调用它的时候,其实他并不会用函数内部定义的变量。而是只能使用全局变量。
第一三种方法实际上市定义了一种函数直接量也可以称之为是一种函数表达式。当我们不为函数直接量定义名称的时候。函数直接量就叫做匿名函数。那么我们如何调用一个匿名直接量,如下:
1、执行后得到返回值的函数调用
//方式一,调用函数,得到返回值。强制运算符使函数调用执行
(function(x,y){
alert(x+y);
return x+y;
}(3,4));
//方式二,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用在去调用执行
(function(x,y){
alert(x+y);
return x+y;
})(3,4);
2、执行后忽略返回值
//方式四,调用函数,忽略返回值
void function(x) {
x = x-1;
alert(x);
}(9);//这里实际上就是使用了void运算符,其用于计算之后的表达式并且不返回任何值。
嗯,最后看看错误的调用方式
//错误的调用方式
function(x,y){
alert(x+y);
return x+y;
}(3,4);//这种方式是没有运算的。可以这样认为,把匿名函数作为表达式的看的话,我们并没有在一个计算的表达式中来调用函数表达式,所以其仅仅只是返回了表达式本身,而其本身就是一个函数不变量。
有点扯远了。实际上在使用第一和第三种的方法来说的话,在第一次解析的时候会通过new Function来定义一个函数的对象,并把这一对象作为内部对象来进行存储和运行。由此可知在js中每写一个函数,实际上就是在其中存储一个相关的函数对象,并在我们需要调用的时候对其进行调用。
接下来我们来具体的了解一下Function对象的定义和内容吧。
1.首先是我们最为常用的内容arguments对象。他的定义是,一个类似于数组的对象,对应的是传递给函数对象的属性。arguments对象是一个所有的函数内部都可以用的函数内部变量。当我们调用函数的时候,他会存储我们传输进来的参数的数据的。如下端的吗。
function test(){
if(arguments[0]){
alert("arguments:",+arguments[0]);
}
}
test("a");//当前页面中会显示出一个弹出框并显示arguments:a
所以由上面可以看出,arguments对象的使用方式和array是十分的相像的。为什么说他只是类似数组对象呢,因为他仅仅只有length属性但并没有array的其他属性和方法。
当然在arguments对象中也是有一些其自己的属性的,如下
- callee,属性存储的是当前的调用的函数对象。当我们使用匿名函数的时候,如果需要调用存储当前的arguments对象的方法对象,此时可以使用当前属性。但是在ECM5中是阻止使用这一属性的。这样做的原因是,函数命名来调用函数的实现是优于这种方式的。
- caller,这一属性只有当函数正在执行的情况之下才会被定义。当然其返回的内容是当前的和toString方法是一样的,为function的反编译文本。但是实际上在使用的时候返回便以文本之后,js有解析成为函数对象之后执行,所以说,这一属性实际上还是返回函数本身。但是这一属性在ECM5中已经被删除了。
- length属性,是初始化的时候读取当前函数中的参数后获取的值。所以函数的length属性的值其实就和arguments.length的值的大小是一样的。
- prototype属性,表示的是当前的function对象的原型对象。也可以了几位当前的函数对象继承了原型对象的属性和方法。具体参见js原型链学习。
当然对于函数对象js中也是有定义一些基本方法的。
- apply方法相信你不会陌生,制定方法替换当前的this指针,冰用穿入的对象中的数据替换当前函数的参数值。上例子:
function test(){
alert("" + this);
} function testTwo(a){
console.log("this:"+this);
console.log("a:"+a);
} testTwo.apply(test, [1]); //输出的效果是this:function test(){ alert("" + this);} 与 a:1实际上apply是用第一个参数中的对象替换当前的函数中的this指针,并用数组参数中的数据来来替换但钱的函数调用时的参数。
- bind方法,其效果是不论当前的函数怎么调用他的this指针代表的值都是一样的。
var displayArgs = function (val1, val2, val3, val4) {
document.write(val1 + " " + val2 + " " + val3 + " " + val4);
} var emptyObject = {}; var displayArgs2 = displayArgs.bind(emptyObject, 12, "a"); displayArgs2("b", "c"); // Output: 12 a b c由上面可见实际上bind函数就有点像是绑定当前的内容和一个数据的关系。并返回一个一个可调用对象。
- call方法使用效果实际上和apply方法是一样的,只是其后面传递的第二个参数不在是严格要求是数组。
以上就是我学习到的Function的内容,本人小白,爱生活,爱前端。
JS function的定义方法,及function对象的理解。的更多相关文章
- 关于setInterval方法中function的定义方法
使用window对象的setInterval方法,作为第一个参数传递的function必须在全局作用域中定义,否则会出现报错而无法执行. 具体如下: 在下面的代码中,试用jQuery方式在回调函数中使 ...
- js 或jquery定义方法时,参数不固定是怎么实现的
//①不定义接受参数的方式来接受参数(arguments) function getparams(){ //利用arguments来接受参数,arguments表示参数集合, //里面存放的调用这个方 ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- js中使用使用原型(prototype)定义方法的好处
经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函 ...
- js面向对象 多种创建对象方法小结
转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...
- JS实现AOP拦截方法调用
//JS实现AOP拦截方法调用function jsAOP(obj,handlers) { if(typeof obj == 'function'){ obj = obj.prot ...
- 使用 prototype 定义方法和属性
除了可以在类的构造器方法中定义方法和属性外,也可以使用 prototype 定义方法和属性.每个类都有这个属性,该属性是一个静态属性,因此无需实例化,只需使用类引用该属性即可. 1.1 使用 prot ...
- js中Function的apply方法与call方法理解
最近在使用jQuery的$.each方法时很,突然想到$.each($('div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的, ...
- 【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法 【外加:使用第三方js导出的默认function的调用方法】
如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...
随机推荐
- [转载]Thread.Sleep(0)妙用
原文地址:http://blog.csdn.net/lgstudyvc/article/details/9337063 来自本论坛: 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段 ...
- C#&java重学笔记(函数)
C#部分 1.写在函数定义的()中的关键字: a.params关键字:用来满足函数的参数为数组时,而数组的长度不固定的情况.且该关键字只能用来修饰数组型参数.这样一修饰,就达成了类似JavaScri ...
- 【linux】文字提取
提取IP地址: 方法①: ifconfig eth3|grep Bcast|cut -d ":" -f2|cut -d " " -f1 ifconfig: 显示 ...
- Webpack教程一
比较 如果你熟悉原来一系列的构建工具,grunt或者gulp之类的,这里有一篇webpack和他们比较的文章可以读一读. Webpack Compared 安装 先装好node和npm,因为webpa ...
- FastReport报表
http://www.fastreportcn.com/product/FASTREPORT_dotNET.html
- 百度面试题——top K算法
需求 从一亿个数据中,找出其中最小的10个数. 分析 最笨的方法就是将这一亿个数据,按从小到大进行排序,然后取前10个.这样的话,即使使用时间复杂度为nlogn的快排或堆排,由于元素会频繁的移动,效率 ...
- 深入剖析阿里巴巴云梯YARN集群
我的一篇文章<深入剖析阿里巴巴云梯YARN集群> 已经发表在程序员2013年11月刊中, 原文链接为http://www.csdn.net/article/2013-12-04/28177 ...
- VCL定义和使用CM_Message的原因(主要是内部控制,同时可简化参数传递,还可截住消息,统一走消息路线,还可省内存)
内部控制是指,做了某些操作后产生某些效果,但是Windows系统本身不提供这样的消息,应此不得不自定义.比如父窗口改变了字体,那么所有子窗口也都应该改变字体,至少也得通知一下它们,让子控件自己决定是否 ...
- PHP使用CURL详解
CURL是一个非常强大的开源库,支持很多协议,包括HTTP.FTP.TELNET等,我们使用它来发送HTTP请求.它给我 们带来的好处是可以通过灵活的选项设置不同的HTTP协议参数,并且支持HTTPS ...
- java socket 单服务器多客户端实时通信
想用JAVA做一个服务器,请问怎么利用TCP和线程,实现多个客户端同时在线,能与服务器进行交互? 服务器监听端口 做个无限循环 接到一个连接就创建一个通道线程,并将通道线程存储到一个list集合中 1 ...