ES6与React中this完全解惑

计划写很长的篇幅,预计12月初完成。

  先说结论:

  无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下文,自己实现了该词法,其它的关于this的与ES5仍然一样。

  目录:    

  1.ES5中对this使用的4种方式
  2.ES6中箭头函数中的this
  3.ES6中class中的this
  4.React中组件里的this 组件里事件函数,其实相当于把对象方法赋值给新变量后再调用,这和ES5中是一样的,变成了函数调用,this指向全局。

  要理解ES6的this知识,首先必须非常熟悉ES5里this的知识,要不然还是会一头雾水。

  1.ES5中对this使用的4种方式

     待补充

  2.ES6中箭头函数中的this

     先看几个例子

        function foo() {
          setTimeout(() => {
            console.log(‘id:‘, this.id);
          }, 100);
        }

        var id = 21;

        foo.call({ id: 42 });
        // id: 42

  上面这个例子是阮一峰ES6入门里的一个例子,他在书中提到“箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象”,这种解释并不好,你也行还是不能真正理解上面这个例子。我更推荐MDN里对箭头函数this的说明“箭头功能不会创建自己的this;它使用封闭执行上下文的this值”。setTimeout里的函数的封闭上下文是foo函数,因此该箭头函数使用foo函数的this,在调用的时候,foo函数通过call将自己的id变成42,所以打印出的this.id是42。

  下面的例子是MDN的例子,会从0每隔一秒打印递增的整数0,1,2,3... 。对照这个例子再体会MDN对于箭头函数的说明。 

        function Person(){
          this.age = 0;

          setInterval(() => {
            console.log(this.age++)  // 传递给setInterval的函数内的this与封闭函数中的this值相同
          }, 1000);
        }

        var p = new Person();

  还有一点,有些同学可能因为之前看了阮一峰对箭头函数this的解释“箭头函数体内的this对象,就是定义时所在的对象”,会产生疑惑,它每次使用的是这个对象的起初的深拷贝的副本还是引用值,通俗的问就是,当执行上下文的this值上的属性变化了,箭头函数里的this上的属性是否变化呢。答案是也跟着变化,我们根据MDN的解释,它使用封闭执行上下文的this值。上面的例子其实已经可以验证这个问题了,为了更清楚一下,我们稍微改一下。

        function Person(){
          this.age = 0;

          setInterval(() => {
            console.log(this.age++);
          }, 1000);
        }

        var p = new Person();
        p.age = 50;

  我们在控制台可以看到,从50每隔1秒递增打印一个整数。

   由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个箭头函数时,只是传入了参数而已,对 this 并没有什么影响:

  

    var adder = {
      base : 1,

      add : function(a) {
        var f = v => v + this.base;
        return f(a);
      },

      addThruCall: function(a) {
          // console.log(this.base)
        var f = v => v + this.base;
        var b = {
          base : 2
        };

        return f.call(b, a);
      }
    };

    console.log(adder.add(1));         // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3)

  注意与一开始的例子区别,一开始的例子是对箭头函数外层函数使用call,而这个例子是直接对箭头函数使用call。addThruCall内的this与ES5一样,是调用对象的this,里面的箭头函数同样使用这个this。我们在后面加两句

    var cc = adder.addThruCall;
    console.log(cc(1))

  控制台输出NaN,想想是不是和ES5对象方法调用一样的呢。

参考链接:1.MDN箭头函数

时间: 2024-10-07 12:16:25

ES6与React中this完全解惑的相关文章

Immutable 详解及 React 中实践

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟.

react中的this

今天被问到了一个关于react中this指向的问题,脑子里大概有一些概念,但是一时又说不太清楚,之后查了一些资料,按照自己的理解总结一下 es6的class是可以用来构建react组件的一种方式,而我们在构建组件的时候其实就是创建类,这时候我们并没办法知道this的上下文,而其后组件被调用,其实就是实例化了一个对象,这时候,组件有上下文了,我们可以开始讨论this了 1 import React from 'react' 2 3 export default class MyComponent

react中这些细节你注意过没有?

react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { constructor() { super() this.name = '' } // name的getter get name() { ... } // name的setter set name(value) { ... } } react组件中的get的使用如下: /* * renderFullName的

React中的fetch请求相关

fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise 的.

React 中的 Component、PureComponent、无状态组件 之间的比较

React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px } 组件类型 说明 React.createClass 不使用ES6语法,只能使用 React.createClass 来创建组件:React对属性中的所有函数都进行了this绑定 Component 使用ES6语法创建组件:React并没有对内部的函数,进行this绑定 PureComponent shouldComponentUp

react中constructor和super()以及super(props)的区别。

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 constructor( )--构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法. super( ) --继承 在class方法中,继承是使用 extends 关键字来实现的.子类

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

react中为什么要使用immutable

因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virtual dom,并进行virtual dom diff,所以解决办法是我们在本组件或者子组件中的shouldComponentUpdate()函数中比较,当不需要render时,不render. 当state中的值是对象时,我们必须使用深拷贝和深比较! 如果不进行深拷贝后再setState,会造成t