JavaScript中的this指针

JavaScript函数中的关键字this是自动获得的,因此,了解在不同的情况下this值指向的对象可以帮助我们减少程序中很多’莫名其妙’的bug.

全局上下文

在全局执行上下文中,this指向全局对象(browser: window, node: global),不管是严格模式还是非严格模式。

函数上下文

在函数中,this值取决与函数是如何调用的。

简单调用(不作为对象的方法或属性)

  • 非严格模式下:this值将会默认指向全局对象:
  function foo1() {
    return this;
  }
    
  console.log(foo1() === window); // true
  • 严格模式下:this值将会指向进入执行上下文时所设置的值,如果在执行上下文中没有设置this值,则会默认为undefined:
  function foo2() {
    'use strict';
    return this;
  }

  console.log(foo2() === undefined); // true

作为对象的方法

当函数作为对象的方法或属性时,它的this值将被设为调用该方法的对象:

  var o = {
    prop: 37,
    f() {
      return this.prop;
    }
  };
  console.log(o.f()); // 37

即使是通过对象字面量的方法将一个函数赋值给一个对象的属性,该行为也不会发生改变:

  var o = {prop: 37};
  function getProp() {
    return this.prop
  }
  o.f = getProp;
  
  console.log(o.f()); // 37

对象原型链中的this值

同样的,this仍然指向调用该函数的对象,尽管该函数位于该对象的原型链中:

  var o = {f: function() {return this.a + this.b;}};
  var p = Object.create(o);
  p.a = 1;
  p.b = 2;
  
  console.log(p.f()); //3

getter 或 setter 中的this

当函数作为属性的getter或者setter时,其中的this值指向该属性所在的对象:

  function sum() {
    return this.a + this.b + this.c
  }
  
  var o = {
    a: 1,
    b: 2,
    c: 3,
    get average() {
      return (this.a + this.b + this.c) / 3;
    }
  };
  Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true
  });
  
  console.log(o.average, o.sum); // 2, 6

call方法 VS apply方法

call方法和apply方法都可以设置函数的this值,两者的第一个参数都是this值所指向的对象,区别在于call方法中的arguments是作为单个值传入fun.call(thisArg, arg1, arg2, ...),而apply方法中的arguments是作为数组传入func.apply(thisArg, [argsArray])

bind方法

ES5引入了Function.prototype.bind方法,调用f.bind(someObject)可以创建一个新的函数,该函数与f具有相同的函数体和作用域,但是新函数this值始终指向someObject。

  function f() {
    return this.a;
  }
  
  var g = f.bind({a: 'abc'});
  console.log(g()); // abc
  
  var h = g.bind({b: '123'}); // bind only works once
  console.log(h()); //abc 

注意到:通过bind方法获得的函数再次调用bind方法得到的新函数this值不会发生变化!

箭头函数

由于this值是自动获得的,以下hack的写法大家一定不陌生:

  {
    ...
    addAll: function addAll(pieces) {
      var self = this;
      _.each(pieces, function (piece) {
        self.add(piece);
      });
    },
    ...
  }

为了解决该问题,ES2015中引入了箭头函数语法糖,然而箭头函数的this值与一般函数的this值又有所区别,箭头函数的this值始终继承其外围作用域中的this值,在全局环境中将指向全局对象:

  // ES6
  {
    ...
    addAll: function addAll(pieces) {
      _.each(pieces, piece => this.add(piece));
    },
    ...
  } 

此处的addAll方法中的this值指向调用该方法的对象,而其内部的箭头函数的this值则继承自addAll方法的this值。

    原文作者:小道小姐姐
    原文地址: https://www.jianshu.com/p/ebbc9e6b77f0
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