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());
分享到:
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2383828
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数中的this,感兴趣的朋友一起看看吧
es6-arrow-function, shorthand 箭头函数编译为 ES5. es6-arrow-function 编译使用箭头函数编写的JavaScript以使用ES5-compatible函数语法。 例如:[1, 2, 3].map(n => n * 2);编译为:[1, 2, 3
JavaScript ES6箭头函数是一个来自ECMAScript 2015(又称ES6)的全新特性,有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下
主要介绍了ES6箭头函数和扩展,结合实例形式分析了ES6箭头函数和扩展基本功能、用法及操作注意事项,需要的朋友可以参考下
主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
3. 箭头函数内部没有自己的this,使用的是外层函数的this var obj = { fn1:function(){ console.log(this); }, fn2:()=>{ console.log(this); } } obj.fn1(); //obj obj.fn2(); //window 4. 箭头
es6箭头函数提供了一种更加简洁的函数书写方式
本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 基本用法: ES6中允许使用“箭头”(=>)定义函数 var f = v => v; 上面代码相当于: var f = ...
JavaScript ES6函数式编程入门经典
等箭头功能 npm模块,以确定某个功能是否为ES6箭头功能。 注意:目前仅在Firefox中有效。例子var isArrowFunction = require ( 'is-arrow-function' ) ;assert ( ! isArrowFunction ( function ( ) { } ) ) ;assert ...
没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...
主要介绍了es6函数之箭头函数用法,结合实例形式详细分析了es6箭头函数基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
ES6—箭头函数 0.为什么会出现箭头函数? 1.传统的javascript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {},这至少会出现两个问题,ES6箭头函数都圆满解决了它, 第一个...
详解Javascript ES6中的箭头函数(Arrow Functions)_.docx