首页 web前端 js教程 函数调用的不同方式及this的指向详解

函数调用的不同方式及this的指向详解

Feb 06, 2018 am 09:22 AM
this 不同 方式

一、函数的调用方式

1.作为函数,一种直接易懂的方式(即函数调用模式)。

2.作为方法,方法是连接在对象上的,被这个对象调用,这种形式就是面向对象编程。

3.作为构造器,在构造的过程中一个新的对象被创建出来。

4.经由函数的apply或者call方法。

本文主要为大家带来一篇浅谈函数调用的不同方式,以及this的指向。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

二、函数参数

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=[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
circle(list,function(index){
 console.log(index);//0,1,2(即传进来的i值)
 console.log(this);//a,b,c(call的第一个参数)
});
//this->call()传递进来的第一个参数。
登录后复制

相关推荐:

mysqli批量执行多条语句和一次函数调用执行多条语句方法

微信小程序Page中data数据操作和函数调用详解

如何解决js父级函数调用子函数出现函数未定义问题

以上是函数调用的不同方式及this的指向详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

有哪些不同的计算机语言? 有哪些不同的计算机语言? Aug 28, 2023 pm 02:25 PM

编程语言用来以计算机可以理解的语言给计算机发出指令。计算机语言分为三种类型,如下所示:机器语言符号语言高级语言机器语言计算机是一台机器。由于它的内存只能存储1和0,必须以一串1和0的流的形式给计算机发出指令,即二进制代码。这些对机器来说很容易理解。以二进制代码编写的程序可以直接输入计算机执行,这被称为机器语言。机器语言的优点包括:执行速度非常快。很难编写和阅读机器语言的程序。机器指令很难记住。符号语言也称为汇编语言。汇编程序包含“助记符”。“助记符”是指以缩写的形式很容易记住的信息。符号语言的优

Go 语言中的时间处理方式有哪些? Go 语言中的时间处理方式有哪些? Jun 10, 2023 pm 09:42 PM

Go语言作为一个现代化的编程语言,时间在开发中占有很重要的位置。Go语言提供了一些内置的时间函数和结构体,使得时间的处理变得更加便捷。在本篇文章中,将会介绍一些Go语言中常用的时间处理方式。time.Now()我们可以使用time.Now()函数获取当前的时间:now:=time.Now()fmt.Println(now)输出:2019-06-131

一篇搞懂this指向,赶超70%的前端人 一篇搞懂this指向,赶超70%的前端人 Sep 06, 2022 pm 05:03 PM

同事因为this指向的问题卡住的bug,vue2的this指向问题,使用了箭头函数,导致拿不到对应的props。当我给他介绍的时候他竟然不知道,随后也刻意的看了一下前端交流群,至今最起码还有70%以上的前端程序员搞不明白,今天给大家分享一下this指向,如果啥都没学会,请给我一个大嘴巴子。

聊聊Vue2为什么能通过this访问各种选项中属性 聊聊Vue2为什么能通过this访问各种选项中属性 Dec 08, 2022 pm 08:22 PM

本篇文章带大家解读vue源码,来介绍一下Vue2中为什么可以使用 this 访问各种选项中的属性,希望对大家有所帮助!

如何删除 Chrome 地址栏中不需要的网址? 如何删除 Chrome 地址栏中不需要的网址? Mar 08, 2024 am 09:19 AM

Chrome会自动在地址栏中记录曾经输入过的网址,并且会在未来自动“联想查询内容”,但很多时候我们并不需要一些网址,如何删掉它们呢?小编经常遇到这样的困扰,曾经输入过的地址,会挡在常用地址的前面,导致需要选好几次才能进入需要的网站。为此我也找过至少3次如何删除了,因为…每次都会忘记。在Chrome官方帮助Chrome键盘快捷键的地址栏快捷键中,就明确了删除快捷键:▍Windows删除地址栏联想内容按向下箭头键以突出显示相应内容,然后按Shift+Delete键▍macOS删除地址栏联想内容按向下

win10输入法怎么删除win10输入法怎么删除方式详细介绍 win10输入法怎么删除win10输入法怎么删除方式详细介绍 Jul 07, 2023 pm 05:33 PM

win10输入法对比前边的好多个系统版本而言进步很大,且有许多十分有用的作用,总体应用下去也特别的流通,有着记忆力键入的作用,但是有些客户已经有了自身良好习惯的输入法了,要想删除内置的win10输入法,那样win10输入法怎么删除呢,今天就告诉大家关于win10输入法怎么删除方式详细介绍的具体内容。win10输入法怎么删除1、按【Win i】开启设置界面,点击在其中的“时间和语言”选项。2、点击“地区和言语”,在右边点击“汉语”下的“选项”按键。3、点击“微软拼音字母”选项便会发生“删除”按键,

对比link和import:它们有哪些差异? 对比link和import:它们有哪些差异? Jan 06, 2024 pm 08:23 PM

link与import之争:它们有何不同之处?在开发和编程中,我们经常需要与其他文件或模块进行交互。为了实现这种交互,链接(linking)和导入(importing)是两种常用的方式。然而,许多人可能并不清楚link和import有什么不同之处以及何时使用它们。本文将详细介绍link和import的区别,并提供代码示例。首先,我们来了解link的概念。链接

jQuery与CSS3动画功能有何不同?优劣对比 jQuery与CSS3动画功能有何不同?优劣对比 Sep 08, 2023 am 10:00 AM

jQuery与CSS3动画功能有何不同?优劣对比引言:如今,网页设计已经越来越注重用户体验。而动画效果作为增强用户体验的重要手段之一,在网页设计中扮演着重要角色。在实现动画效果的过程中,开发者面临着选择使用jQuery还是CSS3动画的问题。本文将对两者进行对比分析,探讨其优劣之处,并为读者提供相关代码示例。一、jQuery动画:jQuery是一款功能强大的

See all articles