`
liyixing1
  • 浏览: 961597 次
  • 性别: Icon_minigender_1
  • 来自: 江西上饶
社区版块
存档分类
最新评论

es6箭头函数与this指向

阅读更多
this 的指向

类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

上面代码中,printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined),从而导致找不到print方法而报错。

一个比较简单的解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}



另一种解决方法是使用箭头函数。

class Obj {
  constructor() {
    this.getThis = () => this;
  }
}

const myObj = new Obj();
myObj.getThis() === myObj // true


箭头函数内部的this总是指向定义时所在的对象。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。

还有一种解决方法是使用Proxy,获取方法的时候,自动绑定this。


function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}

const logger = selfish(new Logger());
分享到:
评论

相关推荐

    关于ES6箭头函数中的this问题

    ES6箭头函数中的this问题 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性...ES6箭头函数中的this问题需要我们深入理解箭头函数中的this指向的固定化,避免混淆一般函数定义的函数的this指向。

    JavaScript ES6箭头函数使用指南

    JavaScript ES6箭头函数是ECMAScript 2015引入的一个重要特性,它提供了更加简洁的函数定义方式,同时也改变了传统函数中`this`的指向规则。箭头函数的出现,部分原因是受到CoffeeScript的影响,其核心在于简化代码...

    ES6中的箭头函数实例详解

    总结,ES6中的箭头函数提供了更简洁的函数定义方式,尤其是在处理`this`上下文时,能够避免传统函数中常见的`this`指向问题。然而,由于其特性限制,箭头函数并不适用于所有场景,开发者需根据实际需求选择合适的...

    ES6箭头函数和扩展实例分析

    **ES6箭头函数**是JavaScript的一个重要更新,它提供了更简洁的语法来定义函数,尤其是在处理回调函数和匿名函数时。箭头函数的主要特点包括: 1. **语法简洁**: 箭头函数的基本形式是 `(参数列表) => 表达式`。...

    javascript ES6中箭头函数注意细节小结

    总结以上内容,ES6中箭头函数的引入,旨在为JavaScript开发者提供更加简洁和直观的函数书写方式,并解决了传统函数中关于this指向的困扰。通过使用箭头函数,可以避免常规函数中常见的this绑定问题,使得代码更加...

    04-箭头函数.rar

    这意味着,箭头函数不会像常规函数那样在调用时重新绑定this,这对于在事件处理或回调函数中使用this非常有利,避免了在闭包中的this指向问题。 3. **返回值**:如果函数体只有一条语句且该语句可以返回一个值,...

    ES6对象方法声明对象时,箭头函数this的指向问题

    没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...

    深入浅出ES6新特性之函数默认参数和箭头函数

    **深入浅出ES6新特性:函数默认参数与箭头函数** 在JavaScript的ES6版本中,引入了许多新的特性,极大地提升了开发效率和代码的可读性。其中,函数默认参数和箭头函数是两个非常实用且重要的特性。本文将详细讲解这...

    ES6学习笔记.docx

    *箭头函数的 this:箭头函数的 this 指向的是当前的上下文,而不是函数的调用者。 * ES6 默认值:箭头函数可以使用默认值,例如:`let add = (x, y = 1) => x + y;`。 * 箭头函数不适用场景:箭头函数不适用于作为...

    es6函数之箭头函数用法实例详解

    ES6中的箭头函数是JavaScript语法的一大改进,它提供了一种更加简洁的函数定义方式,同时也改变了函数中`this`的绑定规则。下面我们将详细探讨箭头函数的基本用法、特性以及注意事项。 ### 基本用法 1. **单参数...

    04-箭头函数的缺点.md

    箭头函数是ES6中引入的一种函数表达式写法,它具有简洁的语法和词法作用域的特性,即不会创建自己的this,而是捕获其所在上下文的this值。然而,尽管箭头函数在很多场景下非常有用,但它们也存在一些缺点和限制,...

    深入理解Javascript箭头函数中的this

    JavaScript中的箭头函数是ES6引入的一个重要特性,它的出现主要解决了传统函数中`this`指针的问题。在JavaScript中,`this`的值取决于函数的调用方式,而不是定义时的位置,这经常导致开发者在处理`this`时遇到困扰...

    详解Javascript ES6中的箭头函数(Arrow Functions)

    箭头函数不会创建自己的`this`上下文,而是继承自父作用域的`this`,这与普通函数不同,避免了`this`指向问题。 ```javascript var obj = { data: ['John Backus', 'John Hopcroft'], init: function() { ...

    ES6标准 Arrow Function(箭头函数=)

    总的来说,箭头函数的出现让JavaScript的函数定义更加简洁、易读,同时也解决了`this`指向的困扰。虽然它不能作为构造函数使用,并且失去了`arguments`对象,但这些限制通常在合理的代码设计下并不会成为问题。掌握...

    事件处理函数的this

    解决这个问题的一种常见策略是使用箭头函数(ES6引入的新特性),因为箭头函数没有自己的this,它会捕获其所在(即定义时)的作用域的this值。 总的来说,"事件处理函数的this"是JavaScript中一个需要深入理解的...

    解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    总结以上内容,解决Vue中setTimeout和setInterval在离开当前路由时未销毁的问题需要结合Vue的生命周期、JavaScript的this指向以及ES6箭头函数的特性。确保在组件销毁前清除定时器,并正确地引用Vue实例的方法,以...

    解析vue data不可以使用箭头函数问题

    }, // 箭头函数,this指向定义时的上下文,这里是全局对象(非严格模式下是window) b() { console.log(this, 'b'); } // 普通函数,this指向调用时的对象,即obj }; ``` 在Vue的初始化过程中,`data` 选项如果是...

    ie11兼容es6语法资源包

    2. **箭头函数(Arrow Functions)**:箭头函数提供了一种更紧凑的函数定义方式,同时解决了`this`指向的问题。 3. **模板字符串(Template Strings)**:使用反引号(`)定义,可以方便地插入变量,支持多行字符串。 ...

Global site tag (gtag.js) - Google Analytics