一.对象中的this
这里主要讨论函数的两种调用模式，函数模式与方法模式，以函数模式调用时，this多指undefined或window（是否使用严格模式）
定义在全局变量中的函数用函数模式调用，this指向window或undefine
function example (){ ???console.log(this)//undefined}定义为对象方法的函数用方法模式调用，this指定为这个对象
let xiaoming = { ???name:"小明", ???hello: function(){ ???????console.log("Hello,"+this.name)//this指向对象xiaoming ???}}xiaoming.hello();//Hello,小明值得一提的是，如果对象的方法内部包含了其他函数（比如return了一个函数），该函数以函数模式调用，this指向window或undefine
let xiaoming = { ???name:"小明", ???hello: function(){ ?????????return function(){console.log("Hello,"+this.name)}//用函数模式调用 ???}}xiaoming.hello()();//Hello, ?二.class中的this
在class中，公用方法中的this指向所在的类
class Students { ???constructor(name){ ???????this.name = name ???} ???hello (){ ???????console.log("Hello,"+this.name) ???}}let xiaoming = new Students("小明");xiaoming.hello();//Hello,小明如果该方法包含了一个其他函数，被包含的函数中this指向window或undefined
class Students { ???constructor(name){ ???????this.name = name ???} ???hello (){ ???????return function(){ ???????????console.log("Hello,"+this.name) ???????} ???}}let xiaoming = new Students("小明");xiaoming.hello()();//undefinedES6标准中新引进了箭头函数，箭头函数的this会根据词法作用域找到父级函数的this并和他保持一致
class Students { ???constructor(name){ ???????this.name = name ???} ???hello (){ ???????return ()=>{ ???????????console.log("Hello,"+this.name)//这里的this指向父级函数的this，即hello()的this ???????} ???}}let xiaoming = new Students("小明");xiaoming.hello()();//Hello，小明三.React中的this
import React, { Component } from ‘react‘class ExampleApp extends Component {examplemethod(){console.log(this)}render(){ ?????return(
?????????????<div onClick={this.examplemethod}>测试</div>}
)}}
按照之前说的内容，我们点击按钮，应该得到ExampleApp组件，可是实际上，我们会得到undefined，这是因为React在调用该函数时不通过常规的方法调用，而是通过函数调用导致this指向了window或undefined，对于这种情况有两种纠正方法
1.使用箭头函数
example = () => { ???console.log(this)}2.在调用的按钮上用bind绑定this
<div onClick={this.examplemethod.bind(this)}>测试</div>菜鸟关于js“this”的采坑记录
原文地址：https://www.cnblogs.com/TBZW/p/10357902.html