【this】谈一下js中this的指向和箭头函数的特殊情况

csRyan 发布于2019-08-26 13:25 / 2506人阅读

摘要：的指向一直都是理解中比较困难的部分，这次把遇见的情况都展示出来另外新增的箭头函数不属于这个规律，特殊看待。

this的指向一直都是js理解中比较困难的部分，这次把遇见的情况都展示出来；另外ES6新增的箭头函数不属于这个规律，特殊看待。

this的指向大致分为以下几种情况

1.普通函数 --- this指向函数的调用对象

function f() {  
    var user = "XX";  
    console.log(this.user);  //undefined
    console.log(this);  //window
}

f();

这里f 的调用等同于window.f(); 所以f函数内部this指向的是window

2.对象方法中调用 ---- this 指向上级对象

var obj = {
    user:"xxx",
    fn:function(){
        console.log(this.user);  //xxx
    }
}
obj.fn();

【注1】这里要注意一点，就是在对象中可能有多层嵌套的对象，但是this指向的都是他调用地方的上级对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // bbb
        }
    }
    
}
obj.b.fn();

如上，虽然是在obj里面this调用，但是因为是在obj.b这个对象中，所以this指向的是 obj.b

【注2】注意不能只看上级对象，更关键的是调用对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // undefined
        }
    }
    
}
var f = obj.b.fn;
f()

如上，this其实是在f执行的时候调用的，这时候，f的this的调用对象是window,那么就可以理解window.user为undefined

【小结】在对象方法中的this的指向主要是看他最终调用的位置，它是由谁调用的，如果调用对象有多层，this指向的是this的上级对象

3.构造函数 --- this指向new出来的对象

function Fn(){
    this.user = "xxx;
}
var a = new Fn();
console.log(a.user); //xxx

new 的过程其实也是初始化了一个新的对象，然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。

4.apply, call, bind 通过改变函数的调用对象而改变this的指向

function foo() {
  console.log("id:", this.id);  //42
}

var id = 21;

foo.call({ id: 42 });   //foo函数的调用对象变成了 {id: 42},所以this指向发生了变化

5.箭头函数this的指向 ---- this指向其定义时候的对象

图1：箭头函数，this指向定义时候的对象，foo在window作用域下，所以this指向window; ===> 箭头函数的外层，foo函数的this就是window对象

图2：箭头函数，this指向定义时对象，那么由于foo.call 此时定义时候this指向了{ id: 42}对象，所以这里id输出的是42；====> 箭头函数的外层，foo函数的this就是{ id: 42} 对象

【小结】箭头函数的this在定义时所在的对象，其实质是因为箭头函数没有自己的this,用的是外层的this

【结尾】普通函数的this是看的是它执行时候的调用对象; 箭头函数的this与它的执行没有关系，在定义的时候就决定了；

混合云云服务器 this的指向 js里面的this 改变this指向 this的用法

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

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

浅谈箭头函数

摘要：来看看箭头函数的情况可以发现在定时器这个匿名函数作用域里，所指向的对象，就是定义时所指的对象。对于构造函数来说，它就是的实例。如下据此，总结箭头函数的三个优点语法简洁，能够写出漂亮的单行函数。 ES6新引入了箭头函数，它是一种表达简洁的函数，下面我们来看看它有哪三个显著优势。假设定义了一个名为names的数组，如下： showImg(https://segmentfault.com/i...

NoraXie 2019-08-21 11:16 评论0 收藏0
解析js中的this对象

摘要：指定为原始值数字，字符串，布尔值会指向该原始值的自动包装对象这一点感谢评论区的读者补充。前言（几天之前写了源码分析之后，感觉太疲惫了，写一些相对轻巧的内容调剂一下，希望喜欢的同学可以点个赞和收藏~）进入正题，this对象在js中是很常见，但是在这里也经常会出错，本文将对常见的this对象的情况做一些总结正文 this对象是在函数运行时，基于函数的执行环境绑定的。其实这句话的本...

firim 2019-08-21 18:38 评论0 收藏0
JS 中的this指向

摘要：当碰到时呵呵再看一个呵呵再来呵呵呵呵呵呵呵呵什么意思呢如果返回值是一个对象，那么指向的是构造函数的实例但是并没有被返回，如果返回值不是一个对象那么还是指向构造函数创建的实例。为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。 1. this指向调用他的对象首先...

KavenFan 2019-08-22 11:14 评论0 收藏0
你应该要知道的JS中的this

摘要：在用创建对象时，指向发生改变是在第二步创建一个对象实例将构造函数中的指向这个对象执行构造函数中的代码返回这个新创建的对象箭头函数中的箭头函数内部是不会绑定的，它会捕获外层作用域中的，作为自己的值。参考你不知道的上卷前言 this 是 JavaScript 中不可不谈的一个知识点，它非常重要但又不容易理解。因为 JavaScript 中的 this 不同于其他语言。不同场景下的 thi...

edgardeng 2019-08-23 14:45 评论0 收藏0