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入门教程(9) Document文档对象
Jan 31 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 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
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
发布你的Python模块详解
2016/09/15 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Python 串口通信的实现
2020/09/29 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
置业顾问岗位职责
2014/03/02 职场文书
浪费资源的建议书
2014/03/12 职场文书
网页美工求职信范文
2014/04/17 职场文书
李强优秀员工观后感
2015/06/16 职场文书
会计实训总结范文
2015/08/03 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript