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指向方法的調用者;

本次介紹就到這,學習愉快 😃

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