如何在 Javascript 中调用和创建对象？答案

【问题标题】：How to call and create AN object in Javascript?如何在 Javascript 中调用和创建对象？
【发布时间】：2017-06-14 11:04:53
【问题描述】：

我有一个名为employee 的对象及其getter 和setter，它们会被很好地定义和实现吗？

如何在我的 Javascript 函数列表中访问对象 Person 的值，以便在我的动态表中显示它？

var operations = {

   init: function() {
      console.log("init");
      operations.setupButton();
   },
   setupButton: function() {
      $("#btnList").on("click", operations.list);
   },
   list: function() {

      var table = $("#tblEmployee");
      var strHtml = "";


      var emp = new employee();
      // load my jsp table
      strHtml += '<tr>';

      strHtml += '<td>' + emp.getName + '</td>';
      strHtml += '<td>' + emp.getAge + '</td>';
      strHtml += '<td>' + emp.getSalary + '</td>';

      strHtml += '<tr>';

      tabla.append(strHtml);
   }
};

var employee = {

   name: 'Jean',
   age: 22,
   salary: 8000000,

   getName() {
      return this.name;
   },
   getAge() {
      return this.age;
   },
   getSalary() {
      return this.salary;
   }
};
$(document).ready(operations.init);

【问题讨论】：

标签： javascript function object html-table call

【解决方案1】：

我稍微修改了您的代码。我不确定它是否是你需要的。如有必要，请检查并更新 jsFiddle。

example code in JsFiddle

    function employee() {
   this.name = 'Jean';
   this.age = 22;
   this.salary = 8000000;

   this.getName = function() {
      return this.name;
   }
};

var operations = {
    init: function() {
        console.log("init");
        operations.setupButton();
   },
   list: function() {
      var table = $("#tblEmployee");
      var strHtml = "";
      var emp = new employee();
      strHtml += '<tr>';
      strHtml += '<td>' + emp.getName() + '</td>';
      strHtml += '</tr>';
      table.append(strHtml);
    },
    setupButton: function() {
        $("#btnList").on("click", operations.list);
    }      
};

$(document).ready(operations.init);

【讨论】：

【解决方案2】：

你有一些印刷错误并且做错了什么

function Employee(){

   name = 'Jean';
   age  = 22;
   salary: 8000000;

   getName = function() {
      return this.name;
   }
   
   getAge = function() {
      return this.age;
   }
   
   getSalary = function() {
      return this.salary;
   }
};

var operations = {

   init: function() {
      console.log("init");
      operations.setupButton();
   },
   setupButton: function() {
      $("#btnList").on("click", operations.list);
   },
   list: function() {

      var table = $("#tblEmployee");
      var strHtml = "";


      var emp = new Employee();
      // load my jsp table
      strHtml += '<tr>';

      strHtml += '<td>' + emp.getName + '</td>';
      strHtml += '<td>' + emp.getAge + '</td>';
      strHtml += '<td>' + emp.getSalary + '</td>';

      strHtml += '<tr>';

      table.append(strHtml);
   }
};

$(document).ready(operations.init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="tblEmployee">
  <tbody>
  </tbody>
</table>
<button id="btnList">List</button>

在这里检查你的错误：

Javascript "Not a Constructor" Exception while creating objects

【讨论】：

你正在创建全局变量

【解决方案3】：

有两种方法可以想象Employee，具体取决于您可以假设的 ECMAScript 版本。

ES6 或更高版本，你可以写一个class。 （这实际上是 ES5 方式的语法糖，我将在后面介绍）

class Employee {
    constructor(name = 'Jean', age = 22, salary = 8000000) { // ES6 supports param defaults
        Object.assign(this, {
            name,
            age,
            salary
        });
    }
    // These functions will be inherited by and shared by all instances of Employee
    getName() {
        return this.name;
    }
    getAge() {
        return this.age;
    }
    getSalary() {
        return this.salary;
    }
}

ES5 或更低版本，使用构造函数和原型继承。这更符合 JavaScript 真正实现结构的方式

function Employee(name, age, salary) {
    if (typeof name === 'undefined') name = 'Jean'; // ES5 requires manual default setting
    if (typeof age === 'undefined') age = 22;
    if (typeof salary === 'undefined') salary = 8000000;
    this.name = name;
    this.age = age;
    this.salary = 8000000;
}
// These functions will be inherited by and shared by all instances of Employee
Employee.prototype.getName = function getName() {
    return this.name;
};
Employee.prototype.getAge = function getAge() {
    return this.age;
};
Employee.prototype.getSalary = function getSalary() {
    return this.salary;
};

两种情况下的用法，

new Employee(); // Employee {name: 'Jean', age: 22, salary: 8000000}

【讨论】：