废话篇:

今天看到了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);

  //还有一种很奇葩的方式三
  ~function(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对象的理解。的更多相关文章

  1. 关于setInterval方法中function的定义方法

    使用window对象的setInterval方法,作为第一个参数传递的function必须在全局作用域中定义,否则会出现报错而无法执行. 具体如下: 在下面的代码中,试用jQuery方式在回调函数中使 ...

  2. js 或jquery定义方法时,参数不固定是怎么实现的

    //①不定义接受参数的方式来接受参数(arguments) function getparams(){ //利用arguments来接受参数,arguments表示参数集合, //里面存放的调用这个方 ...

  3. prototype.js中Function.prototype.bind方法浅解

    prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...

  4. js中使用使用原型(prototype)定义方法的好处

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函 ...

  5. js面向对象 多种创建对象方法小结

    转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...

  6. JS实现AOP拦截方法调用

    //JS实现AOP拦截方法调用function jsAOP(obj,handlers) {    if(typeof obj == 'function'){        obj = obj.prot ...

  7. 使用 prototype 定义方法和属性

    除了可以在类的构造器方法中定义方法和属性外,也可以使用 prototype 定义方法和属性.每个类都有这个属性,该属性是一个静态属性,因此无需实例化,只需使用类引用该属性即可. 1.1 使用 prot ...

  8. js中Function的apply方法与call方法理解

    最近在使用jQuery的$.each方法时很,突然想到$.each($('div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的, ...

  9. 【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法 【外加:使用第三方js导出的默认function的调用方法】

    如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...

随机推荐

  1. asp.net 创建文字特效

    相信word 中的 艺术字 功能大家都不陌生.今天, 我们就利用C#来制作几款自己的艺术字, 可能会对我们了解字体图像的制作原理有一些帮助. 至于有没有使用价值我保持沉默. 一. 投影效果 程序运行效 ...

  2. 用dedecms自定义表单创建简易自助预约系统

    建站往往需要根据客户的需求来增加相应的功能,比如预约.平时用比较多的是织梦系统,那么如何用dedecms自定义表单创建简易自助预约系统呢? 进入dedecms后台,左侧菜单中依次点击“核心” - 频道 ...

  3. maven 多套环境 配置(开发、测试、预发、正式)

    接上一节继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5种环境:本机环境(local).(开发小组内自测的)开发环境(dev).(提供给测试团队的)测试环境(test).预发布环境(pre ...

  4. CSS3中的网格

    在这篇文章中,我们将来看一些CSS3新属性,从而用HTML和CSS处理网格的时候更容易.但首先让我们讨论一点HTML和CSS网格的历史,了解清楚为什么以前很困难. 网格简史 曾几何时,我们的布局是一团 ...

  5. iptables使用multiport 添加多个不连续端口 不指定

    iptables使用multiport 添加多个不连续端口   碟舞飞扬 , 01:26 , Linux技术 , 评论(0) , 引用(0) , 阅读(12214) , Via 本站原创 大 | 中  ...

  6. PHP SESSION 保存到数据库

    PHP SESSION 的工作原理 在客户端(如浏览器)登录网站时,被访问的 PHP 页面可以使用 session_start() 打开 SESSION,这样就会产生客户端的唯一标识 SESSION ...

  7. POJ 1939

    #include<iostream> #include<iomanip> #define MAXN 10000 using namespace std; ]; int main ...

  8. ZOJ题目分类

    ZOJ题目分类初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 13 ...

  9. Lucene基于IKAnalyzer配置的词典扩充

    在web项目的src目录下创建IKAnalyzer.cfg.xml文件,内容如下 <?xml version="1.0" encoding="UTF-8" ...

  10. return x>y?x:y ?:啥意思?

    ? :是一个三目运算符,先判断‘?’前面的,若为真,执行‘?’后面语句,else,执行‘:’后面语句! return (x>y?x:y) 即if(x>y) 执行xelse执行y