美文网首页
this指向(箭头函数)

this指向(箭头函数)

作者: 彩云Coding | 来源:发表于2018-10-29 19:04 被阅读0次

以this的使用场景进行分类:

1.普通函数下,this 的指向

2.构造函数下,this 的指向

3.箭头函数下,this 的指向

普通函数下,this的指向

(1)函数的定义位置不影响其this指向,this指向只和调用函数的对象有关。

(2)多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内部对象调用方法的this指向内部对象, 而非window)。

(3)setTimeout & setInterval 对于延时函数内部的回调函数的this指向全局对象window

//时延函数的普通写法下的this指向
function Person() {  
    this.age = 0;  
    setTimeout(function() {
        console.log(this);
    }, 3000);
}
var p = new Person();//3秒后返回 window 对象

构造函数下,this 的指向

(1)构造函数中的this与被创建的新对象绑定。

箭头函数下,this 的指向

(1)箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}
var p = new Person(); //三秒之后age变为1
var adder = {
  base : 1,
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addThruCall: function inFun(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };    
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3,因为箭头函数不绑定this,其内部的this并没有因为call() 而改变,其this值仍然为函数inFun的this值,指向对象adder

(2)以上的箭头函数都是在方法内部,总之都是以非方法的方式使用,如果将箭头函数当做一个方法使用会怎样呢?

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

作为方法的箭头函数this指向全局window对象,而普通函数则指向调用它的对象 。

ps: 最近遇到的一个小坑:当字符串为空时,split()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组。

相关文章

  • es6 箭头函数的this指向

    箭头函数在创建时确定了this指向。 下方例子中,箭头函数创建时this指向window,调用时也就指向了window

  • REACT 中事件处理函数传递参数的两种方式

    第一种是箭头函数传参 箭头函数没有this指向,默认是继承外部上下的this,所以箭头函数中的this指向的就是组...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

  • this指向(箭头函数)

    以this的使用场景进行分类: 1.普通函数下,this 的指向 2.构造函数下,this 的指向 3.箭头函数下...

  • JavaScript 胖箭头函数中的this

    在非箭头函数下, this 指向调用其所在函数的对象箭头函数导致this总是指向函数定义生效时所在的对象 以前这种...

  • 关于ES6箭头this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的函...

  • 关于箭头函数 this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头...

  • 函数的扩展

    函数的扩展 箭头函数和普通函数区别箭头函数没有this对象,箭头函数的里的this始终指向定义时所在对象,普通函数...

  • 箭头函数this指向理解修正 - 2020-11-25

    0. 起因 1. 箭头函数this指向定义 箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而...

网友评论

      本文标题:this指向(箭头函数)

      本文链接:https://www.haomeiwen.com/subject/xvfitqtx.html