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 相关文章推荐
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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 date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
基于python实现微信模板消息
2015/12/21 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
毕业生文员求职信
2013/11/03 职场文书
晚归检讨书
2014/02/19 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
表扬信格式模板
2015/05/05 职场文书
二十年同学聚会感言
2015/07/30 职场文书
《包身工》教学反思
2016/02/23 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python