彻底淘汰并消除JavaScript中的this

时间: 2018-11-07阅读: 1025标签: this


如果这很难明白,为什么我们不停止使用它呢?认真的思考一下。如果你读过 将90%的垃圾扔进垃圾桶后,我如何重新发现对JavaScript的爱, 当我说扔掉它时,你不会感到惊讶。this被丢弃了。再见。this不会被遗弃。

使用函数式的JavaScript,你永远不会看到this。因为你的代码永远不会包含this。你无法控制第三方库。流行的第三方库像 ReactjQueryeventemitter2会迫使你这么做。

以下这些库的例子强制去使用this。


react中强制使用 this

//  GROSS: this
class Counter extends react.Component {
  constructor() {
    super()
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState(s => ({ count: s.count + 1 }))
  }

  render() {
    return (
      <div>
        <button onClick={() => this.increment}>{this.state.count}</button>
        <button onClick={this.increment.bind(this)}>{this.state.count}</button>
      </div>
    )
  })
}


在jQuery中强制使用this

// GROSS: this
$('p').on('click', function() {
  console.log($(this).text())
})


在eventemitter2中强制使用this

const events = new EventEmitter2({ wildcard: true })

// GROSS: this
events.on('button.*', function() {
  console.log('event:', this.event)
})

events.emit('button.click')


this无处不在!

有个问题,如果你使用箭头函数,this是不允许使用的。有时我更喜欢写一个箭头函数来代替经典的函数。 好吧, 我 _总是_ 更喜欢写一个箭头函数。

另一个问题是this可能会被重新分配。因此,你的函数可能会因为其他人使用它而失败。

// WTF? these will produce different outputs
const say = cat => cat.speak() //=> "meow"
const say = ({ speak }) => speak() //=> Error: Cannot read property 'sound' of undefined

// WTF? these will produce different outputs
cat.speak() //=> "meow"

const speak = cat.speak
speak() //=> undefined


所以,让我们完全摆脱this。

我创建一个简单的函数修饰符来摆脱this。 更多函数修饰符见.

在创建nothis之后,我创建一个包并在我的项目中使用它。

你觉得this是什么样的?

在React中使用nothis

import React from 'react'
import nothisAll from 'nothis/nothisAll'

//  LIT: no this in sight!
class Counter extends React.Component {
  state = { count: 0 }

  constructor() {
    super()
    nothisAll(this)
  }

  increment({ setState }) {
    setState(({ count }) => ({ count: count + 1 }))
  }

  render({ increment, state }) {
    return (
      <div>
        <button onClick={increment}>{state.count}</button>
      </div>
    )
  }
}

在jQuery中使用nothis

$('p').on('click', nothis(ctx => console.log($(ctx).text())))

在eventemitter2中使用nothis

const events = new EventEmitter2({ wildcard: true })

// LIT: nothis + destructuring!
events.on('button.*', nothis(({ event }) => console.log('event', event)))

events.emit('button.click')


fixthis 可以解决现有存在的重新绑定问题!

import fixthis from 'nothis/fixthis'

const cat = {
  sound: 'meow',
  speak: function() {
    return this.sound
  }
}

// GROSS: this is unintentionally rebound
const speak = cat.speak;
speak() //=> Error: Cannot read property 'sound' of undefined

//  LIT: this stays this
const fixedCat = fixthis(cat)
const speak = fixedCat.speak;
speak() //=> "meow"


安装它...

npm install -P nothis

将它添加到您的库中...

import nothis from 'nothis'


原文链接: dev.to 
翻译来源:https://www.zcfy.cc/article/rethinking-JavaScript-the-complete-elimination-and-eradication-of-javascript-s-this

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1275

关闭

JS 中几种轻松处理this指向方式

与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。然而,更好的替代方法是使用箭头函数,其本质上是为了在词法上绑定this。

Js中this指向问题(函数的调用方式)

在ES6之前,函数内部的this是由函数的调用方式决定的。构造函数调用 ,这时 p.say 属于Object,为Object的实例。this:say构造函数的实例,实例中并没有age属性,值为:undefined

JavaScript之this

JavaScript中的this比较灵活,根据在不同环境下,或者同一个函数在不同方式调用下,this都有可能是不同的。但是有一个总的原则,那就是this指的是,调用函数的那个对象

this指向问题的经典场景

以函数形式调用,this指向window;以方法形式调用,this指向调用方法的那个对象;构造函数调用,this指向实例的对象;使用window对象的方法使,指向window;多重场景改变this指向

this的指向问题

举个生活中的例子:比如说你在厨房做菜,那厨房就是你的上下文环境,你要拿一点辣椒,顺手就拿到了;比如你在试衣间,那试衣间就是你的上下文环境,你想在试衣间拿一点辣椒,但是这次拿不到了

js中this的绑定规则及优先级

this绑定规则:函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条。默认绑定、隐式绑定:另一条需要考虑的规则是调用位置是否有上下文对象

关于this

在参考了以上关于this的资料后,整理了一些个人认为比较有用的点,和一些自己的见解。写的有些仓促,不对的地方希望指正,共同进步。用call来解释this很形象啊,但是不是那么严谨,详情看补充1;

JavaScript 中的 this 全面解析

this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗

Nodejs中的this

以下内容都是关于在nodejs中的this而非javascript中的this,nodejs中的this和在浏览器中javascript中的this是不一样的。暂时我们先了解到这里,后面有机会我们会聊到module

This is this

this的指向是JavaScript中一个经久不衰的热门问题,在不同的场景下指向规则也不同,在此本文总结了this在不同场景下的指向规则以及ES6中新增的箭头函数中this的指向问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!