Kế thừa phương thức tĩnh JavaScript

Các phương thức lớp tĩnh được định nghĩa trên chính lớp đó

Bạn không thể gọi một phương thức static trên một đối tượng, chỉ trên một lớp đối tượng

Ví dụ

hạng Xe {
hàm tạo (tên) {
cái này. tên = tên;
}
xin chào tĩnh () {
trở lại "Xin chào. “;
}
}

hãy để myCar = xe mới ("Ford");

// Bạn có thể gọi 'hello()' trên Car Class
tài liệu. getElementById("bản trình diễn"). bên trongHTML = Xe hơi. Xin chào();

// Nhưng KHÔNG phải đối tượng xe hơi
// tài liệu. getElementById("bản trình diễn"). bên trongHTML = myCar. Xin chào();
// điều này sẽ gây ra lỗi

Tự mình thử »

Nếu bạn muốn sử dụng đối tượng myCar bên trong phương thức static, bạn có thể gửi nó dưới dạng tham số

Ví dụ

hạng Xe {
hàm tạo (tên) {
cái này. tên = tên;
}
xin chào tĩnh (x) {
trả lại "Xin chào" + x. tên;
}
}
hãy để myCar = xe mới ("Ford");
tài liệu. getElementById("bản trình diễn"). bên trongHTML = Xe hơi. xin chào(myCar);

Tự mình thử »

Lớp là khuôn mẫu để tạo đối tượng trong JavaScript. Nó có các thuộc tính và phương thức. JavaScript cung cấp hai cấp độ truy cập cho các trường và phương thức. Công cộng và tư nhân. Cấp độ truy cập riêng tư là một bổ sung tương đối gần đây và một số trình duyệt có thể chưa hỗ trợ cấp độ này

Cách tạo lớp học

Theo quy ước, chữ cái đầu tiên của tên lớp là chữ in hoa

khai báo lớp

//SYNTAX
class Class_name {
	
	constructor(){
		/*any code */
	}
	
}

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

//EXAMPLE 2
class Sample_class {
	
	constructor( message ){
	      this.message =  message;
	}
	
}

const sample_instance = new sample_class("Hello World");
console.log( sample_instance.message )

Khai báo và cẩu lớp

Một trong những điều quan trọng liên quan đến các lớp và cẩu là bạn không thể tạo một thể hiện của một lớp trước khi khai báo nó

Const myObj = new Sample_class(); //can not hoisted. produce ReferenceError

class Sample_class {
	
	constructor(){
		/*any code */
	}
	
}

biểu thức lớp

Một lớp trong một biểu thức có thể được đặt tên hoặc ẩn danh

//anonymous 
const Sample_class = class{
	
	constructor( message ){
	      this.message =  message;
	}
	
}

const instance = new Sample_class("Hello World");
console.log( instance.message )

//named classes
const Sample_class = class Message {
	
	constructor( message ){
	      this.message =  message;
	}
	
}

const instance = new Sample_class("Hello World");
console.log( instance.message );

Các loại phương thức trong lớp

Phương thức là một hàm bên trong lớp.  

Các phương thức quan trọng trong lớp

1. Người xây dựng
   1. Chịu trách nhiệm tạo và khởi tạo một đối tượng từ một mẫu lớp
   2. Mỗi lớp chỉ được có một hàm tạo
   3. Hàm tạo của lớp con có thể sử dụng từ khóa super để gọi hàm tạo của lớp cha. (Chúng ta sẽ thảo luận về lớp cha và lớp con sau)
2. phương pháp nguyên mẫu

class Addition {	
	constructor( num1, num2 ){
	      this.num1 = num1;
			  this.num2 = num2;
	}
	//method
	add(){
		return this.num1 + this.num2
	}
	//Getter
	get total(){
		return this.add();
	}
}
const instance = new Addition( 2, 3 );
console.log( instance.total );

Ghi chú nhanh về getters và setters

