黑马程序员技术交流社区
标题: 【武汉校区】JavaScript函数四种调用模式详解 [打印本页]
作者: 武汉分校-小舞 时间: 2017-4-17 10:36
标题: 【武汉校区】JavaScript函数四种调用模式详解
JavaScript函数四种调用模式详解
如遇问题可联系武汉校区
更多学习资源等着你哦~
函数总共有四种调用模式，分别为 函数调用模式、方法调用模式、构造器调用模式、上下文调用模式。这里主要给大家介绍一下四种模式的语法以及其中比较难理解的this指向问题。
函数模式调用语法:函数名(参数)
特例:任何自调用函数(立即执行函数)都是函数模式
// 自调用函数
(function () {
console.log(this);
})();
方法模式调用概念: 方法本身就是函数,但是方法不是单独独立的调用,而是通过一个对象引导调用
语法: 对象.方法名(参数)
var o = {};
o.fn = function () {
console.log(this);
};
o.fn();
方法模式调用下的this:方法模式调用下的this就是引导调用该方法的对象。
注意：方法调用一定要有宿主对象。方法一定是某个对象的方法,此对象可以是任何对象。
构造器模式调用语法: 使用new关键字引导
[hide=d365]function Person() {
this.name = 'zs';
this.age = 18;
this.gender = '男'
};[/hide]
// 构造器模式调用
var p = new Person();
返回值:
1、如果不写return语句,那么 构造函数 默认返回this
2、如果构造函数中写上return,并紧跟基本类型,则忽略基本类型数据,返回this
上下文模式上下文调用模式分为两种:call调用 和apply调用 以及bind 绑定式调用
apply形式语法:函数名.apply(参数)
[hide=d365]function foo() {
console.log(this);
}
var o = { name: 'zs' };[/hide]
// 如果需要让函数以函数模式调用, 可以使用
foo.apply(null) 或 foo.apply()
// 如果希望方法模式调用, 需要提供一个宿主对象
foo.apply(o);
使用 apply 进行调用,如果函数是带有参数的. apply 的第一个参数要么是null 要么是对象
如果是 null 就是函数调用, 如果是 对象就是 方法调用, 该对象就是宿主对象. 后面紧跟一个数组参数, 将函数的参数依次放在数组中.
function foo(num1, num2) {
console.log(this);
return num1 + num2;
}
// 函数调用模式
// var res1 = foo( 123, 567 );
// 方法调用
var o = { name: 'jim' };
// o.func = foo;
// var res2 = o.func( 123, 567 );
// 改写成 apply 形式
var res1 = foo.apply(null, [123, 567]); // 函数调用
var res2 = foo.apply(o, [123, 567]); // 方法调用
call形式使用 call 进行调用,如果函数是带有参数的. call 的第一个参数要么是 null要么是对象
如果是 null 就是函数调用, 如果是 对象就是 方法调用, 该对象就是宿主对象. 后面紧跟一个函数的所有参数,使用逗号分隔(和apply功能一模一样,唯一区别就是传参形式不同)
function foo(num1, num2) {
console.log(this);
return num1 + num2;
}
var o = { name: 'jim' };
// 改写成 call 形式
var res1 = foo.call(null, 123, 567); // 函数调用
var res2 = foo.apply(o, 123, 567); // 方法调用
bind绑定对象实现方法调用[hide=d365]function fn() {
console.log(this);
};
var o = {
name: 'zs',
};[/hide]
var f = fn.bind(o); // 给函数fn绑定了对象
f(); // 虽然是函数调用模式,但是打印的this是绑定的对象,实现了函数的方法调用模式
四种模式this指向
[hide=d365]对于函数的上下文调用模式在JavaScript核心代码中使用的非常频繁，这里面比较难理解的就是各种调用的情况下this的指向。只要使用了call和apply调用函数 ，那么函数内部的this 就指向 这两个方法的第一个参数，如果第一个参数没传或者传的是null，那么this指向window。对于bind ，就是绑定一个对象到函数执行上下文环境中，所以使用过bind的函数 ，那么this永远指向 绑定的这个对象，即使是再次使用call和apply也无法改变this的指向了。
另外，对于其他的三种函数调用模式，this指向也是有规律可循，函数调用模式下 this 指向的是window，方法调用模式下 this 指向 调用该方法的对象，而构造器模式调用（即使用new关键字）this默认指向new出来的对象。[/hide]
作者: 武汉分校-小舞 时间: 2017-4-23 21:56
居然没有人抢沙发？
作者: 瑞-瑞 时间: 2017-5-26 01:21
感谢楼主
作者: 20129827 时间: 2017-5-30 22:49
感谢分享
作者: dashen_sq 时间: 2017-6-12 15:32
函数调用模式函数调用模式
作者: 今天吃什么 时间: 2017-6-23 14:10
紫薯布丁。。
作者: arthur_yang 时间: 2017-7-6 10:29
新手学习中1111111111
作者: 111cctv19 时间: 2017-8-15 14:19
主要是影响变量提升的问题
作者: trxic 时间: 2017-8-16 20:10
顶起 支持一下
作者: 城里俊男多 时间: 2017-9-7 08:03
函数调用模式函数调用模式
作者: 向上、 时间: 2017-9-9 15:28
1234567891011
作者: 大Z 时间: 2017-9-9 21:40
666666666666
作者: seeooo 时间: 2017-10-4 20:38
谢谢分享
作者: shen7963 时间: 2017-10-10 14:45
看看怎么样
作者: 天道轮回 时间: 2017-10-11 09:46
有哪个新手来着抢沙发的,都去html了.
作者: keke12300 时间: 2017-10-21 15:37
看一看，多了解一下，感谢
作者: newu 时间: 2017-10-21 22:13
谢谢分享,楼主厉害，支持楼主
作者: whhwhh 时间: 2017-12-1 17:00
好。。。。。。。。。。。。。
作者: baohan666 时间: 2017-12-18 15:37
googogooggooe
作者: axiaomo 时间: 2017-12-19 03:09
村上春树村上春树村上春树村上春树
作者: 塔山小将 时间: 2017-12-23 14:32
henhaoyong bucuo
作者: wqfkcqqkcg 时间: 2017-12-23 15:05
老师您好！我要学习资料谢谢！
作者: 孝宇兄 时间: 2017-12-29 21:06
感谢分享
作者: andylz 时间: 2017-12-31 21:39
好人一生平安
作者: andylz 时间: 2017-12-31 21:45
好人一生平安
作者: 赵宁宁 时间: 2018-1-2 11:09
想看影藏内容，巴啦啦小魔仙呀！！
作者: guo_ 时间: 2018-1-7 09:05
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
作者: wowandy 时间: 2018-1-8 20:31
6666666666666666
作者: 六度Zero 时间: 2018-1-9 18:54
111111111111
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
