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 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>