浅谈函数调用的不同方式,以及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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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实现memcache缓存示例讲解
2013/12/04 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python实现文本文件合并
2015/12/29 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python range实例用法分享
2020/02/06 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python新手学习可变和不可变对象
2020/06/11 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
英文求职信结束语大全
2013/10/26 职场文书
酒店端午节促销方案
2014/02/18 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
计划生育个人总结
2015/03/02 职场文书