浅谈函数调用的不同方式,以及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 相关文章推荐
js function使用心得
May 10 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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性能优化大全(php.ini)
2016/05/20 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
详解vue-cli3使用
2018/08/14 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python每天必学之bytes字节
2016/01/28 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Django密码系统实现过程详解
2019/07/19 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python绘制趋势图的示例
2020/09/17 Python
Python基于execjs运行js过程解析
2020/11/27 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
爱护花草树木的标语
2014/06/11 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
农村婚庆主持词
2015/06/29 职场文书
运动员入场前导词
2015/07/20 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Pandas-DataFrame知识点汇总
2022/03/16 Python
Python集合set()使用的方法详解
2022/03/18 Python