Javascript在使用创建的对象调用另一个函数后创建了未定义的对象属性值答案

【问题标题】：Javascript created object property values undefined after calling another function with created objectJavascript在使用创建的对象调用另一个函数后创建了未定义的对象属性值
【发布时间】：2017-04-02 23:18:45
【问题描述】：

我知道这可能是一个愚蠢的问题，但我是 javascript 新手，所以希望得到一些指导。

我创建了以下notificationSocketEventHandler 对象：

const notificationSocketEventHandler = Object.create(socketHandlerProto, {
  validators: {
    created: [],
    destroyed: [],
    loadedFromSocket: [],
    updated: [],
    addedto: {
      relation: []
    },
    removedfrom: {

    }
  },
  created: function (data) {
    if (this.validateProfileData(data, validators.created)) {} else {}
  },
  destroyed: function (data) {},
  updated: function (data) {},
  loadedFromSocket: function (data) {
      console.log('Loaded from socket')
      console.log(data)
  }
})

此事件处理程序用于侦听来自套接字的通知 so and 是这样设置的

$.globals.socket.on('notifications',notificationSocketEventHandler);

事件原型是这样定义的：

$.globals.socket = {
  events: {},
  on: function (attr, func) {
    if (!attr) return false
    this.events[attr] = this.events[attr] || [];
    this.events[attr].push(func)
    return true
  },
  remove(attr, func) {
    if (!events[attr]) return false

    this.events[attr].forEach(function (f, indx) {
      if (f === func) {
        events[attr].slice(indx, 1)
      }
    })
  },
  trigger: function (attr, thisArg, paramArgs) {
    if (Array.isArray(attr) && attr.length) {
      var obj = this.events[attr[0]]
      for (var i = 1; i < attr.length; i++) {
        if (!obj) return
        obj = obj[attr[i]]
      }
      if (typeof obj == 'function') obj.apply(thisArg, paramArgs)
      if (Array.isArray(obj)) {
        obj.forEach(function (c) {
          if (typeof c == 'function') c.apply(thisArg, paramArgs)
        })
      }
      return
    }
    if(this.events[attr]){
      console.log(this.events[attr])
      this.events[attr].forEach(function (f) {
        if (typeof f === 'function')
          f.apply(thisArg, paramArgs)
      })
    }
  }
}

我遇到的问题是notificationSocketEventHandler 对象被传递给$.globals.socket.on 函数并最终推入事件对象后，notificationSocketEventHandler 的属性如created、destroyed、@ 987654330@ 在传递给$.globals.socket.on 函数之前被定义为函数，在事件对象中突然变成“未定义”，这是为什么呢？

【问题讨论】：

标签： javascript function object properties undefined

【解决方案1】：

Object.create 有点令人困惑——你不能使用普通对象作为第二个参数，它必须是“属性描述符”的对象。要正常工作，您的代码需要按照以下几行进行格式化：

const notificationSocketEventHandler = Object.create(socketHandlerProto, {
  'validators': {
    value: {
     'created': {
          value: []
      },
      'destroyed': {
          value: []
      },
      'loadedFromSocket': {
           value: []
      }
    }    
  }
});

除非您对这些属性进行迭代，否则将会很乏味。您最好避免使用 Object.create 并正常创建对象：

const notificationSocketEventHandler = {
   created: [],
   destroyed: [],
   etc...
}

或将属性添加到构造函数的原型中（顺便说一句，人们通常使构造函数名称以大写字母开头，因此很明显它们是构造函数 - 省去了在名称末尾添加“Proto”的麻烦一件事。无论如何）：

var SocketHandler = function {
    this.created = [];
    this.destroyed = []
    etc...
}

const notificationSocketEventHandler = new SocketHandler

或

var SocketHandler = {};
SocketHandler.prototype.created = [];
SocketHandler.prototype.destroyed = [];
etc...

【讨论】：