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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
js全选按钮的实现方法
Nov 17 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
vuex存储token示例
Nov 11 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
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快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP分页类集锦
2014/11/18 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
django 创建过滤器的实例详解
2017/08/14 Python
python实现微信自动回复功能
2018/04/11 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
人力资源专业推荐信
2013/11/29 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
办公室岗位职责
2014/02/12 职场文书
纪检监察建议书
2014/05/19 职场文书
文明生主要事迹
2014/05/25 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014年少先队工作总结
2014/12/03 职场文书
干部年终考核评语
2015/01/04 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书