JavaScript ES6中类和对象学习(一)

写在前面:

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
在本文中我们将学习如何创建一个类和对象如何在类中添加方法类的继承super关键字类和对象的三个注意点。

一.如何创建类和对象

class Star{
//类的共有属性放在constructor 里面
	constructor(name,age){
		this.name=name;
		this.age=age;
		
	}
}
//利用类创建对象new
var ldh =new Star("刘德华",19);
var zxy =new Star('张学友',18);
console.log(ldh);
console.log(zxy);

这里讲一下程序是怎么执行的,首先class关键字创建了一个Star类自动生成了constractor函数,这个函数接收传递的参数,返回实例。接着创建一个对象同时自动调用cconstractor函数。new实例化一个对象,那么现在刘德华和张学友就是一个实例,这两个实例传递给name,name接着传值给this.name,this指向的是创建的实例。

二.在类中添加方法

下面我们子啊原有的基础上添加一个sing方法

/* jshint esversion: 6 */
// JavaScript Document
//创建一个类 创建一个明星类
class Star{
	//类的共有属性放在constructor 里面
	constructor(name,age){
		this.name=name;
		this.age=age;
		
	}
	sing(song){
		console.log(this.name+ song);
}
}
//利用类创建对象new
var ldh = new Star('刘德华','8');
console.log(ldh);
ldh.sing('冰雨');

输出:
在这里插入图片描述
(1)我们类里面所有的函数不需要写function
(2)多个函数方法之间不需要添加逗号分割

三.类的继承

在这里插入图片描述

class Father{
	//自动生成constructor函数
	constructor(){
		
	}
		money(){
		console.log(100);
			}
}
class Son extends Father{
	}
var son =new Son();
son.money();

在这里插入图片描述这里使用extends子类继承了父类的方法和属性

四.super 关键字

super关键字用于访问和调用父类上的函数,可以用来调用父类的构造函数和普通函数。
但是子类在构造函数中使用super关键字必须放在this前面(必须先调用父类的构造方法再使用子类的构造方法)

调用构造函数
class Father{
	constructor(x,y){
		this.x=x;
		this.y=y;
	}
	sum(){
		console.log(this.x+this.y);
	}
}
class Son extends Father{
	constructor(x,y){
		super(x,y);//调用父类的构造方法
	}
}
var son=new Son(1,2);
son.sum();

在这里插入图片描述

这里也稍微讲一下执行流程,首先我们用new关键字实例化son,实例化子类,把里面的1和2传给了子类的constructor里面的x,y,接着super调用了父类的constructor所以就相当于父类的constructor里x和y是1和2,接下去this.x=1,this.y=2;在接下去sum方法中就是1+2了所以输出结果是3;
注意:

在继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有先执行子类的。
继承中,如果子类里面没有,就直接去父类找有没有这个方法,如果有就执行父类(就近原则)

调用普通函数
class Father{
	say(){
		return "我是爸爸";
		
	}
}
class Son extends Father{
	say(){
		console.log(super.say()+"的儿子");
		//super.say()就是调用父类中的普通函数say()
	}
}
var son=new Son();
son.say();
	

在这里插入图片描述

五.注意点

1.在ES6中没有变量提升,所以必须先定义类,才能通过类实例化对象
2.类中有共同属性和方法一定要加this
3.constructor里面的this指向实例,方法里面的this指向方法的调用者;

本次介绍就到这,学习愉快 😃

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章