浅谈函数调用的不同方式,以及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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
什么是短波收听SWL
2021/03/01 无线电
php字符串截取问题
2006/11/28 PHP
PHP中ADODB类详解
2008/03/25 PHP
php 过滤器实现代码
2010/08/09 PHP
php URL验证正则表达式
2011/07/19 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
信息总监管理职责范本
2014/03/08 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
房产证明范本
2015/06/19 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书