如何在Javascript中調用並創建一個對象？

Question

我有一個叫做員工的對象，它的getter和setter將會被定義好並實現嗎？

如何訪問我的函數列表中的對象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); 

Answer 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); 

Answer 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

Answer 3

有兩種方法可以想象Employee，具體取決於您可以採用哪種版本的ECMAScript。

ES6或更高版本，您可以編寫類。 （這是真的在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}