浅谈函数调用的不同方式,以及this的指向

发布时间 - 2026-01-11 03:16:56    点击率:

一、函数的调用方式

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的指向就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


# 函数调用方式  # 函数四种调用模式以及其中的this指向  # JavaScript中 this 指向问题深度解析  # JavaScript中的this引用(推荐)  # 老生常谈 js中this的指向  # javascript函数的四种调用模式  # 第一个  # 第二个  # 给大家  # 是一个  # 希望能  # 如果没有  # 作为一个  # 这篇  # 将此  # 指的是  # 用在  # 浅谈  # 多出  # 给它  # 回调  # 小编  # 大家多多  # 面向对象  # 过程中  # 也就是说 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Swift中switch语句区间和元组模式匹配  bootstrap日历插件datetimepicker使用方法  教你用AI润色文章,让你的文字表达更专业  如何在Windows 2008云服务器安全搭建网站?  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  如何在景安云服务器上绑定域名并配置虚拟主机?  如何自定义建站之星模板颜色并下载新样式?  佛山企业网站制作公司有哪些,沟通100网上服务官网?  零服务器AI建站解决方案:快速部署与云端平台低成本实践  Laravel storage目录权限问题_Laravel文件写入权限设置  微信小程序 HTTPS报错整理常见问题及解决方案  JS弹性运动实现方法分析  原生JS获取元素集合的子元素宽度实例  小视频制作网站有哪些,有什么看国内小视频的网站,求推荐?  如何在香港服务器上快速搭建免备案网站?  香港服务器租用每月最低只需15元?  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  5种Android数据存储方式汇总  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  如何在七牛云存储上搭建网站并设置自定义域名?  网站制作软件有哪些,制图软件有哪些?  香港网站服务器数量如何影响SEO优化效果?  Android自定义控件实现温度旋转按钮效果  详解阿里云nginx服务器多站点的配置  轻松掌握MySQL函数中的last_insert_id()  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  如何在宝塔面板创建新站点?  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的,背景音乐、音效等?  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Laravel如何为API生成Swagger或OpenAPI文档  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  LinuxCD持续部署教程_自动发布与回滚机制  浅谈redis在项目中的应用  小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像  JavaScript如何实现错误处理_try...catch如何捕获异常?  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  BootStrap整体框架之基础布局组件  如何为不同团队 ID 动态生成多个独立按钮  网站优化排名时,需要考虑哪些问题呢?  如何在阿里云服务器自主搭建网站?  zabbix利用python脚本发送报警邮件的方法  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  制作公司内部网站有哪些,内网如何建网站?  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Internet Explorer官网直接进入 IE浏览器在线体验版网址