菜鸟关于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>

原文地址:https://www.cnblogs.com/TBZW/p/10357902.html

时间: 2024-10-28 14:23:18

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

oracle rac 扩展磁盘采坑记录

oracle rac 磁盘扩展采坑记录: 系统环境:VMware esxi oracle rac 11.2.0.4 昨天扩展了asm的磁盘组,FRA磁盘组和DATA磁盘组,我添加了一块硬盘320g,200g扩展到了DATA组,120g扩展到了FRA组.因为oracle使用的是raw裸设备,扩展第一个磁盘的时候,正常进行,不用关机. 坑1:但是扩展FRA组的时候,需要关机才能找得到第二个设备.重启之后扩展正常,建议扩展磁盘一次扩展到一个组. 坑二:今天我看见系统盘空间不够了,就扩展了一下系统盘空间

Android Studio采坑记录

折腾了几个月的Android Studio,终于在今天被我搞定了 ( ̄▽ ̄)~* 开贴记录下,免得下次再次采坑 先说下我之前电脑的环境配置吧,sdk是几年前在网上下载别人整理出来的包,一直没有更新过 (当然这里有各种原因,一是这里面东西太多,搞的自己云里雾里的,二是因为国内网络问题) 这里先把采坑点先写出来 1.sdk的问题(最好把常用的sdk和工具都更新一遍吧) 2.studio的代理问题(如图,开启工具s-s或s-s-r,配好代理,选择socks点击checkconntion,然后再输入ht

jumserver 3.0安装及采坑记录

参考  https://blog.51cto.com/14226596/2420441 以及官方文档 https://www.jishuchi.com/read/Jumpserver-148/2102 补充笔者采坑处理 1.安装python3环境 1>更新epel-release $yum install -y python36 python36-devel python36-pip 2>安装python后,还要修改以下两个文件内容: a)/usr/bin/yum 将第一行 #!/usr/bi

oracle11g数据库安装采坑记录

第一处坑: 解决方案: 原文:https://blog.csdn.net/yhj198927/article/details/49178279 1.打开oracle的"Net Manager" 2.打开"监听程序" 3.打开"数据库服务" 4.点击"添加数据库" 5.填写相关信息 "全局数据库名"和"SID"填写在"Database Configuration Assitant

Mybatis 采坑记录--set标签的使用

<!--根据poi_info表的id和city_id更新flag_hinterland_flows的poi_id和city_id--> <select id="selectPoiAndCityId" parameterType="java.lang.Long" resultType="com.wormpex.gs.stat.service.dao.entity.baseinfo.PoiAndCityId"> select

MySQL可重复读采坑记录-对事务B进行更新时,事务A提交的更新会不会影响到事务B

之前线上出现数据重复插入的问题,通过对问题进行排查发现该问题和MySQL的默认隔离级别-Repeatable Read(可重读)有关系,可重复读确保同一事务的多个实例在并发读取数据时,会看到同样的数据行.现在通过实验,对问题进行下分析. 1.在终端A开启事务A,查询一下. START TRANSACTION; select spt.id,spt.audit_status,spt.is_deleted from stat_point_task spt limit 5; 结果如下: 2.在终端B开启

list采坑记录一下

List<Integer> cards = Lists.newArrayList(6,10,11,12,21,23,29,30,38,39,42,43,46,51,53,59,60);List<Integer> copyList = Lists.newArrayList();copyList = cards;copyList.remove(2);System.out.println("cards:"+cards);System.out.println("

xlearn 安装采坑记录---由内核版本过低导致的问题

最近做项目想用下 xlearn,在自己的mac本上,已经安装了gcc9.1.0和cmake3.14.1,直接 pip install xlearn 就安装成功了,但是在一台centos6.6,内核版本为 2.6.32-754.6.3.el6.x86_64(使用unname -r 查看)的服务器上总是报各种问题.我把报出的问题都逐一去网上搜索,还是有解决方案的,但是按照人家说的改之后还是不行,主要是因为内核版本过低,一些包库(如glib14)安装不上导致的,换了一台系统为centos7.2,内核版

关于vue-element-admin的采坑记录-upload组件图片上传问题

个人博客里部分内容用到了图片上传 那就需要用到vue-element-admin中的upload组件 首先我们需要在需要到图片上传的vue文件里引入upload组件 并使用标签的形式使用该组件 通过v-model绑定image属性 <template> <div class="createPost-container"> <Upload v-model="image"/> </div> </template>