浅谈函数调用的不同方式,以及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 数值项目的格式化函数代码
May 14 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
详解React中的组件通信问题
Jul 31 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
基于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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php四种定界符详解
2017/02/16 PHP
详解PHP PDO简单教程
2019/05/28 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
说明书范文
2014/05/07 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
Python基础之元类详解
2021/04/29 Python