浅谈函数调用的不同方式,以及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 清除输入框中的数据
Apr 13 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
如何用Python实现简单的Markdown转换器
2018/07/16 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
测绘工程系学生的自我评价
2013/11/30 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
教师个人教学总结
2015/02/11 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript