es6之class 基本用法解析

ECMAScript · 發表 2018-12-06 19:15:48

摘要： javaScript 語言中，生成例項物件的傳統方法是通過建構函式,與傳統的面嚮物件語言（比如 C++ 和 Java）差異很大，ES6 提供了更接近傳統語言的寫法，引入了 class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。 es6 class 與es5的面...

javaScript 語言中，生成例項物件的傳統方法是通過建構函式,與傳統的面嚮物件語言（比如 C++ 和 Java）差異很大，ES6 提供了更接近傳統語言的寫法，引入了 class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。

es6 class 與es5的面向物件的區別：

寫法不同，使用關鍵字class

2.當new一個例項，預設有一個constructor方法，且預設返回例項物件（this）,也可以返回另一物件

3.類的所有方法都在prototype屬性上，但是不可列舉，且每方法結束不能使用分號

4.類的呼叫必須通過new 一個例項,且類的內部預設使用嚴格模式

5.不存在變數提升，必須先宣告，再呼叫

6.class的this 預設指向當前類

7.class 的靜態方法，使用關鍵字static,不需new,直接通過類來呼叫

例項屬性和靜態屬性的寫法，例項屬性在類的內部直接使用等式（=）寫法，也可以寫在constructor 方法裡，靜態屬性只需在例項屬性前加一個關鍵字static即可

9.類的繼承使用關鍵字extends,繼承機制與es5完全不同，

es5的繼承原理：先new子類的例項物件this,再通過將父類的方法和屬性新增到子類的this上(parents.call(this))。

Es6的繼承原理：先創造父類的例項物件this,所以要建構函式constructor（）訪問父類的屬性使用this,必須先呼叫super()方法；再通過子類的constructor()來修改this

10．類的繼承可以繼承原生的建構函式，es5不可以

一般寫法（es5 與es6）

//一.ES5寫法：
function Animate(name){
this.name = name;
}
Animate.prototype.getname = function(){
console.log(this.name)
}
var p =new Animate("lity");
p.getname();
 
//二.ES6,面向物件的寫法,calss,
class Person{
//constructor()：構造方法是預設方法，new的時候回自動呼叫，如果沒有顯式定義，會自動新增
//1.適合做初始化資料
//2.constructor可以指定返回的物件
constructor(name,age){
　　 this.name = name;
　　 this.age = age;
　　}
getval(){
console.log(`你是${this.name},${this.age}歲`);
}
}
var c1 = new Person("lity",20); 
c1.getval();

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到

注意：class 類的本質還是一個函式,類本身就指向建構函式。

typeof Person//function
Person === Person.prototype.constructor // true

我們使用Object的一些屬性或者方法檢測一下用es6 寫的例項物件

//1.檢視例項物件c1的__proto__是否指向Person的原型(Person.prototype)
 console.log(c1.__proto__==Person.prototype)//true
 console.log(c1.__proto__)//原型物件的所有方法
 //2.isPrototypeOf:檢測例項物件是否是某個函式的原型
console.log(Person.prototype.isPrototypeOf(c1));//true
//3.constructor:檢視某個物件的建構函式
console.log(c1.constructor);
 //4.hasOwnProperty:檢測某個屬性是否是自己的屬性；不是原型物件上的屬性和方法
console.log(c1.hasOwnProperty("name"))//true;
 //5.in：通過in可以檢測屬性是否在自己中(this)或者是原型中存在
console.log("getval" in c1)//原型上存在，true
console.log("name" in c1)//constructor(自己上存在)，true
 //6.自定義檢測屬性是否是存在
function hasproperty(attr,obj){
return obj.hasOwnProperty(attr)&&(attr in obj);
}
console.log(hasproperty("name",c1));//true;

2.表示式寫法

//class表示式
const Myclass = class Me{//這裡的Me是沒有作用的
constructor(name,jog){
this.name = name;
this.jog = jog;
}
getval(){
console.log(`name is ${this.name},job is a ${this.jog}`);
}
}
 var obj1 = new Myclass("lylt","teacher");
 obj1.getval();

