this 对象详解
this关键字是函数当中最重要的一个知识点。它在JavaScript中的表现也会有一些细微的不同，在严格和非严格模式之下也会有一些差别。
绝大多数情况下，this的指向由函数的调用方式决定。它不能被赋值，并且每次函数调用，它也有可能会不同。ES5引入了bind方法来设置函数的this值，而不需要考虑函数的调用方式，ES6的箭头函数不提供自身的this绑定，它的this由当前上下文决定。
const obj = {
name:"hello,world!",
getName(){
return this.name;
}
}
console.log(obj.getName());//"hello,world!"语法:
this值
它的值是当前上下文(global,function,eval)中的一个属性，在非严格模式下，它总是指向一个对象，而在严格模式下，它可以被设置成任意值。
描述
全局上下文
全局上下文即全局对象，例如在浏览器环境当中，this始终指的是window对象，不论是否是严格模式。来看如下一个示例:
//在浏览器环境中，window对象就是全局对象
console.log(this === window);//true
//不用标识符定义一个变量，也会自动将该变量添加到window对象中，作为window对象的一个属性
a = 250;
console.log(this.a);//250
this.message = "hello,world!";
console.log(message);
console.log(window.message);
//都是打印的"hello,world!"笔记:可以始终使用globalThis来获取一个全局对象,无论你的代码是否在当前上下文运行。 var obj = {
func:function(){
console.log(this);
console.log(globalThis);
}
}
obj.func();//先打印obj对象，再打印window对象,浏览器环境中函数上下文
在函数内部，this取决于它被调用的方式。例如以下的非严格模式下，没有手动去通过设置调用方式，并且是在全局环境下调用的，所以this指向全局对象。
function fn(){
return this;
}
//在浏览器环境中
console.log(fn() === window);//true
//在node.js环境中
console.log(fn() === globalThis);//true然而，在严格模式下，如果没有为this设置值，那么this会保持为undefined。如:
function fn(){
'use strict';
return this;
}
console.log(fn() === undefined) //truetips:上例中，因为fn是直接被调用的，也就是并不是作为对象的属性来调用（window.fn），所以this应是undefined，有些浏览器在最初支持严格模式的时候并没有正确的实现这个功能，所以错误的返回了window对象。
如果想要改变this值，需要使用call或apply方法。如例:
var obj = { value:"this is custom object!"};
var value = "this is global object!";
var getThis = function(){
return this.value;
}
console.log(getThis());//"this is global object!"
console.log(getThis.apply(obj))//"this is custom object!"
console.log(getThis.call(obj))//"this is custom object!"类上下文
尽管ES6的类和函数有些相似，this的表现也会类似，但也有一些区别和注意事项。
在类当中,this就是一个常规的类对象，类里面定义的非静态的方法都会被添加到this对象的原型当中。例:
class Test {
constructor(){
const p = Object.getPrototypeOf(this);
console.log(Object.getOwnPropertyNames(p));
}
getName(){}
getValue(){}
static getNameAndValue(){}
}
new Test();//["constructor","getName","getValue"]tips:静态方法不是this的属性，它们只是类自身的属性。
比如，我们要调用以上的getNameAndValue方法，我们可以像如下这样调用:
Test.getNameAndValue();
//或者
const test = new Test();
test.constructor.getNameAndValue();派生类
在派生类当中，不会像基类那样，有初始的绑定。什么是派生类？也就是继承基类的类。例如:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {}
//这里的test就是一个派生类在派生类的构造函数当中，如果不使用super绑定this，则在使用this的过程中会报错Must call super constructor in derived class before accessing 'this' or returning from derived constructor。大致意思就是要有一个super绑定。如:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
console.log(this);
}
}
//ReferenceError但是如果我们稍微改一下，如下:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
super();//这时候会生成一个this绑定
console.log(this);
}
}
//Test，继承了基类的属性和方法，相当于执行this = new Base()派生类不能在没有super方法的构造函数中返回一个除对象以外的值，或者说是有super方法的前面直接返回一个对象以外的值也是不行的，除非根本就没有构造函数。如:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
return 1;
super();
}
}
//TypeError但是下面的示例不会出错:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
return {};
super();
}
}下面示例会报错:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
return 1;
}
}
//TypeError下面示例不会报错:
class Base {
constructor(){
this.key = "base";
}
}
class Test extends Base {
constructor(){
return {};
}
}this和对象之间的转换
在非严格模式下，如果调用call或apply方法，传入的第一个参数，也就是被用作this的值不是一个对象，则会尝试被转换为对象。基本类型值，如null何undefined会被转换成全局对象，而像其他的基本类型值则会使用对应的构造函数来转换成对象。例如number类型数字1就会调用new Number(1),string类型'test'就会调用new String('test')。
例如:
function sum(c,d){
return this.a + this.b + c + d;
}
var a = 3,b = 4;
var count = {
a:1,
b:2
}
//call方法后面的参数直接被用作函数的参数
console.log(sum.call(count,3,4));//10
console.log(sum.call(count,'3',4))//'334'
console.log(sum.call(null,3,4));//14
console.log(sum.call(undefined,'3',4));//'734'
console.log(sum.call(1,3,4));//new Number(1)上没有a和b属性，所以是this.a + this.b就是NaN，即两个undefined相加
console.log(sum.call('',1,'2'))//'NaN2'
//apply方法参数只能传数组参数
//TypeError
// console.log(sum.apply(count,3,4));
// console.log(sum.apply(count,'3',4))
// console.log(sum.apply(null,3,4));
// console.log(sum.apply(undefined,'3',4));
// console.log(sum.apply(1,3,4));
// console.log(sum.apply('',1,'2'))
//必须这样传
console.log(sum.apply(count,[3,4]));//10
console.log(sum.apply(count,['3',4]))//'334'
console.log(sum.apply(null,[3,4]));//14
console.log(sum.apply(undefined,['3',4]));//'734'
console.log(sum.apply(1,[3,4]));//new Number(1)上没有a和b属性，所以是this.a + this.b就是NaN，即两个undefined相加
console.log(sum.apply('',[1,'2']))//'NaN2'再来看一个示例如下:
function test(){
console.log(Object.prototype.toString.call(this))
}
console.log(test.call(7));//[object Number]
console.log(test.call(undefined));//[object global],在浏览器环境下指向为[Object window]
console.log(test.apply('123'));//[object String]根据以上示例，我们就可以知道了利用Object.prototype.toString方法来判断一个对象的类型。如可以封装一个函数如下:
function isObject(value){
return Object.prototype.toString.call(value) === '[object Object]';
}
//等价于
function isObject(value){
return Object.prototype.toString.apply(value) === '[object Object]';
}
//等价于
function isObject(value){
return {}.toString.call(value) === '[object Object]';
}
//等价于
function isObject(value){
return {}.toString.apply(value) === '[object Object]';
}bind方法
ES5引入了bind方法，该方法为Function的原型对象上的一个属性，在一个函数fn中调用fn.bind(object)将会创建一个和该函数相同作用域以及相同函数体的函数，但是它的this值将被绑定到bind方法的第一个参数,无论这个新创建的函数以什么方式调用。如:
function fn(){
var value = "test";
return this.value;
}
var obj = {
value:"objName"
}
var newFn = fn.bind(obj);
console.log(fn.bind(obj)());//objName
console.log(newFn());//objName
var bindObj = {
value:"bind",
f:fn,
g:newFn,
h:fn.bind(bindObj)
}
var newBind = {
a:fn.bind(bindObj)
}
console.log(bindObj.f());//bind
console.log(bindObj.g());//objName
console.log(bindObj.h());//undefined
console.log(newBind.a());//bind箭头函数
在箭头函数中，this与封闭环境当中的上下文的this绑定一致，在全局环境中，那它的this就是全局对象。如:
var obj = {
a:() => {
return this;
},
b:function(){
var x = () => { return this;};
return x();
}
}
console.log(obj.a());//global
console.log(obj.b());//obj注意:无论使用call,apply还是bind其中的哪一种方法，都不能改变箭头函数的this指向，因为都将被忽略，但是仍然可以传递参数，理论上第一个参数设置为null或者undefined为最佳实践。
如:
//在浏览器环境下globalObject是window对象
let globalObject = this;
let getThis = () => this;
console.log(getThis() === globalObject);//true
let obj = {
getThis:getThis
}
console.log(obj.getThis() === globalObject);//true
console.log(obj.getThis.call(obj) === globalObject);//true
console.log(obj.getThis.apply(obj) === globalObject);//true
// 使用bind并未改变this指向
console.log(obj.getThis.bind(obj)() === globalObject);//true也就是说，无论如何，箭头函数的this都指向它的封闭环境中的this。如下:
var obj = {
a:() => {
return this;
},
b:function(){
var x = () => { return this;};
return x();
}
}
console.log(obj.a());//global在浏览器环境下是window对象
console.log(obj.b());//obj作为某个对象
当调用某个对象中的函数中的方法时，在访问该函数中的this对象，将会指向这个对象。例如:
var value = "this is a global value!";
var obj = {
value:"this is a custom object value!",
getValue:function(){
return this.value;
}
}
console.log(obj.getValue());//"this is a custom object value!"这样的行为方式完全不会受函数定义的方式和位置影响，例如:
var value = "this is a global value!";
var obj = {
value:"this is a custom object value!",
getValue:getValue
}
function getValue(){
return this.value;
}
console.log(obj.getValue());//"this is a custom object value!"此外，它只受最接近的引用对象的影响。如:
var value = "this is a global value!";
var obj = {
value:"this is a custom object value!",
getValue:getValue
}
obj.b = {
value:"this is b object value!",
getValue:getValue
}
function getValue(){
return this.value;
}
console.log(obj.b.getValue());//"this is b object value!"对象原型链中的this
在对象的原型链中，this同样也指向的是调用这个方法的对象，实际上也就相当于该方法在这个对象上一样。如:
var obj = {
sum:function(){
return this.a + this.b;
}
}
var newObj = Object.create(obj);
newObj.a = 1;
newObj.b = 2;
console.log(newObj.sum());//3
console.log(obj.sum());//NaN上例中,newObj对象继承了obj的sum方法，并且我们未newObj添加了a和b属性，如果我们调用newObj的sum方法，this实际上指向的就是newObj这个对象，所以我们可以得到结果为3,但是我们调用obj.sum方法的时候，this指向的是obj，obj对象并没有a和b属性，所以也就是两个undefined相加，就会是NaN。obj就作为了newObj的原型对象，这也是原型链当中的一个非常重要的特点。
注意:Object.create()方法表示创建一个新对象，会以第一个参数作为新对象的原型对象，第一个参数只能为null或者新对象，不能为其它基本类型的值，如undefined,1,''等。
getter或setter中的this
在一个对象的setter或者getter中同样的this指向设置或者获取这个属性的对象。如:
function average(){
return (this.a + this.b + this.c) / 3;
}
var obj = {
a:1,
b:2,
c:3
get sum:function(){
return this.a + this.b + this.c;
}
}
Object.defineProperty(obj,'average',{
get:average,
enumerable:true,
configurable:true
});
console.log(obj.average,obj.sum);//2,6构造函数中的this对象
当一个函数被当做构造函数调用时（使用new关键字），this指向的就是实例化的那个对象。
注意:尽管构造函数返回的默认值就是this指向的那个对象，但是也可以手动设置成返回其它的对象，如果手动设置的值不是一个对象，则返回this对象。
如:
function C(){
this.a = 1;
}
var c1 = new C();
console.log(c1.a);//1
function C2(){
var obj = {
a:2
}
this.a = 3;
return obj;
}
var c2 = new C2();
console.log(c2.a);//2在上例中实例化的c2的构造函数C2中，由于手动的设置了返回的对象obj,所以导致this.a = 3这条语句被忽略，从而得到结果为2，就好像"僵尸"代码。当然也不能算是"僵尸"代码，因为实际上它是被执行了的，只不过对外部没有造成影响，所以可以被忽略。
作为一个DOM事件处理函数
当函数是一个DOM事件处理函数，它的this就指向触发事件的元素（有一些浏览器在使用非addEventListener动态添加函数时不遵守这个约定）。如:
function changeStyle(e){
console.log(this === e.currentTarget);//true
console.log(this === e.target);//true
//将背景色更改为红色
this.style.setProperty('background',"#f00");
}
// 获取文档中所有的DOM元素
var elements = document.getElementsByTagName('*');
for(let i = 0,len = elements.length;i < len;i++){
//为每个获取到的元素添加事件
elements[i].addEventListener('click',changeStyle,false);
}内联事件中的this
当在内联事件中调用函数时，this指向的就是这个元素。但只有最外层的代码才指向这个元素，如果是内部嵌套函数中没有指定this，则指向全局对象。如:
<button type="button" onclick="document.writeln(this.tagName.toLowerCase())">clicked me</button>
<!-- 点击按钮会在页面中出现button --><button type="button" onclick="document.writeln((function(){return this})())">clicked me</button>
<!-- 在浏览器环境下页面会写入[object Window] -->在类中更改this绑定
类中的this取决于如何调用，但实际上在开发当中，我们手动的去绑定this为该类实例是一个很有用的方式，我们可以在构造函数中去更改this绑定。如:
class Animal {
constructor(){
//利用bind方法让this指向实例化的类对象
this.getAnimalName = this.getAnimalName.bind(this);
}
getAnimalName(){
console.log("The animal name is ",this.animalName);
}
getAnimalNameAgain(){
console.log("The animal name is ",this.animalName);
}
get animalName(){
return "dog";
}
}
class Bird {
get animalName(){
return "bird";
}
}
let animal = new Animal();
console.log(animal.getAnimalName());//The animal name is dog;
let bird = new Bird();
bird.getAnimalName = animal.getAnimalName;
console.log(bird.getAnimalName());//The animal name is dog;
bird.getAnimalNameAgain = animal.getAnimalNameAgain;
console.log(bird.getAnimalNameAgain());//The animal name is bird;在这个示例中，我们始终将getAnimalName方法的this绑定到实例化的Animal类对象上，所以尽管在Bird类中定义了一个animalName属性，我们在调用getAnimalName方法的时候，始终得到的就是Animal中的animalName属性。所以第二个打印仍然是dog。
注意:在类的内部总是使用的严格模式，所以调用一个this值为undefined的方法会抛出错误。
打个广告，我在思否上线的课程玩转typescript1，玩转typescript2适用于有一定基础的前端，还望大家多多支持，谢谢。
查看原文
