浅谈函数调用的不同方式,以及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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
简历的自荐信
2013/12/19 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
辞职信范文大全
2015/03/02 职场文书
七年级生物教学反思
2016/02/20 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书