一、普通方式

  1. /*普通模式*/
  2.  
  3. // 声明一个函数,并调用
  4. function func() {
  5. console.log("Hello World");
  6. }
  7. func();

二、函数表达式

  1. /*函数表达式*/
  2. // 使用函数的Lambda表达式定义函数,然后调用
  3. var func = function() {
  4. console.log("你好,百度一下");
  5. };
  6. func();
  7.  
  8. //可以发现函数调用很简单,就是平时学习的一样.
  9. //这里的关键是,在函数调用模式中,函数里的 this 关键字指全局对象,
  10. //如果在浏览器中就是 window 对象. 例如:
  11. var func = function() {
  12. console.log(this);
  13. };
  14. func();
  15. // 此时,会弹出对话框,打印出 [object Window]

三、方法调用模式

  1. /*方法调用模式*/
  2. //函数调用模式很简单,是最基本的调用方式.
  3. //但是同样的是函数,将其赋值给一个对象的成员以后,就不一样了.
  4. //将函数赋值给对象的成员后,那么这个就不在称为函数,而应该叫做方法.
  5.  
  6. // 定义一个函数
  7. var func = function() {
  8. alert("我是一个函数么?");
  9. };
  10.  
  11. // 将其赋值给一个对象
  12. var o = {};
  13. o.fn = func; // 注意这里不要加圆括号
  14. // 调用
  15. o.fn();
  16.  
  17. //此时,o.fn 则是方法,不是函数了.
  18. //实际上 fn 的方法体与 func 是一模一样的,但是这里有个微妙的不同. 看下面的代码:
  19. // 接上面的代码
  20. alert(o.fn === func);
  21. //打印结果是 true ,这个表明两个函数是一样的东西. 但是修改一下函数的代码:
  22.  
  23. // 修改函数体
  24. var func = function() {
  25. alert(this);
  26. };
  27. var o = {};
  28. o.fn = func;
  29. // 比较
  30. alert(o.fn === func);
  31. // 调用
  32. func();
  33. o.fn();
  34. // 这里的运行结果是,两个函数是相同的,因此打印结果是 true.
  35. // 但是由于两个函数的调用是不一样的,
  36. // func的调用,打印的是 [object Window],而o.fn 的打印结果是[object Object].
  37. // 这里便是函数调用与方法调用的区别.
  38. // 函数调用中,this专指全局对象window,
  39. // 而在方法中this专指当前对象. 即o.fn 中的this 指的就是对象o.

四、构造函数调用模式

  1. /*构造函数调用模式*/
  2.  
  3. // 同样是函数,在单纯的函数模式下,this表示window;
  4. // 在对象方法模式下,this指的是当前对象.
  5. // 除了这两种情况,JavaScript中函数还可以是构造器.
  6. // 将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字. 如代码:
  7. // 定义一个构造函数
  8. var Person = function() {
  9. this.name = "百度一下";
  10. this.sayHello = function() {
  11. alert("你好,这里是" + this.name);
  12. };
  13. };
  14. // 调用构造器,创建对象
  15. var p = new Person();
  16. // 使用对象
  17. p.sayHello();
  18.  
  19. // 上面的案例首先创建一个构造函数Person,然后使用构造函数创建对象p.
  20. // 这里使用 new语法.然后使用对象调用sayHello()方法.
  21. // 这个使用构造函数创建对象的案例比较简单. 从案例可以看到,此时 this指的是对象本身.

五、apply、call调用模式

上篇中详细讲解了。

第196天:js---调用函数的五种方式的更多相关文章

  1. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...

  2. JS定义函数的2种方式以及区别简述(为什么推荐第二种方式)

     无意中看到了阮一峰大神多年前的一篇博客: 12种不宜使用的Javascript语法    看到第9条的时候受到了启发,感觉之前没怎么理解清楚的一些问题好像突然就清晰了,如下图 可能光这样看,有些小伙 ...

  3. JS定义函数的两种方式:函数声明和函数表达式

    函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...

  4. js实现继承的五种方式

    function Parent(firstname) { this.fname=firstname; ; this.sayAge=function() { console.log(this.age); ...

  5. JS调用webservice的两种方式

    协议肯定是使用http协议,因为soap协议本身也是基于http协议.期中第二种方式:只有webservice3.5以后版本才可以成功 第一种方式:构造soap格式的body,注意加粗的黄色标识,比如 ...

  6. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

  7. js setTimeout 传递带参数的函数的2种方式

      js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...

  8. resize函数有五种插值算法

    转自http://blog.csdn.net/fengbingchun/article/details/17335477 最新版OpenCV2.4.7中,cv::resize函数有五种插值算法:最近邻 ...

  9. JS创建对象,数组,函数的三种方式

    害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象   var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...

随机推荐

  1. 20155320 2016-2017-2《Java程序设计》第十周学习总结

    20155320 2016-2017-2<Java程序设计>第十周学习总结 教材学习内容总结 本周学习目标 了解计算机网络基础 掌握Java Socket编程 理解混合密码系统 掌握Jav ...

  2. 考研编程练习----Prim算法的c语言实现

    本文引用自泽爷工作室http://www.zeyes.org/study/clang/189.html 算法思想: 1.在把生成树看成一个集合(开始集合为空,到各个结点的距离当然未知) 2.结点与集合 ...

  3. primary key和unique的区别

    定义了 UNIQUE 约束的字段中不能包含重复值,可以为一个或多个字段定义 UNIQUE 约束.因此,UNIQUE 即可以在字段级也可以在表级定义, 在 UNIQUED 约束的字段上可以包含空值.OR ...

  4. 简单的Slony-I设置实例 II

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页     回到顶级页面:PostgreSQL索引页 接前面例子, 简单的Slony-I设置实例 这次我 ...

  5. 【LOJ121】「离线可过」动态图连通性

    [LOJ121]「离线可过」动态图连通性 题面 LOJ 题解 线段树分治的经典应用 可以发现每个边出现的时间是一个区间 而我们每个询问是一个点 所以我们将所有边的区间打到一颗线段树上面去 询问每个叶子 ...

  6. Maven学习(十六)-----Maven存储库

    什么是Maven资源库? 在 Maven 术语里存储库是一个目录,即目录中保存所有项目的 jar 库,插件或任何其他项目特定文件,并可以容易由 Maven 使用. Maven库中有三种类型 local ...

  7. DDD实战成绩管理---需求分析

    需求的分析我们采用四色模型.从用户故事中找出MI,然后围绕MI找出其中的role,ppt,des.本次先对两个优先级最高的用户故事进行四色模型建模. 1.用户故事一建模:作为教务处老师,我要建立教学班 ...

  8. 添加jQuery方法解析url查询部分

    Web前端不同页面间传值可以使用 cookies.localStorage 和 sessionStorage 等本地存储. 但是,今天我们尝试使用 url 查询,假设我们要传递字符串 str 到 mo ...

  9. Appium+python的单元测试框架unittest(4)——断言(转)

    (原文:https://www.cnblogs.com/fancy0158/p/10051576.html) 在我们编写的测试用例中,测试步骤和预期结果是必不可少的.当我们运行测试用例时,得到一个运行 ...

  10. VS2013只显示会附加到进程,无法启动调试

    今天在使用VS2013的时候,打开突然发现,只显示附加到进程,无法进行调试,调试位置显示灰色,到网上各处寻求答案,本以为是个大问题,没想到只是个小问题.主要原因只是后台开太多东西了,导致VS2013运 ...