JS面向对象this小结

1.简述

1. 在js中，this的意思为”这个，当前”，是一个指针型变量，它动态指向当前函数的运行环境。
2. 在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。

2.this的指向

2.1局部环境

1. this和指向属性处于同一个函数内；

var A = {
    name: 'zs',
    describe: function () {
      return this.name;
    }
  };
  
A.describe()
//zs

this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是A，因此this指向A，this.name就是A.name，也就是zs。

2. 在全局作用域下直接调用函数，this指向window；

var A = {
  age: '18',
  describe: function () {
    return this.age;
  }
};

var age = '20';
var f = A.describe;
fun();
//20

上面代码中，A.describe被赋值给变量f，f是在全局中定义，所以内部的this就会指向f运行时所在的对象。

3. 对象函数调用，那个对象调用就指向那个对象；

var A = {
    age: '20',
    describe: function () {
      return this.age;
    }
  };
var B = {
	age: '18'
  };
B.describe = A.describe;
B.describe()
//18

上面代码中A.describe属性被赋给B，于是B.describe就表示describe方法所在的当前对象是B，所以this.name就指向B.name，输出18

2.2.全局环境

全局环境就是在<script></script>里面，这里的this始终指向的是window对象。

this.age

3.绑定this方法

this绑定的时候是可以使用call、apply、bind这三个方法。

Function.prototype.call()

函数实例的call方法，可以指定函数内部this的指向，然后在所指定的作用域中，调用该函数。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

上面代码中，全局环境运行函数f时，this指向全局环境（浏览器为window对象）；call方法可以改变this的指向，指定this指向对象obj，然后在对象obj的作用域中运行函数f。

call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}
a.call() 
a.call(null) 
a.call(undefined) 
a.call(window) 
a.call(obj) 

上面代码可以得出：a函数中的this关键字，如果指向全局对象，返回结果为123。
call方法将this关键字指向obj对象，返回结果为456。
可以看到，如果call方法没有参数，或者参数为null或undefined，则等同于指向全局对象。

Function.prototype.apply()

apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。
唯一的区别就是，它接收一个数组作为函数执行时的参数，例如：

func.apply(thisValue, [arg1, arg2, ...])

apply方法的两个参数：
第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。
第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

Function.prototype.bind()

bind()方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print()
 // Uncaught TypeError: this is not a Date object.

getTime()方法内部的this，绑定了Date对象的实例，赋给变量print以后，内部的this已经不指向Date对象的实例了，所以报错。
通过使用bind()方法可以来解决这个问题。
bind()方法可以将getTime()方法内部的this绑定到d对象，这时就可以将这个方法赋值给其他变量了。

var print = d.getTime.bind(d);
print() // 1481869925657

4.使用注意

4.1避免多层 this

由于this的指向是不确定的，所以切勿在函数中包含多层的this。
下面代码包含两层this，结果运行后，第一层指向对象o，第二层指向全局对象：

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}

o.f1()
// Object
// Window

解决方法可以是在第二层改用一个指向外层this的变量。通过定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}

o.f1()
// Object
// Object

4.2避免数组处理方法中的 this

数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。
下面代码中，foreach方法的回调函数中的this，其实是指向window对象，因此取不到o.v的值。原因跟上一段的多层this是一样的，就是内层的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

这个问题也可以使用中间变量固定法；

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