记录由于自身太菜而让人产生很多问号的JS行为

看看下面的例子,猜猜会输出什么。

Round1

const l = console.log
window.greeting = 'bye'
class A {
  greeting = 'hello'
  arrow_a = () => { console.log(this.greeting + ' arrow') }
  func_a() { console.log(this.greeting + ' bind') }
}
console.log(A.prototype)
let a = new A()
let {arrow_a, func_a} = a
arrow_a()
a.arrow_a() 
func_a() 
a.func_a()

输出:

{constructor: ƒ, func_a: ƒ}
hello arrow
hello arrow
bind
hello bind

Round2

class B extends A {
  arrow_b = () => {
    super.arrow_a()
  }
  func_b() {
    super.func_a()
  }
}
console.log(B.prototype) 
let b = new B()
b.arrow_b()
b.func_b()

输出:

A {constructor: ƒ, func_b: ƒ}
Uncaught TypeError: (intermediate value).arrow_a is not a function
hello bind

Round3

class C extends A {
  func_c() {
    super.arrow_a()
  }
  arrow_a() {
    super.arrow_a()
  }
}
console.log(C.prototype)
console.log(C.prototype.__proto__)
let c = new C()
c.arrow_a()
c.func_c()

输出:

A {constructor: ƒ, func_c: ƒ, arrow_a: ƒ}
{constructor: ƒ, func_a: ƒ}
hello arrow
Uncaught TypeError: (intermediate value).arrow_a is not a function

Round4

class D extends A {}
console.log(D.prototype)
console.log(D.prototype.__proto__)
let d = new D()
d.arrow_a()

输出:

A {constructor: ƒ}
{constructor: ƒ, func_a: ƒ}
hello arrow