JavaScript高级（一）

一.写在前面的话

今天是2021.1.19，本人已是大三的一名学生了，接触前端已有数月之久，该文章是JavaScript高级的一些学习笔记，如有理解错误的地方还请多多包涵，欢迎评论区指出，谢谢！

二.引入（POP与OOP）：

 

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事务都是对象。例如：字符串、数值，数组，函数等。

在ES6中，新增了类的概念，可以使用class关键字去声明一个类，以后用这个类去实例化对象。

有学过C++，Java，Python的小伙伴肯定知道这些，但是小编认为还是提一下比较好，嘿嘿。

类与对象的区别是什么？

类抽象了对象的公共部分，它泛指一个大类（class）。

对象特指某一个，通过类实例化的一个具体的对象。

总而言之，OOP编程的核心就是

1.抽取对象共用的属性和组织行为（封装）成一个类（模板）。

2.对类进行实例化，获取类的对象，操作获取的对象完成一系列事件。

三.关于JavaScript类的用法

（1）类的创建

先看示例代码

<script>
	class Star{
		constructor(uname,age) {
			this.uname = uname;
			this.age = age;
		}
	}
			
	var tl = new Star('天狼',22);
	console.log(tl)
</script>

学过Java的小伙伴都知道new的含义了吧，其中constructor叫作构造方法，这个在Java中有类似的概念！

使用new创建对象的时候，会自动调用constructor函数。

（2）类中添加方法

示例代码如下：

<script>
	class Star{
		constructor(uname,age) {
		    this.uname = uname;
			this.age = age;
			}
				
			coding(code) {
				console.log('我会打' + code);
		}
	}
			
	var tl = new Star('天狼',22);
	tl.coding("JavaScript");
</script>

（3）类的继承

子承父业，即子类可以继承父类的方法、属性。

样式如下： 

class Father{
    ...
}

class Son extends Father{
    ...
}

使用extends关键字可以让Son继承Father类。

请看下面一段代码（有Wrong）

<script>   
    class Father{
		constructor(x,y) {
		    this.x = x;
			this.y = y;
		}
		sum(x,y){
			console.log(x + y);
		}
	}
		
	class Son extends Father{
		constructor(x,y) {
			this.x = x;
			this.y = y;
		}
	}
	
	var son = new Son();
	son.sum(1,2);
</script>

 不难看出，问题出在Son类中的constructor上，这是因为在字类Son的下x，y是指向自己（Son）的，而不是Father，所以在使用Father类的sum方法时会报错。

解决方法：

只需要使用super方法即可

class Son extends Father{
                constructor(x,y) {
                    super(x,y);
                }
       }

super就是调用父类的构造方法。

在ES6中有三个注意点：

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

2.类里面的共有属性与方法一定要使用关键字this。

3.类里面的指向问题。（谁调用就指向谁）

4.constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者。