3.class的私有方法(ES6不提供寫法)和私有屬性(也不提供寫法，提案用#識別)

所謂私有方法和私有屬性，是指只能在類的內部使用，不能在類外部呼叫

4.ES6規定Class類沒有靜態屬性,只有靜態方法：static

所謂靜態，不需要例項化物件，直接呼叫

class Foo {
static classMethod() {
return 'lity';
}
 }
 console.log(Foo.classMethod()) // 'hello'

5.new.target屬性

new是在建構函式生成例項的命令，ES6為new提供了一個屬性.target,

返回通過new 命令例項物件的class(建構函式)，一般用於類的內部

//ES5：原始寫法物件
function objtarge(name){
if(new.target==undefined){
throw new Error("必須例項化物件");
}else{
this.name = name
}
}
var targets = new objtarge("litys");
console.log(targets.name);//litys
//es6寫法:class內部使用new.target，返回當前的calss
class caltartget{
constructor(name){
console.log(new.target==caltartget);//true
if(new.target!==caltartget){
throw new Error("例項化物件不是caltrget");
}else{
this.name = name;
}
}
}
var caltart = new caltartget("lity");
console.log(caltart.name);//lity

6.this指向

類的方法內部如果含有this，它預設指向類的例項。但是，必須非常小心，一旦單獨使用該方法，很可能報錯

如下示例

class Logger {
 printName(name = 'there') {
this.print(`Hello ${name}`);
 }
 print(text) {
console.log(text);
 }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

分析以上示例：prinName 的方法中this,預設指向類Logger，但是將改方法單獨呼叫，就會報錯，this會指向所在執行的環境，所以因為找不到this.print()方法而報錯。

針對以上解決this指向的方法：

（1）. 使用bind(this)

（2）. 使用es6 的箭頭函式（）=>{}

（3）.使用Proxy 代理

//1.bind()方法
class Logger {
 constructor() {
this.printName = this.printName.bind(this);
 }
 // ...
}
//2.箭頭函式 （）=>{}
class Logger {
 constructor() {
this.printName = (name = 'there') => {
this.print(`Hello ${name}`);
};
 }
 // ...
}
//3. Porxy()
.................

7.class 的get() 和set() 方法

與 ES5 一樣，在“類”的內部可以使用get和set關鍵字，對某個屬性設定存值函式和取值函式，攔截該屬性的存取行為。

class MyClass {
 constructor() {
// ...
 }
 get prop() {// 使用 get 攔截了該方法的返回值
return 'getter';
 }
 set prop(value) {//當對該方法賦值時能獲取到該賦值
console.log('setter: '+value);
 }
}
let obj = new MyClass();
obj.prop = 123;
// setter: 123
inst.prop
// 'getter'

8.繼承

Class 可以通過extends關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。

//es5 的繼承
//父類
function Person(name,sex){
this.name = name;//屬性
this.sex = sex;//屬性
}
//定義一個原型方法
Person.prototype.show = function(){
console.log("我的姓名是"+this.name+"==="+"我的性別是"+this.sex)
}
//子類
function Worker(name,sex,job){
//構成函式偽裝：使用call()方法繫結this，偽裝繼承父級的屬性
Person.call(this,name,sex);
this.job = job;
}
//繼承父類的原型方法：（介紹三種方法）
//寫法一：通過遍歷父級的原型一個個賦給子級的原型(es5 的原型是可列舉的，es6的不可以列舉)
(var i in Person.prototype){
Worker.prototype[i] = Person.prototype[i];
}
//寫法：重新new一個父級物件賦給子級的原型
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
//寫法三：建立一個原型物件賦給子級的原型；(es5 推薦)
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.constructor = Worker;
var workers = new Worker("小明","男","job")
//es6 的繼承
class Person{
constructor(name,sex){
this.name = name;//屬性
　　 this.sex = sex;//屬性
}
}
class Worker extends Person{
constructor(name,sex,job){
super();
this.job =job;
}
}
var workers = new Worker("小明","男","job")

8.1:super關鍵字：在子類中不同情況用法不同,既可以當作函式使用，也可以當作物件使用。

(1)：super作為函式，只能在constructor中使用:代表父類，返回子類的this

(2)：super作為物件，在普通函式中，cuper指向父類的原型物件，可以訪問原型物件的屬性和方法,注意，父類的例項的屬性和方法是訪問不了的

(3)：super作為物件，在靜態方法中，cuper指向的是父類，不是父類的原型物件

示例分析如下：

//父類
class Aniamte{
constructor(){
if(new.target == Aniamte){
throw new Error("本類不能例項化，只能有子類繼承");
}
}
//靜態方法
static getval(mgs){
console.log("父類的static",mgs)
}
//普通方法
setname(){
console.log("該方法有子類重寫")
}
}
//子類
class Dog extends Aniamte{
constructor(){
super();//呼叫此方法,this才用可以用,代表父類的建構函式，返回的卻是子類
//super() ==父類.prototype.constructor.call(子類/this)
console.log(this)//Dog {}
this.age = 20;
}
//靜態方法,super在靜態方法中作為物件使用，指向父類；
static getval(mgs){
super.getval(mgs)//父類的static niceday
console.log("子類的static",mgs)//子類的static niceday
}
setname(name){
//普通方法，super作為物件使用，指向父類的原型物件，父類.prototype;
super.setname();//該方法有子類重寫
this.name = name;
return this.name
}
};
Dog.getval("niceday");//靜態方法，直接呼叫
//var parAni = new Aniamte();//報錯
var dogs = new Dog();//new 一個示例物件
dogs.setname("DOYS");////DOYS

8.2.原生建構函式的繼承，ES5不支援，ES6利用extend可以繼承原生建構函式

//ESMAScript的建構函式有以下幾種
/* Boolean()
* Unmber()
* String()
* Array()
* Date()
* Function()
* RegExp()
* Error()
* Object()
*/
//例項一：自定義類Myarray 繼承了原生的陣列的建構函式，擁有原生陣列的屬性和方法了
class Myarray extends Array{
constructor(){
super();
console.log(this.constructor.name)//Myarray
}
}
var myarr = new Myarray();
console.log(Object.prototype.toString.call(myarr));//[object Array]
myarr.push(1,2,1);
console.log(myarr.length)//3

es6之class 基本用法解析

您可能也會喜歡…