关闭

彻底淘汰并消除JavaScript中的this

时间: 2018-11-07阅读: 1177标签: 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

关闭

解读Javascript中的this机制,别再为了 this 发愁了

JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

Nodejs中的this

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

JavaScript中this的运行机制及爬坑指南

在 JavaScript 中,this 这个特殊的变量是相对比较复杂的,因为 this 不仅仅用在面向对象环境中,在其他任何地方也是可用的。 本篇博文中会解释 this 是如何工作的以及使用中可能导致问题的地方,最后奉上最佳实践。

JavaScript中this指向问题

记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包、原型(原型链)并称 JS 武林中的三大魔头。如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒

JavaScript 中的 this 全面解析

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

匿名函数没有自己的this

匿名函数没有自己的this,因此,在构造对象中调用全局函数时,可以省去保存临时this,再将其传入全局函数这一步:

JavaScript的奇妙this

this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。

this指向和apply,call,bind三者的区别

this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法。同时也是ES5中的众多坑的一个。ES6中可能会极大的避免了this产生的错误

JavaScript this 关键字详解

this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说,this的绑定一直是一件非常令人困惑的事。

寻找this绑定对象?找到调用栈&调用位置

经常听到这么一句话,找this只需要看 谁是调用方 。当函数被调用时会记录函数调用调用方式、传参包括this等各种属性。有时候 this 绑定对象情况太抽象,找到准确的 调用方 还是有一定的难度。

点击更多...

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