JavaScript 中的this关键字

参考： https://wangdoc.com/javascript/oop/this.html

一、涵义

不管this用在什么场合，this都有一个共同点：它总是返回一个对象。简单说，this就是属性或方法“当前”所在的对象。总而言之，在JavaScript语言中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。JavaScript支持运行环境动态切换，所以this的指向是动态的。

二、实质

JavaScript中函数可以在不同的运行环境下执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

三、使用场合

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

function test() {
    console.log(this === window);
}

test()    //true

3.2 构造函数：构造函数中的this，指的是实例对象。

var obj = function(value) {
    this.value = value;
};


var result = new obj('Hello World!');

console.log(result.value);     //"Hello World!"

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

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

obj.foo()    //Object

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

var obj = {
    p: 'Hello',
    b: {
        m: function() {
                console.log(this.p);
            }
        }
};


obj.b.m()        //undefined

四、使用注意点

4.1 避免多层this：由于this的 指向是不确定的，所以切勿在函数中包含多层的this。

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


obj.f1()       // {f1: ƒ}      Window



//相当于
var temp = function () {
  console.log(this);
};

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

Obj.f1()     //{f1: ƒ}      Window

4.2 避免数组处理方法中的this：数组中的map和forEach方法，允许提供一个函数作为参数，这个函数内部不应该使用this

var obj = {
    v: 'Hello',
    p: ['a','b'],
    f: function f() {
        this.p.forEach(function (item) {
            console.log(this.v + ' ' + item);
        });
    }
}

obj.f()    //  "undefined a"    "undefined b"

forEach方法的回调函数中的this，其实是指向window对象，内层的this不指向外部，而指向顶层对象。 

4.3 避免回调函数中的this：回调函数中的this往往会改变指向，最好避免使用。 

五、绑定this的方法（使得this固定指向某个对象，减少不确定性）： call 、apply 、bind 三个方法来切换/固定this的指向。

5.1 Function.prototype.call()：函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中调用该函数。

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

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

call方法的参数，是一个对象，如果参数为空、null和undefined，则默认传入全局对象。如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。 call方法还可以接受多个参数，第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

call方法的一个应用是调用对象的原生方法。

var obj = {};
if(obj.hasOwnProperty('toString')) {
    console.log(true);
}else {
    console.log(false);

}

//false

//覆盖掉继承的 hasOwnProperty方法
var Obj = {};
Obj.hasOwnProperty = function () {
    return true;
};

if(Obj.hasOwnProperty('toStirng')) {
    console.log(true);
}else {
    console.log(false);
}

//true

var result = Object.prototype.hasOwnProperty.call(Obj, 'toString');
console.log(result); 

 //false

5.2 Function.prototype.apply()：用于改变this指向，然后在调用该函数，它接受一个数组作为函数执行时的参数。apply方法的第一个参数是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。

applay方法的一些应用：

（1）找出数组最大元素

var arr = [1,2.3,4,5,6,7,8,10];
var maxValue = Math.max.apply(null,arr);
console.log(maxValue);  //10

（2）将数组的空元素变为undefined

var arr = [1,2,3,,5,,8];
var result = Array.apply(null,arr);
console.log(result);


//[1, 2, 3, undefined, 5, undefined, 8]

（3）转换类似数组的对象：利用数组对象的slice方法可以将一个类似数组的对象转为真正的数组。该方法起作用的前提是，被处理的对象必须有length属性，以及相对应的数字键。

var a = Array.prototype.slice.apply({0: 1, length: 1}) 
var b = Array.prototype.slice.apply({0: 1}) 
var c = Array.prototype.slice.apply({0: 1, length: 2}) 
var d = Array.prototype.slice.apply({length: 1}) 

console.log(a);    //[1]
console.log(b);    //[]
console.log(c);    //[1,undefined]    
console.log(d);    //[undefined]

（4）绑定回调函数的对象

5.3 Funciton.prototype.bind()：用于将函数体内的this绑定到某个对象，然后返回一个新函数。bind方法的参数就是所要绑定this的对象。

var date = new Date();

console.log(date.getTime());    //1543462768065

var time = date.getTime;
console.log(time());        //Uncaught TypeError: this is not a Date object.




//我们将date.getTime方法赋给变量time，然后调用time就会报错，因为getTime方法内部的this，绑定Date 
  // 对象的实例，赋给time以后，内部的this已经不指向Date对象的实例。



//使用bind方法。
var date = new Date();
var p = date.getTime.bind(date);
console.log(p());                 //1543463056066

使用bind方法应注意：

（1）每次返回一个新函数：bind方法每运行一次，就返回一个新函数。

（2） 结合回调函数使用。

var counter = {
  count: 0,
  inc: function () {
    'use strict';
    this.count++;
  }
};

function callIt(callback) {
  callback();
}

callIt(counter.inc.bind(counter));
counter.count // 1



//callIt方法会调用回调函数。这时如果直接把counter.inc传入，调用时counter.inc内部的this就会指向全 
  //局对象。使用bind方法将counter.inc绑定counter以后，就不会有这个问题，this总是指向counter。

（3）结合call方法使用。