js的函数调用会免费奉送两个而外的参数就是 this 和 arguments 。arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度。

书上有说4中调用方式:

  • 方法调用模式
  • 函数调用模式
  • 构造器调用模式
  • apply调用模式

下面我们来看看一些实例更好理解。

1:方法调用模式。

请注意this此时指向myobject。

/*方法调用模式*/
    var myobject={
            value:0,
            inc:function(){
                    alert(this.value)
                }
        }
    myobject.inc()

2:函数调用模式

请注意this此时指向window

/*函数调用模式*/
    
    var add=function(a,b){
        alert(this)//this被绑顶到window
            return a+b;
        }
    var sum=add(3,4);
    alert(sum)

3:构造器调用模式

javascript语言精粹一书建议摒弃这中方式。因为有更好的方式。这里先不介绍。下次发表博文的时候贴出来。

会在这里加一个连接。

/*构造器调用模式  摒弃*/
    
    var quo=function(string){
            this.status=string;
        }
    quo.prototype.get_status=function(){
            return this.status;
        }
    var qq=new quo("aaa");
    alert(qq.get_status());

4:apply调用模式

==我们可以来看一个更有用的apply实例。看最下面的代码。

/*apply*/
    //注意使用了上面的sum函数
    //与myobject
    //这中调用方式的优点在于可以指向this指向的对象。
    //apply的第一个参数就是this指针要指向的对象
    var arr=[10,20];
    var sum=add.apply(myobject,arr);
    alert(sum);

看这个apply真正应用。bind这是一个绑定时间的函数

var bind=function(object,type,fn){
            if(object.attachEvent){//IE浏览器
                    object.attachEvent("on"+type,(function(){
                                                           return function(event){
                                                               window.event.cancelBubble=true;//停止时间冒泡
                                                               object.attachEvent=[fn.apply(object)];//----这里我要讲的是这里
                                                               //在IE里用attachEvent添加一个时间绑定以后。
                                                               //this的指向不是到object对象本身所以。我们绑定的function里的this.id是无法正常工作的。
                                                               //但是如果我们用fn.apply(object)
                                                               //这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以this.id就变成了
                                                               //object.id 可以正常工作了。
                                                               
                                                               }
                                                           })(object),false);
                }else if(object.addEventListener){//其他浏览器
                        object.addEventListener(type,function(event){
                                                              event.stopPropagation();//停止时间冒泡
                                                              fn.apply(this)
                                                              });
                    }
            
        }
    bind(document.getElementById("aaa"),"click",function(){alert(this.id)});

JS函数调用的四种方法的更多相关文章

  1. 判断数组的方法/判断JS数据类型的四种方法

    参考文: 以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() . instanceof 以及 Array.isArray() h ...

  2. 判断js数据类型的四种方法,以及各自的优缺点(转)

    转载地址:https://blog.csdn.net/lhjuejiang/article/details/79623973 数据类型分为基本类型和引用类型: 基本类型:String.Number.B ...

  3. node.js取参四种方法req.body,req.params,req.param,req.body

    参考:https://my.oschina.net/u/2519530/blog/535309 获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实 ...

  4. 判断JS数据类型的四种方法

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...

  5. js函数调用的几种方法

    js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方 ...

  6. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  7. JS 中检测数组的四种方法

    今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...

  8. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  9. 两个变量交换的四种方法(Java) 七种方法(JS)

    两个变量交换的四种方法(Java)   对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...

随机推荐

  1. vue之介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

  2. Nginx通过header转发

    假设添加自定义头 "my-header",当"my-header"等于test时,转发到192.168.1.113 请求如下 wget --header=&qu ...

  3. 执行环境可以在SQLPLUS.EXE或者DOS(命令行)中执行

    Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命 令可以把dmp文件从本地导入到远处的数据库服务器中. ...

  4. kdevelop使用笔记

    https://www.cnblogs.com/-Mr-y/p/7707176.html#_label7

  5. Gym - 101028I March Rain 二分

    http://codeforces.com/gym/101028/problem/I 题意:给你n个洞,k个布条,问布条能贴到所有洞时的最小值. 题解:二分答案,因为答案越大就越容易满足条件. 技巧: ...

  6. 异步IO

    异步IO   在IO编程一节中,我们已经知道,CPU的速度远远快于磁盘.网络等IO.在一个线程中,CPU执行代码的速度极快,然而,一旦遇到IO操作,如读写文件.发送网络数据时,就需要等待IO操作完成, ...

  7. Word文档中的格式标记大全

    在Word中有很多的格式设置,很多格式设置都会有一些标记,这些标记是隐藏的,在打印文档时是不会打印出来的,但是它们却起着结构化文档的大作用.如果你在编辑文档,不妨点击格式标记开关,看看都有哪些格式标记 ...

  8. 将你的wordpress博客添加到百度个性首页

    当你登陆百度账号后,进入百度首页会显示新的个性首页,不仅仅有搜索框,下面还有一个小型导航,放着你经常去的网站. 百度提供了一键添加到百度首页的按钮代码. 首先,先打开分享到百度新首页代码申请页面:ht ...

  9. 关于Ubuntu中Could not get lock /var/lib/dpkg/lock解决方案

    在Ubuntu中,有时候运用sudo  apt-get install 安装软件时,会出现一下的情况 E: Could not get lock /var/lib/dpkg/lock - open ( ...

  10. vue使用resource传参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...