浅谈函数调用的不同方式,以及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 相关文章推荐
二级域名转向类
Nov 09 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
js实现石头剪刀布游戏
Oct 11 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python3大文件解压和基本操作
2017/12/15 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
yy生日主持词
2014/03/20 职场文书
消防标语大全
2014/06/07 职场文书
公民授权委托书范本
2014/09/17 职场文书
企业法人代表证明书
2014/09/27 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
python实现简单的井字棋
2021/05/26 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers