关于在es6的在class类里定义箭头函数会报错的问题?

Posted sunshine

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于在es6的在class类里定义箭头函数会报错的问题?相关的知识,希望对你有一定的参考价值。

class App {
    constructor() {
        this.handleClick = () => {
            console.log(this is:, this);
        }
    } 
    // handleClick1 = () => {
    //     console.log(‘this is:‘, this);
    // }
     handleClick2(){
        console.log(this is:, this);
    }

}
const app = new App();
app.handleClick();//this is: App { handleClick: [Function] }
// app.handleClick1();//会报错
app.handleClick2();//this is: App { handleClick: [Function] }

解释一下:


私有属性的提案

与私有方法一样,ES6 不支持私有属性。目前,有一个提案,为class加了私有属性。方法是在属性名之前,使用#表示。

class Point {
  #x;

  constructor(x = 0) {
    #x = +x; // 写成 this.#x 亦可
  }

  get x() { return #x }
  set x(value) { #x = +value }
}

 

上面代码中,#x就表示私有属性x,在Point类之外是读取不到这个属性的。还可以看到,私有属性与实例的属性是可以同名的(比如,#xget x())。

私有属性可以指定初始值,在构造函数执行时进行初始化。

class Point {
  #x = 0;
  constructor() {
    #x; // 0
  }
}

 

之所以要引入一个新的前缀#表示私有属性,而没有采用private关键字,是因为 javascript 是一门动态语言,使用独立的符号似乎是唯一的可靠方法,能够准确地区分一种属性是否为私有属性。另外,Ruby 语言使用@表示私有属性,ES6 没有用这个符号而使用#,是因为@已经被留给了 Decorator。

该提案只规定了私有属性的写法。但是,很自然地,它也可以用来写私有方法。

class Foo {
  #a;
  #b;
  #sum() { return #a + #b; }
  printSum() { console.log(#sum()); }
  constructor(a, b) { #a = a; #b = b; }
}

 

上面代码中,#sum()就是一个私有方法。

另外,私有属性也可以设置 getter 和 setter 方法。

class Counter {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
  }

  constructor() {
    super();
    // ...
  }
}

 

上面代码中,#x是一个私有属性,它的读写都通过get #x()set #x()来完成。

以上是关于关于在es6的在class类里定义箭头函数会报错的问题?的主要内容,如果未能解决你的问题,请参考以下文章

关于 ES6箭头函数

Vue中匿名函数和箭头函数的this

ES6新增语法详述 𳞰

ES6新增语法详述 𠀶

深入ES6中的class类

js学习笔记04-ES6函数(箭头函数与this),class