函数调用的不同方式及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;icall()传递进来的第一个参数。

登录后复制

相关推荐:

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

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

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

以上就是函数调用的不同方式及this的指向详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787271.html

(0)
上一篇 2025年3月8日 18:05:17
下一篇 2025年2月28日 12:13:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 4种Vue组件通信方式实例分享

    本文主要和大家分享4种vue组件通信方式:父子组件的通信、非父子组件的eventbus通信、利用本地缓存实现组件通信、vuex通信。希望能帮助到大家。 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.imp…

    编程技术 2025年3月8日
    200
  • JS中的this、apply、call、bind实例分享

    this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调…

    编程技术 2025年3月8日
    200
  • JavaScript中的this规则及this对象用法实例

    想要确定this里规则是什么,几条规则确定函数里的 this 是什么。想确定 this 是什么其实非常简单。总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this。它遵循下面这些规则,接下来以优先级顺序说明。 规则 1、如果…

    编程技术 2025年3月8日
    200
  • javascript函数中的this的四种绑定形式

    一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最核心的一点——函数中的this总指向调用它的对象,接下来的故事都将围绕这一点展开。 【故事】有一个年轻人叫”迪斯”(this),有一天,迪斯不小心穿…

    2025年3月8日 编程技术
    200
  • javascript闭包 var that=this详解

    速览 var f1 = function(){ var a = 999; nAdd = function(){n+=1} //没有var,nAdd是全局变量 f2 = function(){ alert(a) } return f2;}va…

    编程技术 2025年3月8日
    200
  • 四种JS中this取值模式

    本文主要和大家分享JS中this取值的四种模式,希望能帮助到大家。 一、函数简介 在javascript中每一个函数的内部,除了声明时定义的形式参数外,每个函数还附加了两个参数:this 和 arguments。 参数arguments是一…

    编程技术 2025年3月8日
    200
  • ES6箭头函数中的this应该如何使用

    这次给大家带来es6箭头函数中的this应该如何使用,es6箭头函数中的this的使用注意事项有哪些,下面就是实战案例,一起来看一下。 简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函…

    编程技术 2025年3月8日
    200
  • 5种js实现继承的方式实例分享

    本文主要和大家分享5种js实现继承的方式实例分享,希望能帮助大家更好掌握js继承方式的实现。 1、继承第一种方式:对象冒充 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2…

    编程技术 2025年3月8日
    200
  • ES6箭头函数中的this问题解答

    箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。 (1)一般函数this指向在执行是绑定  当运行obj.say()时候,thi…

    编程技术 2025年3月8日
    200
  • Vue中this.$router.push参数如何获取

    1.params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论