资讯专栏INFORMATION COLUMN

this的指向(简单描述版)

tracy / 1069人阅读

摘要:的指向简单描述版函数的调用在的面向对象中是表示函数调用相关联的对象函数的上下文。结语关于的指向是前端面试中经常出现的问题,以上只是暂时简短总结了一下结果而已,后面会对各个函数调用的方式进行深入解析。

this的指向(简单描述版) 函数的调用
在JS的面向对象中this是表示函数调用相关联的对象(函数的上下文)。所以要想了解this的指向,我们先要清楚函数的调用的方式

1.作为函数调用

function add(a,b) {
    return a + b;
}

add(1,2);

以上代码就是函数作为函数直接被调用,那么在这种情况下,函数上下文(this)就有两种可能性质

在浏览器环境中,this指向了window对象

在严格模式下将会是undefined

2.作为方法被调用

var method = {};
method.add = function () {};
method.add();

当一个函数被赋值给一个对象属性,并且通过对象属性引用的方式时候,函数就会被作为对象的方法被调用。那么在这种情况下,this指向的就是引用该方法的宿主对象

3.作为构造函数调用

let person = new Person();

在使用new的时候会有如下动作

创建一个新对象

该对象作为this参数传递给构造函数,成为构造函数的上下文

新构造函数对象作为new的返回值

4.使用call,apply方法调用

function arguNum() {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }

    this.result = result;
}

var obj1 = {};
var obj2 = {};

arguNum.apply(obj1, [1,2,3]);  // 6
arguNum.call(obj2, 1,2,3);  // 6

使用call,apply可以改变this的指向,call&apply区别在于传递的参数是通过什么方式,call传递的是参数列表,apply传递的是一个数组。

结语

关于this的指向是前端面试中经常出现的问题,以上只是暂时简短总结了一下结果而已,后面会对各个函数调用的方式进行深入解析。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100409.html

相关文章

  • 【Vue原理】依赖收集 - 源码之基本数据类型

    摘要:当东西发售时,就会打你的电话通知你,让你来领取完成更新。其中涉及的几个步骤,按上面的例子来转化一下你买东西,就是你要使用数据你把电话给老板,电话就是你的,用于通知老板记下电话在电话本,就是把保存在中。剩下的步骤属于依赖更新 写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 【...

    VincentFF 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<