Question

我过去2年一直在React和Redux工作，但当我在javascript中使用inheritance时，我发现这两种函数声明之间存在差异在javascript中。

我从班级a和班级b继承了班级a，每当我运行以下代码段时，它都会退出

bfunc called from class a
afunc called from class b

我假设语法bfunc = function(){将函数放在this中，语法afunc() {将函数放在类的原型中，但我并不确定。有人可以解释一下这种行为吗？

＆＃13;

class a {
  afunc() {
    console.log('afunc called from class a');
  }

  bfunc = function() {
    console.log('bfunc called from class a');
  }
}

class b extends a {
  afunc() {
    console.log('afunc called from class b');
  }

  bfunc() {
    console.log('bfunc called from class b');
  }
}

const bObject = new b();
bObject.bfunc();
bObject.afunc();

＆＃13;

bfunc called from class a
afunc called from class b

Answer 1

你的假设是正确的。如果您执行console.log(bObject);，则会看到它有自己的bfunc属性，其中包含该函数。

由于原型仅在对象没有自己的属性时使用，因此即使它被父类放入，它也会优先使用。

Answer 2

正如@Barmar在答案中所说，并且详细说明：

使用babel这是您的代码转换为： [Follow the link]。

如果你美化了代码的转换版本，你会注意到定义了一个函数：

  bfunc = function() {
    //
  }

将函数添加到this 同时：

  bfunc() {
    //
  }

将自己添加到原型中：

b.prototype.bfunc = function () {
    //do something
};

使用look here for more details了解为什么使用bfunc致电this将优先于prototype。

在类中的javascript中两种类型的函数声明的区别？

2 个答案: