浅谈函数调用的不同方式,以及this的指向


Posted in Javascript onSeptember 17, 2017

一、函数的调用方式

1.作为函数,一种直接易懂的方式(即函数调用模式)。

2.作为方法,方法是连接在对象上的,被这个对象调用,这种形式就是面向对象编程。

3.作为构造器,在构造的过程中一个新的对象被创建出来。

4.经由函数的apply或者call方法。

二、函数参数

1.传入参数

(1)传入变量多于函数定义变量。

(2)函数定义变量多余传入变量,多出来的变量是undefined

2.函数在被调用的时候,隐形的传入两个参数argument和this(即argument和this被悄悄传入函数,作用在函数的作用域中)。

(1)argument:函数调用时传入函数的变量集合(有arguemnt.length属性)

eg:argument[0]指的是传入函数的第一个参数

(2)this关联一个对象。

根据调用方式的不同,this的指向也不同。因此this为调用的上下文(invocation context)。

三、this的指向

1.函数调用模式 (this->window)

这个函数并不属于任何对象的属性。

function fn1(){
 //some code
}
fn1();
或着:
var fn2=function(){
 //some code
}
fn2();
使用这种方式调用函数,函数的上下文是全局上下文(global context即window)。this->window。

2.方法调用模式   (this->方法所属的对象)

这个函数是一个对象的属性,当这个函数被调用时,这个函数被视为这个对象的一个方法。

var obj={
 //some code;
};
obj.getname=function(){
 //some name
}
obj.getname();
函数的上下文是这个对象(例子中的 obj)。this->obj

3.构造器调用模式 (this->创建的新对象)

函数被作为构造器调用时有以下特点:

一个新的对象被创建出来;

这个新的对象被传递给这个构造器作为this参数,也就是说这个新的对象是构造器函数的上下文;

如果没有显性的return语句,这个新的对象会被隐式的return(就是悄咪咪的被return了),并成为这个构造器的值。

function Fn(){
 this.a=function(){
   return this;
 }
}
var n=new Fn();
console.log(n.a());//Fn{a:f}
console.log(n);//fn{a:f}
//此例中,构造了一个构造函数Fn((),利用new关键字调用时一个空的对象被创建出来,并传递到函数中作为this存在。this-Fn(新的)
//这个构造器同时创建了a属性,并将此属性作为一个方法赋予给它创建出新对象的实例。

4.apply()获得call()方法  (this->可以是我们指定的任何对象)

(1)apply(),两个参数。第一个参数:用于作为函数上下文的对象。第二个参数:一个参数数组。

(2)call(),两个参数。第一个参数:用于作为函数上下文的对象。第二个参数:argument list。

call()和apply()多用于函数回调。

function circle(list,calback){
 for(var i=0;i<list.length;i++){
   calback.call(list[i],i);
 }
}
var list=['a','b','c'];
circle(list,function(index){
 console.log(index);//0,1,2(即传进来的i值)
 console.log(this);//a,b,c(call的第一个参数)
});
//this->call()传递进来的第一个参数。

以上这篇浅谈函数调用的不同方式,以及this的指向就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
js控制frameSet示例
Sep 10 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
JS分页的实现(同步与异步)
Sep 16 #Javascript
You might like
基于mysql的论坛(6)
2006/10/09 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue监听dom大小改变案例
2020/07/29 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python如何输出反斜杠
2020/06/18 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
爱游人:Travelliker
2017/09/05 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
策划主管的工作职责
2013/11/24 职场文书
鉴定评语大全
2014/05/05 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js