获取 Function.prototype.bind.apply(...) 不是构造函数错误答案

【问题标题】：Getting Function.prototype.bind.apply(...) is not a constructor error获取 Function.prototype.bind.apply(...) 不是构造函数错误
【发布时间】：2018-03-14 09:00:50
【问题描述】：

我正在尝试在 AngularJS (1.6.9) 中模拟控制器继承，但我在控制台上收到错误消息：Function.prototype.bind.apply(...) is not a constructor
这是 HTML 文件：

<!-- Controller Inheritance -->

<!DOCTYPE html>
<html lang="en" ng-app="app7">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tutorial 7</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as parent">
  <p>Name: {{parent.name}}</p>
  <p>Sound: {{parent.sound}}</p>
  <button ng-click="parent.animalClick()">Animal Data</button>
</div>
<br><br>
<div ng-controller="dogCtrl as dog">
  <p>Name: {{dog.child.name}}</p>
  <p>Sound: {{dog.child.sound}}</p>
  <button ng-click="dog.child.animalClick()">Dog Data</button>
  <button ng-click="dog.child.dogData()">Get More Data</button>
</div>
  <script src="js/exam7.js"></script>
</body>
</html>

这里是JS文件：

//Controller Inheritance Demonstration

let app7 = angular.module('app7',[]);

//Parent Controller

app7.controller('mainCtrl',()=>{
  this.name="Animal";
  this.sound="Silent";

  this.animalClick= ()=>{
    alert(this.name+' says '+this.sound);
  };
});

//Child Controller

app7.controller('dogCtrl',($controller)=>{
  let childCtrl = this;
  childCtrl.child=$controller('mainCtrl',{});
  childCtrl.child.name="Dog";
  childCtrl.child.bark="Woof"; //child`s own variable

  childCtrl.child.dogData = ()=>{
    alert(this.name+' says '+this.sound+' and '+this.bark);
  };
});

我试图在childCtrl 中继承mainCtrl 但无法这样做。输出不如预期。这种错误背后的可能原因是什么？

【问题讨论】：

标签： javascript angularjs inheritance prototype angularjs-controller

【解决方案1】：

您不能在 AngularJS 的任何地方都使用 箭头符号。

AngularJS 尝试使用 new your_function(){...} 方法调用函数，将其视为一个类，但使用箭头符号 new ()=>{...} 却无法做到这一点。

简单的改变

app7.controller('mainCtrl',()=>{

到

app7.controller('mainCtrl',function(){

（以及其他地方）

您在打印子值时也有错误的逻辑。您需要先访问.child. 子属性，然后才能打印任何内容。

这是您的代码的一个工作示例：

let app7 = angular.module('app7', []);

//Parent Controller

app7.controller('mainCtrl', function() {
  this.name = "Animal";
  this.sound = "Silent";

  this.animalClick = () => {
    alert(this.name + ' says ' + this.sound);
  };
});

//Child Controller

app7.controller('dogCtrl', function($controller) {
  let childCtrl = this;
  childCtrl.child = $controller('mainCtrl', {});
  childCtrl.child.name = "Dog";
  childCtrl.child.bark = "Woof"; //child`s own variable

  childCtrl.child.dogData = () => {
    alert(this.child.name + ' says ' + this.child.sound + ' and ' + this.child.bark);
  };
});

<!DOCTYPE html>
<html lang="en" ng-app="app7">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tutorial 7</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>
  <div ng-controller="mainCtrl as parent">
    <p>Name: {{parent.name}}</p>
    <p>Sound: {{parent.sound}}</p>
    <button ng-click="parent.animalClick()">Animal Data</button>
  </div>
  <br><br>
  <div ng-controller="dogCtrl as dog">
    <p>Name: {{dog.child.name}}</p>
    <p>Sound: {{dog.child.sound}}</p>
    <button ng-click="dog.child.animalClick()">Dog Data</button>
    <button ng-click="dog.child.dogData()">Get More Data</button>
  </div>

</body>

</html>

【讨论】：

@BinayakShankar 我已经添加了您的代码并进行了一些修复，它应该可以按预期工作
与常规函数不同，箭头函数没有自己的this。