zoukankan      html  css  js  c++  java
  • 第196天:js---调用函数的五种方式

    一、普通方式

    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调用模式

    上篇中详细讲解了。

  • 相关阅读:
    java+selenium 3.x的火狐自动化测试环境
    Jmeter+badboy环境搭建
    Linux环境下搭建Tomcat+mysql+jdk环境
    线程池的配置说明
    关于事务的使用规范
    生产事故 java.lang.OutOfMemoryError: GC overhead limit exceeded
    linux检查网络运行情况命令
    百万数据迁移的线程分组
    XML报文拼接 乱码
    创建数据源、连接数据库
  • 原文地址:https://www.cnblogs.com/le220/p/8543574.html
Copyright © 2011-2022 走看看