浅谈函数调用的不同方式,以及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 相关文章推荐
在javascript中对于DOM的加强
Apr 11 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
PHP一些有意思的小区别
2006/12/06 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python批量转换文件编码格式
2015/05/17 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python实现多张图片拼接成大图
2019/01/15 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
学年自我鉴定范文
2013/10/01 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
优秀学生评语大全
2014/04/25 职场文书
中学清明节活动总结
2014/07/04 职场文书
志愿者工作心得体会
2016/01/15 职场文书