浅谈函数调用的不同方式,以及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日期处理函数
Oct 16 Javascript
JS字符串截取函数实例
Dec 27 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 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程序员的技术瓶颈分析
2011/07/17 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
北京大学自荐信范文
2014/01/28 职场文书
四风存在的原因分析
2014/02/11 职场文书
任命书格式
2014/06/05 职场文书
五一劳动节活动总结
2015/02/09 职场文书
信访工作个人总结
2015/03/03 职场文书
原告代理词范文
2015/05/25 职场文书
2016猴年春节问候语
2015/11/11 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python