7.ES6中的對象：
在ES6中，將對象的語法也簡潔了
單體模式的對象：
以前是用json的方法：
var person={
name:'小明',
age:21,
showName:function(){
alert(this.name);
},
showAge:function(){
alert(this.age);
}
}
person.showName();
person.showAge();
ES6將其簡化了：
var name='小明';
var age=16;
var person={
name,
age,
showName(){
alert(this.name);
},
showAge(){
alert(this.age);
}
}
person.showName();
person.showAge();
-------------------------------------------------------------------------------------
補充：函數參數給默認值：
function move(obj,json,options){
console.log(options)
}
move(); //會報錯，函數move需要傳參，在調用函數時，並沒有給函數傳實參，就會報錯
解決上面的問題，防止報錯，我們可以給函數的參數傳默認值
function move(obj='參數必須要寫',json={},options={}){
console.log(obj);
console.log(options);
}
move(); //這里因為給函數的參數傳了默認值，所以就不會報錯
-------------------------------------------------------------------------------------
8.面向對象：
1）之前面向對象的方法
function Person(name,age){ 類，構造函數
//為對象添加屬性
this.name=name;
this.age=age;
}
//為對象添加方法
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
var p1=new Person('aaa',21);
p1.showAge(); //21
2）ES6面向對象的方法：
類：class
構造函數：constructor 指生成完實例以后，自己就執行的函數
//面向對象
class Person{ //類
//為對象添加屬性
constructor(name='default',age=0){ //給參數傳默認值，防止調用時忘記傳實參而報錯
this.name=name;
this.age=age;
}
//為對象添加方法
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
var person1=new Person('小明',12);
var person2=new Person('小李',51);
alert(person1.name); //小明
person1.showAge(); //12
person2.showName(); //小李
alert(person1.showAge==person2.showAge); //true
alert(person1.constructor==Person); //true
-------------------------------------------------------------------------------
8.面向對象的繼承：
1）之前面向對象的繼承
function Person(name,age){ //類，構造函數
//為對象添加屬性
this.name=name;
this.age=age;
}
//為對象添加方法
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
//Work繼承Person
function Work(name,age){
Person.apply(this,arguments); //子類繼承父類的屬性
}
Work.prototype=new Person(); //子類繼承父類的方法
var p1=new Person('aaa',21);
var w1=new Work('bbb',54);
p1.showAge(); //21
w1.showName(); //bbb
2）ES6中面向對象的繼承
特點:將繼承的語法簡化
//面向對象
class Person{
//為對象添加屬性
constructor(name='default',age=0){
this.name=name;
this.age=age;
}
//為對象添加方法
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
//繼承
class Worker extends Person{ //這里即可實現子類的繼承
//繼承之后，添加子類特有的屬性
constructor(name,age,job){
super(name,age); //使用super()將父類的屬性繼承過來，同時添加子類自己的新屬性。如果不加，這個constructor將會把從父類繼承的constructor中的屬性和方法覆蓋，從而使子類沒有繼承name,age屬性，而報錯
this.job=job;
}
//繼承之后，添加子類特有的方法
showJob(){
alert(this.job);
}
}
var person1=new Person('小明',12);
var person2=new Person('小李',51);
var woker=new Worker('子類',32,'WEB工程師');
alert(person1.name);
person1.showAge();
person2.showName();
alert(person1.showAge==person2.showAge); //true
woker.showName(); //子類
woker.showAge();
woker.showJob();
--------------------------------------------------------------------------------------------------------------
面向對象和繼承的小應用：
1)隊列的增加與刪除
class Queue{
constructor(content){
this._queue=[...content];
}
shift(){
return this._queue.shift();
}
push(value){
this._queue.push(value);
return this._queue.length;
}
}
var q1=new Queue([1,2,3,4]);
var q2=new Queue([5,6,7,8]);
q1.shift();
q2.push(9);
console.log(q1._queue);
console.log(q2._queue);
2)ES6制作選項卡並實現繼承
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>選項卡</title>
8 <style>
9 .btn{ 10 background: red; 11 color: #fff; 12 } 13 .box div{ 14 width: 100px; 15 height: 100px; 16 border: solid 1px #000; 17 display: none; 18 } 19 </style>
20 </head>
21 <body>
22 <!-- 選項卡 -->
23 <div id="box" class="box">
24 <input type="button" value="選項卡1" class="btn">
25 <input type="button" value="選項卡2">
26 <input type="button" value="選項卡3">
27 <div style="display:block;">1111</div>
28 <div>2222</div>
29 <div>3333</div>
30 </div>
31
32 <!-- 定時選項卡 -->
33 <div id="box2" class="box">
34 <input type="button" value="選項卡1" class="btn">
35 <input type="button" value="選項卡2">
36 <input type="button" value="選項卡3">
37 <div style="display:block;">1111</div>
38 <div>2222</div>
39 <div>3333</div>
40 </div>
41
42
43 <script type="text/javascript">
44 //選項卡
45 class Tab{ //類
46 constructor(id){ //constructor在new出來一個實例時就自動執行
47 this.oBox=document.getElementById(id); 48 this.aBtn=this.oBox.getElementsByTagName('input'); 49 this.aDiv=this.oBox.getElementsByTagName('div'); 50 this.iNow=0; 51 this.init(); 52 } 53 init(){ //為對象添加方法
54 for (let i = 0; i < this.aBtn.length; i++) { 55 this.aBtn[i].onclick=function(){ 56 this.hide(); //先循環讓所有的都隱藏
57 this.show(i); //再讓選擇的第i個顯示出來
58 }.bind(this); //bind(this)進行校正this的值
59 } 60 } 61 hide(){ 62 for (let i = 0; i < this.aBtn.length; i++) { 63 this.aBtn[i].className=''; 64 this.aDiv[i].style.display='none'; 65 } 66 } 67 show(index){ 68 this.aBtn[index].className='btn'; 69 this.aDiv[index].style.display='block'; 70 } 71 } 72
73 //定時選項卡，部分繼承上面的選項卡
74 class AutoTab extends Tab{ 75 constructor(id){ 76 super(id); //繼承，防止覆蓋
77 setInterval(this.next.bind(this),1000); 78 } 79 next(){ 80 this.iNow++; 81 if (this.iNow==this.aBtn.length) { 82 this.iNow=0; 83 } 84 this.hide(); 85 this.show(this.iNow); 86 } 87 } 88
89 window.onload=function(){ 90 var tb=new Tab('box'); 91 var Atotb=new AutoTab('box2'); 92 }; 93 </script>
94 </body>
95 </html>