JavaScript原型对象上的方法报错？

Question

// echart图表环形图配置

  // 封装echarts圆环百分比图示
  function _PercentPie (options) {
    this.backgroundColor = options.backgroundColor || '#fff'
    this.color = options.color
    this.fontSize = options.fontSize || '14px'
    this.domEle = options.domEle //必传参数
    this.value = options.value
    // 判断项目状态
    this.ProjectStatus = function () {
      var _status
      switch (this.value){
        case 0:
        return _status = '终止'
        break;
        case 100:
        return _status = '已完成'
        break;
        default:
        return _status = `${this.value}%`
      }
    }
  }
  _PercentPie.prototype.init = function () {
    // this指代当前实例化的图表
    var _that = this
    var options = {
      color:_that.color,
      // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
      silent:true,
      hoverAnimation:false,
      series: [
        {
          type:'pie',
          radius: ['80%', '100%'],
          hoverAnimation:false,
          label: {
            show: true,
            position: 'center',
            animation: false
          },
          data:[
            {value: _that.value,name:_that.ProjectStatus()},
            {value:100,name:''},
          ]
        }
      ]
    }
    // 挂载echart
    echarts.init(_that.domEle).setOption(options);
  }

  // 实例化百分比图表 封装在立即执行函数中
  (function(){
    var chart = document.querySelectorAll('.chart');
    var length = chart.length
    // 配置数据项
    var data = [
      {ringColor: ["#0099FF",'#F0F2F5'],value:40},
      {ringColor: ["#0099FF",'#F0F2F5'],value:50},
      {ringColor: ["#FF0000",'FF0000'],value:0},
      {ringColor: ["#00B200",'#00B200'],value:100}
    ]
    for (let i = 0; i < data.length; i++) {
      var _percentPie = new _PercentPie({
        color: data[i].ringColor,
        value: data[i].value,
        domEle:chart[i]
      });
      // 初始化配置
      _percentPie.init();
    }
  }())

为什么这个init方法报错了 ，not function? 期望大佬解惑

Answer 1

因为你这块的代码没有执行！

_PercentPie.prototype.init = function () {
    // this指代当前实例化的图表
    var _that = this
    var options = {
      color:_that.color,
      // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
      silent:true,
      hoverAnimation:false,
      series: [
        {
          type:'pie',
          radius: ['80%', '100%'],
          hoverAnimation:false,
          label: {
            show: true,
            position: 'center',
            animation: false
          },
          data:[
            {value: _that.value,name:_that.ProjectStatus()},
            {value:100,name:''},
          ]
        }
      ]
    }
    // 挂载echart
    echarts.init(_that.domEle).setOption(options);
  }

放在立即执行函数里就可以了

  // echart图表环形图配置

  // 封装echarts圆环百分比图示
  function _PercentPie (options) {
    this.backgroundColor = options.backgroundColor || '#fff'
    this.color = options.color
    this.fontSize = options.fontSize || '14px'
    this.domEle = options.domEle //必传参数
    this.value = options.value
    // 判断项目状态
    this.ProjectStatus = function () {
      var _status
      switch (this.value){
        case 0:
          return _status = '终止'
          break;
        case 100:
          return _status = '已完成'
          break;
        default:
          return _status = `${this.value}%`
      }
    }
  }


  // 实例化百分比图表 封装在立即执行函数中
  (function(){
    _PercentPie.prototype.init = function () {
      // this指代当前实例化的图表
      var _that = this
      var options = {
        color:_that.color,
        // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
        silent:true,
        hoverAnimation:false,
        series: [
          {
            type:'pie',
            radius: ['80%', '100%'],
            hoverAnimation:false,
            label: {
              show: true,
              position: 'center',
              animation: false
            },
            data:[
              {value: _that.value,name:_that.ProjectStatus()},
              {value:100,name:''},
            ]
          }
        ]
      }
      // 挂载echart
      echarts.init(_that.domEle).setOption(options);
    }
    
    var chart = document.querySelectorAll('.chart');
    var length = chart.length
    // 配置数据项
    var data = [
      {ringColor: ["#0099FF",'#F0F2F5'],value:40},
      {ringColor: ["#0099FF",'#F0F2F5'],value:50},
      {ringColor: ["#FF0000",'FF0000'],value:0},
      {ringColor: ["#00B200",'#00B200'],value:100}
    ]
    for (let i = 0; i < data.length; i++) {
      var _percentPie = new _PercentPie({
        color: data[i].ringColor,
        value: data[i].value,
        domEle:chart[i]
      });
      // 初始化配置
      _percentPie.init();
    }
  }())

Answer 2

这是声明提升的锅

_PercentPie.prototype.init = function () {}

这叫表达式，不会提升
下面这个是函数声明，在当前作用域内提升

function _PercentPie (options){}

立即执行函数IIFE可以看作声明了一个匿名函数。
由于只在当前作用域内提升，那么只要在IIFE外面包一层{}就行了

function _PercentPie (options) {
    this.backgroundColor = options.backgroundColor || '#fff'
    this.color = options.color
    this.fontSize = options.fontSize || '14px'
    this.domEle = options.domEle //必传参数
    this.value = options.value
    // 判断项目状态
    this.ProjectStatus = function () {
      var _status
      switch (this.value){
        case 0:
        return _status = '终止'
        break;
        case 100:
        return _status = '已完成'
        break;
        default:
        return _status = `${this.value}%`
      }
    }
  }
  _PercentPie.prototype.init = function () {
    // this指代当前实例化的图表
    var _that = this
    var options = {
      color:_that.color,
      // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
      silent:true,
      hoverAnimation:false,
      series: [
        {
          type:'pie',
          radius: ['80%', '100%'],
          hoverAnimation:false,
          label: {
            show: true,
            position: 'center',
            animation: false
          },
          data:[
            {value: _that.value,name:_that.ProjectStatus()},
            {value:100,name:''},
          ]
        }
      ]
    }
    // 挂载echart
    echarts.init(_that.domEle).setOption(options);
  }

{
  // 实例化百分比图表 封装在立即执行函数中
  (function(){
    var chart = document.querySelectorAll('.chart');
    var length = chart.length
    // 配置数据项
    var data = [
      {ringColor: ["#0099FF",'#F0F2F5'],value:40},
      {ringColor: ["#0099FF",'#F0F2F5'],value:50},
      {ringColor: ["#FF0000",'FF0000'],value:0},
      {ringColor: ["#00B200",'#00B200'],value:100}
    ]
    for (let i = 0; i < data.length; i++) {
      var _percentPie = new _PercentPie({
        color: data[i].ringColor,
        value: data[i].value,
        domEle:chart[i]
      });
      // 初始化配置
      _percentPie.init();
    }
  }())
}

Answer 3

js是弱类型语言，语法很不严谨，就像

var a = 1
a += 1
a++

会在末尾自动补全分号，这里你的写法可以看作为

_PercentPie.prototype.init = function () {

}(function(){})

这里把你的自调函数当作了参数传给立即运行函数，并等待有结果后，返回给_PercentPie.prototype.init，所以在函数运行的时候，_PercentPie.prototype.init还是undefined

解决方法：
1：_PercentPie.prototype.init = function () {}后加;
2：(function(){})改为!function(){}()或者其他运算符，如+、-、~、!等