người bắt. Lấy giá trị thuộc tính của đối tượng. Các phương thức này bắt đầu bằng từ khóa get

người định cư. Đặt hoặc chỉnh sửa giá trị thuộc tính của đối tượng. Các phương thức này bắt đầu bằng từ khóa set

Tìm hiểu thêm về getters và setters tại đây

Ghi chú. Mặc dù JavaScript không có cấp truy cập Được bảo vệ, một số nhà phát triển đề xuất sử dụng getters và biến bắt đầu bằng toán tử gạch dưới ( _ ) (để hạn chế quyền truy cập). Bạn cũng có thể tìm hiểu thêm về vấn đề này tại đây

1. Phương pháp tạo

class Addition {

	constructor( ...num ){		
		    this.total = 0;
	      	    this.num_arr = num;
	}

	//Generator method
	*getTotal(){
				
			for( const num of this.num_arr ){
				this.total =  this.total + num;
				
			}
			yield this.total; 
	}


}

const instance = new Addition( 1, 2, 3,4,5 );
console.log(instance.getTotal().next().value);

Ghi chú. Mặc dù tôi không tập trung vào các chức năng của Trình tạo trong bài đăng này, tôi sẽ thảo luận về các chức năng đặc biệt này trong một bài đăng khác trong tương lai. Bạn không cần biết các hàm Trình tạo để hiểu các khái niệm lớp hoặc OOP trong JavaScript

1. phương pháp tĩnh
   1. từ khóa tĩnh xác định một phương thức tĩnh hoặc thuộc tính tĩnh cho một lớp
   2. Các phương thức hoặc thuộc tính này thuộc về lớp chứ không thuộc về các thể hiện
   3. Do đó, bạn không thể gọi chúng bằng cách sử dụng một thể hiện của một lớp (đối tượng). Các biến tĩnh chỉ được gọi bằng các phương thức tĩnh
   4. Bạn cần sử dụng tên của lớp để truy cập các phương thức tĩnh hoặc thuộc tính tĩnh của một lớp

class Sample_class {		
	static staticMethod(){
		return 'I am from static method';
	}	
}

console.log( Sample_class.staticMethod() );

lĩnh vực công cộng

Theo mặc định, tất cả các trường đều là Công khai. Các trường công khai tham gia kế thừa nguyên mẫu

Các trường và phương thức đối tượng công khai

• Có sẵn trên các phiên bản của lớp
• các trường được thêm vào thời gian xây dựng trong lớp
• Nếu một lớp có một lớp con, các trường được thêm ngay sau khi super() được gọi trong lớp con
• Nếu bạn không khởi tạo các trường phiên bản công khai, nó sẽ được đặt thành 'không xác định'

Các trường và phương thức tĩnh công khai

• từ khóa tĩnh xác định các trường và phương thức tĩnh
• các trường và phương thức tĩnh thuộc về lớp chứ không thuộc về các thể hiện của lớp
• các lớp con có quyền truy cập vào các trường này thông qua chuỗi nguyên mẫu (kế thừa nguyên mẫu)
• Khi khởi tạo các trường tĩnh, this (từ khóa) đề cập đến hàm tạo của lớp. Bạn cũng có thể tham chiếu nó theo tên (của lớp) và sử dụng super để lấy hàm tạo của lớp bậc trên (nếu có)

class Sample_class {
  static baseStaticVar = 'base class static field';
  static tempStaticVar = this.baseStaticVar;//also Sample_class.baseStaticVar

  static sampleStaticMethod() { return 'This is from static method' }
}

class Sample_sub_class extends Sample_class {
  static subStaticVar = super.sampleStaticMethod()
}

console.log(Sample_class.tempStaticVar);
console.log(Sample_sub_class.subStaticVar);

trường riêng

• Chỉ được truy cập trong lớp

Các trường và phương thức cá thể riêng

• Tạo với tiền tố # tên (ví dụ:. #sample_field ). dấu # là một phần của tên
• Các trường đối tượng riêng được thêm tương tự như trường đối tượng chung trong thời gian xây dựng lớp hoặc Nếu lớp có lớp con, chúng được thêm vào thời điểm super() được gọi trong lớp con

JavaScript sẽ tạo ra lỗi cú pháp nếu bạn

• Cố gắng truy cập các trường và phương thức riêng tư nằm ngoài phạm vi
• Tham khảo các trường chưa được khai báo trước đó
• Cố gắng xóa các trường riêng tư

Phương thức thể hiện riêng tư

• Có cùng hạn chế về cấp độ truy cập như các trường đối tượng riêng tư
• Nó có thể là hàm tạo, async hoặc hàm tạo không đồng bộ, cũng có thể sử dụng getters và setters riêng (nhưng không phải ở dạng trình tạo, async hoặc trình tạo không đồng bộ)

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

Các trường và phương thức tĩnh riêng tư

• Các trường tĩnh riêng được thêm vào hàm tạo của lớp tại thời điểm đánh giá lớp
• Chỉ lớp xác định trường tĩnh riêng mới có thể truy cập trường. Có một hạn chế đối với các trường tĩnh riêng tư
• Một điều quan trọng cần lưu ý liên quan đến từ khóa “this” và các trường và/hoặc phương thức tĩnh riêng là nếu bạn sử dụng từ khóa “this” trong lớp cơ sở để truy cập các trường hoặc phương thức tĩnh riêng, nó có thể dẫn đến TypeErrors khi sử dụng

ví dụ

Đối với các trường

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

Bạn có thể tránh TypeError này nếu bạn thay thế “this” bằng tên lớp. Do đó, lớp cơ sở có thể được sửa đổi thành

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

Đối với phương pháp

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

Đối với các trường, bạn có thể tránh lỗi này nếu sử dụng tên lớp thay vì sử dụng từ khóa “this”

phân lớp

Một lớp con là một lớp con kế thừa các phương thức và thuộc tính của nó từ một lớp khác (lớp cơ sở). Ngoài các thuộc tính và phương thức kế thừa, nó cũng có thể có các thuộc tính và phương thức riêng

Từ khóa extends tạo nên mối quan hệ cha-con này (quan hệ với lớp cơ sở và lớp con)

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

siêu từ khóa

Trong kế thừa dựa trên lớp, từ khóa super được sử dụng trong lớp con để gọi các phương thức tương ứng trong lớp cơ sở (lớp cha)

Bạn có thể sử dụng từ khóa super theo hai cách

1. super([đối số]);
2. siêu. functionOnParent([đối số]);

ghi chú. Các đối số trong cú pháp trên là tùy chọn

Như bạn có thể thấy trong ví dụ trên, chúng tôi đã sử dụng super( owner, year, model ). Điều này là để gọi hàm tạo trong lớp cha

Cách thứ hai để sử dụng super là gọi bất kỳ phương thức tương ứng nào trong lớp cơ sở

//EXAMPLE 1:
class Sample_class {	
	constructor(){
		this.message = "Hello, I am from constructor"
	}
}

const sample_instance = new Sample_class();//creating an instance
console.log( sample_instance.message);//accessing properties

Bản tóm tắt

Trong bài đăng này, tôi đã giới thiệu cho bạn các lớp JavaScript, cấp độ truy cập và nỗ lực của JavaScript để triển khai kế thừa dựa trên lớp. Mặc dù JavaScript không phải là ngôn ngữ hướng đối tượng dựa trên lớp, nhưng việc triển khai các khái niệm OOP là phần giới thiệu về kế thừa dựa trên lớp bằng cách sử dụng kế thừa dựa trên nguyên mẫu

Các thuộc tính tĩnh có được kế thừa không?

Chúng ta có thể sử dụng từ khóa tĩnh trong thừa kế không?

Khi nào sử dụng các phương thức tĩnh JavaScript?

Phương thức tĩnh JavaScript là gì?