构造者模式
es5
function Student(name,gender,score,qulity){
this.name = name;
this.gender = gender;
this.score = score;
this.qulity = qulity;
this.sumScore = function(){
return this.score + this.qulity;
}
}
var leon = new Student('里昂','男',92,100);
es6
class Student{
constructor(name,gender,score,qulity){
this.name = name;
this.gender = gender;
this.score = score;
this.qulity = qulity;
}
sumScore(){
return this.score + this.qulity;
}
}
var leon = new Student('里昂','男',92,100);
console.log(leon.sumScore()
原型模式
function Student(name,gender,score,qulity){
this.name = name;
this.gender = gender;
this.score = score;
this.qulity = qulity;
this.sumScore = sumScore;
}
//这种方式可以只调用一份，而不是上面的创建一个Student就都创建了一个sumScore();
function sumScore(){
return this.score + this.qulity;
}
var leon = new Student('里昂','男',92,100);
原型模式（js独有）
function Student(name,gender,score,qulity){
this.name = name;
this.gender = gender;
this.score = score;
this.quality = quality;
}
//原型模式
Student.prototype.sumScore = function (){
return this.score + this.qulity;
}
var leon = new Student('里昂','男',92,100);
原型以及构造器模式的示例
es5
<!DOCTYPE html>
<html lang="en">
<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>js</title>
</head>
<body>
<table id="roster"></table>
<script>
var tableElement = document.getElementById('roster');
function Student(name,gender,score,quality){
this.name = name;
this.gender = gender;
this.score = score;
this.quality = quality;
this.mount();
}
Student.prototype.sumScore = function (){
return this.score + this.quality;
}
Student.prototype.mount = function (){
var tr = document.createElement('tr');
tr.innerHTML =
'<td>'+this.name+'</td>'+
'<td>'+this.gender+'</td>'+
'<td>'+this.score+'</td>'+
'<td>'+this.quality+'</td>'+
'<td>'+this.sumScore()+'</td>';
tableElement.appendChild(tr);
}
var leon = new Student('leondon','male',98,98)
</script>
</body>
</html>
es6
<!DOCTYPE html>
<html lang="en">
<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>js</title>
</head>
<body>
<table id="roster"></table>
<script>
var tableElement = document.getElementById('roster');
class Student{
constructor(name,gender,score,quality){
this.name = name;
this.gender = gender;
this.score = score;
this.quality = quality;
this.mount();
}
sumScore(){
return this.score + this.quality;
}
mount(){
var tr = document.createElement('tr');
tr.innerHTML =
'<td>'+this.name+'</td>'+
'<td>'+this.gender+'</td>'+
'<td>'+this.score+'</td>'+
'<td>'+this.quality+'</td>'+
'<td>'+this.sumScore()+'</td>';
tableElement.appendChild(tr);
}
}
var leon = new Student('leondon','male',88,98)
</script>
</body>
</html>
