优质文章外链发布 5元/条 QQ:2970302840
Camila Waz 发布于
2019-10-08 16:22:02

es6箭头函数与this指向

this 的指向
类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。
Javascript代码
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方法了。
Javascript代码
class Logger {  
  constructor() {  
    this.printName = this.printName.bind(this);  
  }  
  
  // ...  
}  
另一种解决方法是使用箭头函数
Javascript代码
class Obj {  
  constructor() {  
    this.getThis = () => this;  
  }  
}  
const myObj = new Obj();  
myObj.getThis() === myObj // true  
箭头函数内部的this总是指向定义时所在的对象。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。
还有一种解决方法是使用Proxy,获取方法的时候,自动绑定this。
Javascript代码
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());
文章来源:https://www.iteye.com/blog/liyixing1-2440173
最后生成于 2019-10-15 12:40:05