捉摸不透的this到底是什么？

psychola 发布于2019-08-26 10:40 / 1584人阅读

摘要：前言中的重中之重，也是在面试中被问得最多的问题，在这里到底是什么我也时常疑惑于此，特用此文来整理思路理解并方便日后回顾。是什么看调用并转换例子是看调用，是全局定义函数，挂载在对象上，所以是。

前言

JS中的重中之重，也是在面试中被问得最多的问题，在这里this到底是什么？我也时常疑惑于此，特用此文来整理思路理解并方便日后回顾。

函数的调用

JS（ES5）里面有三种函数调用形式：

func(p1, p2) //等价于func.call(undefined, p1, p2)
obj.child.method(p1, p2) //等价于obj.child.method.call(obj.child, p1, p2)
func.call(context, p1, p2)

把所有的调用转换成call的形式后，this指的就是call后面的第一个参数。
特别注意，全局定义的函数转换成call的形式后，虽然第一个参数为undefined，但是由于全局定义的函数都是挂载到window/global对象上的，所以this会指向window/global。

this是什么？

看调用并转换

例子1

 function showName(){
     console.log(this); //this是window
 }
showName();//showName.call(undefined)

看调用，showName是全局定义函数，挂载在window对象上，所以this是window。

例子2

var name="hello window!";
function testName () {
    var name="hello this!";
    console.log(this.name);
}
testName();//testName.call(undefined)

为什么log出来的不是"hello this!"而是"hello window!"呢？
同样，testName也是挂载在window上的，所以testName函数在调用时this是window，
所以打出来的自然是window.name，也就是全局变量name的值"hello window!"而不是"hello this!"。

例子3

var obj={
    a:"哈哈哈",
    b:function(){
        var a="嘿嘿嘿";
        console.log(this.a);//"哈哈哈"
    }
};
obj.b();//obj.b.call(obj)

那么以上代码为什么会打出"哈哈哈"呢？
显然，这里的this是指obj，也就是会去找obj.a，所以打出的就是"哈哈哈"啦。

总结

fn()            this=>window/global
obj.fn()        this=>obj
fn.call(xxx)    this=>xxx
fn.apply(xxx)   this=>xxx
fn.bind(xxx)    this=>xxx
new Fn()        this=>新的对象
fn = () =>{}    this=>外面的this

方法：
1.看源码中对应的函数是怎么被 call 的（这是最靠谱的办法）
2.看文档
3.console.log(this)

云服务器 GPU云服务器前端到底是什么云计算到底是什么 python到底是什么 php到底是什么

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

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

令人捉摸不透的云计算:像雾像雨又像风

摘要：据预测，到年，大多数的企业应用将被迁移到云中。在云计算的雾期更需要对云计算产业有一个清醒的认识，不要在最后随着雾散去自己也随雾而去。从概念开始逐渐转为应用落地，各企业纷纷加入到云计算浪潮，国家也在大力扶植云计算产业。据预测，到2020年，大多数的企业应用将被迁移到云中。与此同时，越来越多的应用开发商也将把应用开发、测试平台迁移到云中。　　　　专家表示，以云计算为代表的新型计算机模式未来将成...

VishKozus 2019-04-25 16:49 评论0 收藏0
JavaScript 的This绑定方式导图

摘要：本文是对加深对的理解一文的导图版翻译中的是一个捉摸不透的东西，它很喜欢变化，很诡异。写在后面的几种绑定规则，归根结底，的套路就是关于几种模式的等价变换形式，知乎上面有大神解答，猛戳这最后是全图附上思维导图的下载链接去有道云笔记下载本文是对《加深对 JavaScript This 的理解》一文的导图版翻译 JS中的this是一个捉摸不透的东西，它很喜欢变化，很诡异。拥抱变化，接收诡异...

lbool 2019-08-20 18:05 评论0 收藏0
再记面向对象

摘要：实例对象与构造函数的原型联系是在创建实例时确定的，当创建后更改原型对象并不改变之前创建的实例所关联的原型对象，新创建的使用新的原型对象。再记面向对象函数和对象的联系先理一下函数的功能：创建：可以通过字面量创建可以赋值给变量、数组作为成员和其他的对象作为属性作为函数的参数作为返回值自身可以添加属性在上面列出的函数功能对象皆具有详细函数介绍为什么介绍函数？因为闭...

mochixuan 2019-08-22 16:28 评论0 收藏0
javascript的this的理解

摘要：的关键字总是让人捉摸不透，关键字代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，因为函数的调用场景不同，的指向也不同。其实只要理解语言的特性就很好理解。个人对中的关键字的理解如上，如有不正，望指正，谢谢。 javascript的this关键字总是让人捉摸不透，this关键字代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，因为函数的调用场景不同，this的指向也不...

jimhs 2019-08-21 10:56 评论0 收藏0
现代JS名词概念系列——函数的纯洁性【龟速翻译】

摘要：原文函数的纯洁性纯函数非纯函数副作用纯函数一个函数返回的值只取决于他输入的值，并且没有副作用，那这个函数就是纯函数。因此，纯函数无法对它的父作用域作出任何修改。更多关于函数纯洁性的资料原文：Glossary of Modern JavaScript Concepts: Part 1 函数的纯洁性：纯函数、非纯函数、副作用纯函数一个函数返回的值只取决于他输入的值，并且没有副作用，那...

you_De 2019-08-21 16:42 评论0 收藏0