浅谈函数调用的不同方式,以及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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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 采集程序原理分析篇
2010/03/05 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
js实现简单模态框实例
2018/11/16 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python线程创建和终止实例代码
2018/01/20 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python装饰器的特性原理详解
2019/12/25 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
股东授权委托书
2014/10/15 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
公司回复函格式
2015/07/14 职场文书
结婚主持人致辞
2015/07/28 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android