javascript函数的四种调用模式


Posted in Javascript onJanuary 08, 2017

1、介绍

先介绍一下函数的调用模式有哪四种:

  •  函数调用模式,
  •  方法调用模式,
  •  构造函数调用模式,
  •  上下文调用模式;

在这里对于函数的调用模式,主要介绍每种调用模式的this的指向和返回值。

2、代码分析

①、函数调用模式

下面的调用模式就是大家最熟悉的函数调用模式,而函数调用模式的this指向和返回值是什么呢?

function fn1 () {
 console.log(this); 
};
fn1(); // 在调用函数fn1时,输出的this的结果是Window

在上述代码中,fn1也就是函数调用模式中的this是指向Window的,而返回值是由return决定。

可以得出以下结论(函数调用模式中):

  a, this是指向Window的 

  b, 返回值是由return语句决定的,如果没有return则表示没有返回值

②、方法调用模式

var name = "james";
var obj = {
  name : "wade",
 fn1 : function () {
  console.log(this.name);
 }  
};
obj.fn1(); // 在调用obj中的fn1方法函数时,输出的是wade

通过上面的代码结果分析,会得到以下结论(方法调用模式中):

  a, this 是指向调用该方法的对象

  b, 返回值还是由return语句决定,如果没有return表示没有返回值

③、构造函数调用模式

function Fn () {
 this.name = "james",
 this.age = 32,
 console.log(this)   
};
var fn1 = new Fn();// 在调用这段代码的时候,输出的是Fn {name: "james", age: 32}

通过上面的代码结果分析,会得到以下结论(构造函数调用模式中):

  a, this是指向构造函数的实例

  b, 如果没有添加返回值的话,默认的返回值是this

但是如果手动添加返回值之后呢

function Fn1 () {
 this.name = "james";
 return "wade" 
};
var fn1 = new Fn1();
console.log(fn1.name); // 这段代码输出的是 james;
function Fn2 () {
 this.name = "james";
 return [1,2,3]; 
};
var fn2 = new Fn2();
console.log(fn2.name); // 而这段代码输出的是undefined

而通过上面的代码结果分析,优化上面的结论:

  a, this是指向构造函数的实例

  b, 如果没有添加返回值的话,默认的返回值是this

  c, 如果有返回值,且返回值是简单数据类型(Number,String,Boolean··)的话,最后仍回返回this

  d, 如果有返回值,且返回值是复杂数据类型(对象)的话,最终返回该对象,所以上面的fn2是指向数组,所以fn2.name为undefined

④、上下文调用模式

function f1(){
 console.log(this);
}
f1.call(null); // Window
f1.call(undefined); // Window
f1.call(123); // Number的实例
f1.call("abc"); // String的实例
f1.call(true); // Boolean的实例
f1.call([1,2,3]); // Array的实例

通过上面的代码结果分析,得出以下结论(上下文调用模式中):

  a, 传递的参数不同,this的指向不同,this会指向传入参数的数据类型

  b, 返回值是由return决定,如果没有return表示没有返回值。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 #Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 #Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 #Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 #Javascript
JS实现iframe自适应高度的方法示例
Jan 07 #Javascript
JS小数转换为整数的方法分析
Jan 07 #Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
JS中Attr的用法详解
2017/10/09 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python开发的HTTP库requests详解
2017/08/29 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python 类的特殊成员解析
2018/06/20 Python
python实现简单颜色识别程序
2020/02/19 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
如何手工释放资源
2013/12/15 面试题
学生自我鉴定范文
2013/10/04 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
机关搬迁方案
2014/05/18 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
国庆横幅标语
2014/10/08 职场文书
成绩单评语
2015/01/04 职场文书
葬礼主持词
2015/07/02 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python