菜鸟关于js“this”的采坑记录

Posted tbzw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了菜鸟关于js“this”的采坑记录相关的知识,希望对你有一定的参考价值。

一.对象中的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()();//undefined

ES6标准中新引进了箭头函数,箭头函数的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”的采坑记录的主要内容,如果未能解决你的问题,请参考以下文章

基于UnixSocket抽象命名空间的采坑记录

基于UnixSocket抽象命名空间的采坑记录

Mac使用Gradle上传jar到中央仓库(最完整的采坑记录)

记Spring5集成TestNG进行单元测试的采坑经历

记Spring5集成TestNG进行单元测试的采坑经历

记一次虚拟机共享文件夹的采坑之旅