开发者社区> 半指温柔乐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

第196天:js---调用函数的五种方式

简介: 一、普通方式 1 /*普通模式*/ 2 3 // 声明一个函数,并调用 4 function func() { 5 console.log("Hello World"); 6 } 7 func(); 二、函数表达式 1 /*函数表达式*/ ...
+关注继续查看

一、普通方式

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

上篇中详细讲解了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS基础-函数
简单应用,通过key获得value set()新增或修改 delete()删除
5 0
Java虚拟机基础
Java虚拟机基础
49 0
Java基础-锁Lock
ReentrantLock构造方法(不带参数 和带参数 true: 公平锁; false: 非公平锁)
54 0
利用函数指针实现C的回调函数,实现调用者和底层驱动的解耦 第二种方式
利用函数指针实现C的回调函数,实现调用者和底层驱动的解耦 第二种方式
64 0
Java虚拟机的Heap监狱
在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。
968 0
特步CIO唐坤军:特步上云,最难的地方是组织流程的调整
2016年的特步,有了更长足的发展。亮眼成绩的背后,是特步拥抱云计算、大数据等新技术的结果。使用阿里云AliWare,不仅让特步建成“五统一”的共享中心,还让特步实现线上和线下相互配合和支持,给用户带来最好的体验。
5975 0
Java虚拟机基础
static String str0 = "0123456789"; static String str1 = "0123456789"; String str2 = str1.substring(5); String str3 = new String(str2); String str4 =
1207 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS 语言在引擎级别的执行过程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载