浅谈函数调用的不同方式,以及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 parseInt与Number函数的区别
Jan 21 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
Javascript缓存API
Jun 14 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
jquery图片放大镜效果
Jun 23 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
JavaScript箭头函数中的this详解
Jun 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
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python流程控制常用工具详解
2020/02/24 Python
Python requests模块session代码实例
2020/04/14 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python解释器安装教程的方法步骤
2020/07/02 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
考博专家推荐信模板
2013/12/02 职场文书
学生爱国演讲稿
2014/01/14 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
听课评语大全
2014/04/30 职场文书
商场周年庆活动方案
2014/08/19 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
乱世佳人观后感
2015/06/08 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书