JavaScript 复习之 this关键字

this关键字一直都是我们学习js中的难点。

this都有一个共同点：他总是返回一个对象。

简单说，this就是属性或方法当前所在的对象。

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：张三"
复制代码

上面代码，name是person的属性，describe方法所在的对象是person。由于this在describe中调用，所以this指向persion。

由于对象的属性可以赋给另外一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '张三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：张三"
B.describe() // "姓名：李四"
复制代码

只要函数被赋给另一个变量，this的指向就会变。

var A = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var name = '李四';
var f = A.describe;
f() // "姓名：李四"
复制代码

上面代码中，A.describe被赋值给了f，内部的this就会指向f所在对象（本例是顶层对象）。

总结一下，JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。

实质

js 语言之所以有this的设计，跟内存里面的数据结构有关系。

先看一个对象：

var obj = {color: red};
复制代码

代码将一个对象赋值给了变量obj，js 引擎首先会在内存中生成一个对象{color: red}，然后被这个对象的内存地址赋值给变量obj。也就是说，变量obj是一个地址。读取obj.color，引擎先从obj拿到地址，然后从该地址读出原始的对象，返回它的color属性。

原始对象以字典结构保存，对象的每个属性都对应一个属性描述对象。以上面的color属性来说：

{
    color:{
        [[value]]: red
        [[writable]]: true
        [[enumerable]]: true
        [[configurable]]: true
    }
}
复制代码

注意，color属性的值保存在value属性里面。我们知道，属性后面也许是一个函数，而引擎会将函数保存在内存中，所以此处的value也有可能是一个函数的地址。

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。js 允许函数体内部，引用当前环境的其他变量。那么问题就来了，由于函数可以在不同的运行环境中执行，所以需要一种机制，能够在函数体内部获得当前的运行环境。所以，this就出现可，他设计的目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2
复制代码

使用场合

1、全局环境

全局环境使用 this，它指的就是顶层对象 window。

this === window //true

function f() {
  console.log(this === window);
}
f() // true
复制代码

2、构造函数

构造函数种的this，指向实例对象。

var Obj = function (p) {
  this.p = p;
};
var o = new Obj('Hello World!');
o.p // "Hello World!"
复制代码

3、对象的方法

如果对象的方法里面包含this，this指向的就是方法运行时所在的对象。该方法赋值给另外一个对象，就会改变this的指向。

但是，这条规则很不容易把握。

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj
复制代码

上面代码中，obj.foo方法执行时，它内部的this指向obj。

但是，下面这几种用法，都会改变this的指向。

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window
复制代码

上面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境已经不是obj了，而是全局环境，所以this不再指向obj。

可以这样理解，JavaScript 引擎内部，obj和obj.foo储存在两个内存地址，称为地址一和地址二。obj.foo()这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this指向obj。但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此this指向全局环境。

如果this所在方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

使用注意点

1. 避免多层this
2. 避免数组处理方法中的this

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2
复制代码

解决这个问题的一种方法，就是使用中间变量固定this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    var that = this;
    this.p.forEach(function (item) {
      console.log(that.v+' '+item);
    });
  }
}

o.f()
// hello a1
// hello a2
复制代码

另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2
复制代码

3. 避免回掉函数中的this

绑定this的方法

也就是常用的call， apply， bind三个方法。

三者都可以接受多个参数；但是第一个参数是this所要指向的那个对象。 区别如下：

• apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用 。
• 对于 apply、call 二者而言，作用完全一样，只是接受 参数 的方式不太一样。call 是把参数按顺序传递进去，而 apply 则是把参数放在数组 里。

注意点：

• 方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。
• 如果方法的第一个参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入方法。

转载于:https://juejin.im/post/5c763d77e51d45374276f025