前端入门系列--js高级(1)

1、面向过程与面向对象

1、面向过程：面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了；

2、面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作；

两者对比：

2、对象与类

2.1 对象

对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

两种创建对象的方法：

//以下代码是对对象的复习
//字面量创建对象
var ldh = {
    name: '刘德华',
    age: 18
}
console.log(ldh);

//构造函数创建对象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);	

上面的第二种是在ES6出来以前没有类的概念所以他跟构造函数来创建对象；
两者运行结果如下所示，第二种显示出了构造函数star：

2.2 类

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象；

2.2.1创建类

通过class关键字可以创建类，如果不写constructor则会有默认的constructor，在我们new一个实例对象时就会自动调用其中的constructor：

 // 1. 创建类 class  创建一个 明星类
 class Star {
   // 类的共有属性放到 constructor 里面，constructor是类的构造函数
   constructor(name, age) {
   this.name = name;
   this.age = age;
   }
   sing(song) {
      console.log(this.uname + '唱' + song);
    }
 }
   // 2. 利用类创建对象 new
   var ldh = new Star('刘德华', 18);
   console.log(ldh);
   ldh.sing('冰雨'); // 刘德华唱冰雨

以上是在类创建时就添加了属性以及方法；

注意：

1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
4. 多个函数方法之间不需要添加逗号分隔
5. 生成实例 new 不能省略
6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

2.2.1类的继承

通过在子类中用extends关键字来继承父类：

// 父类
class Father{   
} 

// 子类继承父类
class  Son  extends Father {  
}    

继承后，子类创建的实例对象可以进行和父类一样的操作：

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}

class Son extends Father{  // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();      //结果为 你的姓是刘

但注意以下写法是错误的，因为用子类的实例对象调用了父类的sum方法，但父类sum方法中的this.x与this.y都是指向父类中属性，这里子类的constructor已经覆盖掉了继承来的父类constructor所以两者this.x与this.y指向是不同的：

class Father{
		      constructor(x,y) {
		          this.x = x;
				  this.y = y;
		      }	
			  sum(){
				  console.log(this.x)
				  console.log(this.y)
			  }	  
			}
			
			class Son extends Father{
				constructor(x,y) {
					this.x = x;
					this.y = y;
				}
				
			}
			
		   var damao = new Son(1,2);
		   damao.sum();

要解决该问题：
一、去掉子类中的constructor直接让其继承父类的constructor；
二、法一虽然可用但是有时候我们需要调用父类的方法又同时子类有自己的方法（该方法使用子类属性），这时必须借用super关键字；

super关键字可以让子类调用父类的构造函数，且包括构造函数和普通函数；

针对以上问题可以用以下代码解决：

class Father{
		      constructor(x,y) {
		          this.x = x;
				  this.y = y;
		      }	
			  sum(){
				  console.log(this.x+this.y)
			  }	  
			  sum1(){
			  }
			}
			
			class Son extends Father{
				constructor(x,y) {
					//继承父类的构造函数，constructor的xy昨晚参数传入super
					super(x,y)
					//同时子类还需要方法使用x与y(子类函数去找xy的时候先看子类中有没有，如果没有的话super了父类可以直接用)
					//但是如果没有super而是直接用则会报错
					this.x = x;
					this.y = y;
				}
			 //这样子类的sub方法也可以使用x与y
			   sub(x,y){
			     super.sum1() //假装父类中有个sum1静态方法 
                 console.log(this.x-this.y) 
                  }
			 	
			}
			
		   var damao = new Son(1,2);
		   damao.sum();
		   damao.sub();

注意：

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的

2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super.xx() 调用父类静态方法,super 必须在子类this出现之前调用(
   静态方法见：https://www.bbsmax.com/A/Ae5R29L35Q/)

4. 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.

   1. constructor中的this指向的是new出来的实例对象

   2. 自定义的方法,一般也指向的new出来的实例对象

   3. 绑定事件之后this指向的就是触发事件的事件源
      绑定事件代码如下：
      （注意其中this.sing没有小括号，因为这是绑定事件:btn.onclick = function(){…}，如果加上小括号变成this.sing()则是调用函数了）

   4. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

利用以上知识可以实现tab栏切换、添加、删除、编辑等功能…

注意一个思想：把不同小功能都包装成函数，当需要实现一个功能时，在其触发事件中调用不同的函数将功能实现；