浅谈函数调用的不同方式,以及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 相关文章推荐
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
面试常见的js算法题
Mar 23 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
在vue组件中使用axios的方法
Mar 16 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
php中使用GD库做验证码
2016/03/31 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
require.js中的define函数详解
2017/07/10 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python 实现登录网页的操作方法
2018/05/11 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Django设置Postgresql的操作
2020/05/14 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
车间调度岗位职责
2013/11/30 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
天堂的孩子观后感
2015/06/11 职场文书
学校安全管理制度
2015/08/06 职场文书