Hướng dẫn scaler javascript

Bài viết này của Scaler Chủ đề bao gồm Kế thừa trong javascript, các ứng dụng của nó và cách sử dụng của nó trong lập trình thực & một số biệt ngữ phổ biến về kế thừa như extents, super, v.v.

Bạn đang xem: kế thừa trong javascript là gì

Tìm hiểu về Kế thừa trong JavaScript.

Tổng quan

Kế thừa trong javascript được định nghĩa là khả năng của một lớp để lấy các thuộc tính và đặc điểm từ một lớp khác đồng thời có các thuộc tính riêng của nó.

Phạm vi

Trong bài này, chúng ta sẽ tìm hiểu:

  • Kế thừa trong

    javascript

    , các ứng dụng và cách sử dụng của nó trong lập trình

    thực tế

    .

  • Chúng ta cũng sẽ tìm hiểu một số biệt ngữ kế thừa phổ biến trong

    javascript

    , chẳng hạn như extents, super, v.v.

  • Các tính năng của

    kế thừa

    trong javascript chẳng hạn như ghi đè phương thức,

    constructor

    ghi đè, v.v.

Giới thiệu về Kế thừa trong Javascript

Kế thừa đề cập đến hành động kế thừa một thứ gì đó. Nó có thể là một đứa trẻ kế thừa tài sản của cha mẹ chúng, hoặc một loài mới kế thừa một số tài sản của loài cũ hơn trong quá trình tiến hóa. Trong các ví dụ được đề cập ở trên, thực thể sau đang kế thừa các thuộc tính của thực thể trước. Ngoài ra, chúng ta có thể nhận thấy rằng thực thể sau có một số chức năng không có trong thực thể trước hoặc quá trình thực thi của chúng đã được ứng biến.

Ngay cả trong lập trình, khái niệm kế thừa vẫn tồn tại.

Kế thừa trong javascript hỗ trợ một lớp mới có tất cả các chức năng của lớp khác đồng thời có chức năng riêng của nó. * Sự kế thừa trong javascript chủ yếu liên quan đến hai phân đoạn:

  • Lớp con : Lớp mà

    kế thừa

    các thuộc tính của một lớp khác được gọi là lớp con.

  • Lớp cha : Lớp có thuộc tính

    đang được kế thừa được gọi là lớp cha.

Sau đây là mô tả bằng hình ảnh về sự kế thừa trong javascript:

Lưu ý: Chúng tôi đã thảo luận về việc triển khai và làm việc ở trên ví dụ trong phần sắp tới.

Tuy nhiên, trước khi bắt đầu triển khai kế thừa, hãy tìm hiểu một số biệt ngữ cơ bản về kế thừa.

JavaScript Class Inheritance < / h2>

Class Kế thừa

Trước khi phiên bản ES6 được giới thiệu, kế thừa trong javascript thường được triển khai theo nhiều bước. Một phương pháp kế thừa phổ biến trong javascript là kế thừa nguyên mẫu.

Trong kế thừa nguyên mẫu, một đối tượng được sử dụng để kế thừa các chức năng và thuộc tính từ một đối tượng khác thông qua liên kết nguyên mẫu.

lưu ý: Cần lưu ý rằng chúng tôi không có các lớp thực tế trong Javascript nhưng ES6 đã được cung cấp để cung cấp dạng trừu tượng của các lớp chỉ thực sự là nguyên mẫu.

Khi ES6 ra đời, một cách kế thừa mới trong javascript đã được đề xuất bằng cách sử dụng các từ khóa như xtends, super, v.v. Phần sau sẽ thảo luận về các từ khóa này:

expand

Từ khóa expand được dùng để phát triển tính kế thừa giữa hai lớp.

Cú pháp

 
  

childClassName

mở rộng

parentClassName {

// định nghĩa lớp con

}

Từ khóa expand được đặt giữa lớp con và lớp cha. < / p>

Ví dụ:

 
  

// lớp cha

class

Động vật

{

hàm tạo

(

tên

)

{

this

.name = name;

}

Tên động vật

(

)

{

trả lại

`

$ {name}

` < / p>

;

} }

// Vật nuôi mở rộng lớp cha

class

Thú cưng

extension

Động vật

{

hàm tạo

(

)

{

console

.log (

`Tạo lớp thú cưng`

);

} }

Giải thích ví dụ:

Trong ví dụ trên , chúng tôi đã khai báo một lớp Animals với một tên thuộc tính và một phương thức animalName () sẽ trả về tên. Bây giờ, vì lớp Vật nuôi mở rộng lớp Động vật, do đó nó kế thừa tất cả các thuộc tính của lớp Động vật.

JavaScript super () keyword

Cho đến nay chúng ta đã biết cách kế thừa các thuộc tính và phương thức của một lớp này sang một lớp khác trong javascript. Bây giờ, hãy tưởng tượng chúng ta đã kế thừa các thuộc tính của lớp Động vật vào lớp Thú cưng. Bây giờ khi chúng ta tạo một đối tượng thuộc lớp Thú cưng, nó cũng sẽ có các thuộc tính của lớp Động vật. Nhưng đợi đã! Lớp Animal có thuộc tính name được khởi tạo bằng phương thức khởi tạo của lớp. Làm cách nào để khởi tạo thuộc tính đó của lớp Animal? Trong những trường hợp như vậy, từ khóa super được sử dụng.

Từ khóa super trong javascript được sử dụng để gọi các hàm của lớp cha của đối tượng. Khi chúng ta tạo các đối tượng từ lớp con, chúng ta cũng cần truyền các tham số cho lớp cha. Điều này được thực hiện bởi từ khóa super (). Nó gọi các thuộc tính của lớp cha.

Cú pháp:

 
  

super < / p>

(tham số);

Nó được đặt bên trong hàm tạo của lớp con và tham số là (các) tham số bắt buộc đối với lớp Cha.

Ví dụ:

 
  

class

Thú cưng

mở rộng

Động vật

{

hàm tạo

(

tên, đặc biệt

)

{

siêu

(tên);

this

.speicy = Speicy;

}

Tên nói chuyện

(

)

{

trả lại

`

$ {Speicy}

` < / p>

;

} }

Giải thích ví dụ:

Trong ví dụ trên, chúng ta đã định nghĩa lớp Pet. Vì nó kế thừa lớp Animals, do đó ở đây từ khóa super đang gọi hàm tạo của lớp cha. Và do đó giá trị đang được chỉ định.

Ví dụ:

 
  

class

Foo

{

tĩnh

classMethod

(

)

{

quay lại

'xin chào'

;

} }

class

Thanh

mở rộng

Foo

{

tĩnh

classMethod

(

)

{

trả lại

siêu

.classMethod () +

' , quá '

;

} }

bảng điều khiển

.log (Bar.classMethod ());

// 'cũng xin chào'

Ghi đè Phương thức hoặc Thuộc tính

Cho đến nay, chúng ta đã thấy cách chúng ta có thể kế thừa các thuộc tính từ lớp này sang lớp khác. Bây giờ hãy tưởng tượng trong ví dụ trên, lớp Animal có một phương thức gọi là welcome () trả về thuộc tính name. Nhưng đối với lớp Pet, chúng tôi muốn phương thức này trả về tên cũng như loài.

Trường hợp đã cho là một ví dụ về việc viết lại định nghĩa của một phương thức trong lớp cha. Đây được gọi là ghi đè phương thức.

Ghi đè phương thức trong javascript là một thuộc tính cho phép một lớp con truyền đạt một triển khai cụ thể của một phương thức đã được cung cấp bởi các lớp cha của nó.

Ví dụ:

 
  

// lớp cha

class

Động vật

{

hàm tạo

(

tên

)

{

this

.name = name;

}

Tên động vật

(

)

{

trả lại

`

$ {name}

` < / p>

;

}

chào

(

)

{

quay lại

`Xin chào, tôi là

$ {name}

`

;

} }

// lớp con

class

Thú cưng

extension

Động vật

{

hàm tạo

(

tên, đặc biệt

)

{

siêu

(tên);

this

.speicy = Speicy;

}

Tên nói chuyện

(

)

{

trả lại

`

$ {Speicy}

` < / p>

;

}

// phương thức này sẽ ghi đè phương thức "welcome ()" của lớp Animals

chào

(

)

{

quay lại

`Xin chào, tên tôi là

$ {name}

< p>, tôi là một

$ {Speicy}

`

;

} }

hãy để

pet1 =

mới

Thú cưng (

'Tom'

,

'Con chó'

);

bảng điều khiển

.log (pet1.greet);

Giải thích ví dụ:

Trong ví dụ này, chúng ta đang tạo lớp Vật nuôi trong khi kế thừa lớp Động vật. Ở đây, cả Thú cưng và Động vật đều có phương thức welcome () với các định nghĩa khác nhau, nhưng khi chúng ta gọi phương thức chào cho đối tượng pet1, nó sẽ trả về ‘Xin chào, tên tôi là Tom, tôi là Chó’ * vì phương thức chào bên trong Vật nuôi lớp ghi đè phương thức chào bên trong lớp Animals.

Sau đây là biểu diễn bằng hình ảnh của trường hợp trên:

Ghi đè hàm tạo

Khi chúng ta kế thừa một lớp cha mà không khai báo hàm tạo của lớp con, theo mặc định, javascript sẽ tạo một hàm tạo trống sau:

 
  

hàm tạo

(

... args

)

{

siêu

(... args);

}

Tuy nhiên, khi chúng tôi thêm định nghĩa hàm tạo của riêng mình trong lớp con, nó được gọi là ghi đè hàm tạo.

Lưu ý : cần phải chuyển các thuộc tính của lớp cha bằng từ khóa super trong khi ghi đè hàm tạo.

Ví dụ:

 
  

// lớp cha

class

Động vật

{

hàm tạo

(

tên

)

{

this

.name = name;

} }

// lớp con

class

Thú cưng

extension

Động vật

{

hàm tạo

(

tên, đặc biệt

)

{

siêu

(tên);

this

.speicy = Speicy;

} }

Giải thích ví dụ

Trong ví dụ trên, lớp Vật nuôi đang kế thừa lớp Động vật. Chúng tôi đã ghi đè phương thức khởi tạo của Animals bằng cách xác định một hàm tạo mới trong lớp Pets.

Sau đây là biểu diễn bằng hình ảnh về ghi đè hàm tạo:

Hãy tưởng tượng, chúng ta phải đứng lớp cho sinh viên và giáo sư của trường đại học của chúng ta. Cách tiếp cận đơn giản là tạo hai lớp khác nhau có tên là Sinh viên với các thuộc tính của nó như tên, tuổi, tên trường đại học, tên chi nhánh và Giáo sư với các thuộc tính như tên, tuổi, tên trường đại học, tên môn học, v.v.

Bây giờ nếu chúng ta quan sát kỹ, hai lớp này có thể có nhiều thuộc tính chung như name, age, collegeName, v.v. ngụ ý rằng các thuộc tính này có thể được trích xuất từ ​​một thực thể thứ ba.

Bây giờ, chúng ta sẽ tạo một lớp mới Person với các thuộc tính và phương thức điều đó sẽ chung cho cả lớp Giáo sư và lớp Sinh viên, tức là tên, tuổi và tên trường đại học. Ngoài ra, chúng tôi đã thêm ba phương thức vào lớp Person có tên là displayName () để trả về thuộc tính name, displayAge () để trả về thuộc tính age, displayCollageName () để trả về thuộc tính collageName và phương thức welcome () để hiển thị một chuỗi lời chào. < / p>

Sau khi triển khai lớp Person :

 
  

class

Người

{

hàm tạo

(

tên, tuổi, tên đại học

)

{

this

.name = name;

this

.age = age;

this

.collegeName = collegeName;

}

displayName

(

)

{

trả lại

`

$ {

này

.name}

`

;

}

displayAge

(

)

{

trả lại

`

$ {

này

.age}

`

;

}

displayCollageName

(

)

{

trả lại

`

$ {

này

.collageName}

`

;

}

chào

(

)

{

bảng điều khiển

.log (

`Xin chào, tôi là

$ {

< p> this

.name}

và tôi đến từ

$ {

này

. collegeName}

`

);

} }

Bây giờ chúng ta đã tạo một lớp có tất cả các thuộc tính chung của Giáo sư. và Sinh viên, chúng ta có thể kế thừa các thuộc tính này trong các lớp Giáo sư và Sinh viên trong khi thêm các thuộc tính chuyên biệt của chúng.

Do đó, lớp Giáo sư có thể được viết là:

 
  

class

Giáo sư

extension

Người

{

hàm tạo

(

tên, tuổi, đại họcName, chủ đề, yoe

)

{

siêu

(tên, tuổi, tên đại học);

this

.subject = subject;

this

.yoe = yoe;

}

chào

(

)

{

bảng điều khiển

.log (

`Xin chào, tôi là

$ {

< p> this

.name}

, tôi là giáo sư tại

$ {

điều này

. collegeName}

và tôi đã dạy trong quá khứ

$ {

điều này

.yoe}

năm`

);

}

displaySubject

(

)

{

bảng điều khiển

.log (

`

$ {

cái này

.subject}

`

);

} }

Trong lớp trên, chúng tôi sẽ có quyền truy cập vào tất cả các thuộc tính của class Person, mặc dù chúng tôi đã thêm một số thuộc tính và phương thức bổ sung cho lớp Giáo sư.

Và lớp Sinh viên có thể được viết là:

 
  

class

Sinh viên

mở rộng

Người

{

hàm tạo

(

tên, tuổi, đại họcName, brach, rollNo

)

{

siêu

(tên, tuổi, tên đại học);

this

.brach = brach;

này

.rollNo = rollNo;

}

chào

(

)

{

bảng điều khiển

.log (

`Xin chào, tôi là

$ {

< p> this

.name}

, cuộn không:

$ {

this

.rollNo }

và tôi là sinh viên tại

$ {

này

.collegeName}

`

);

}

displayBranch

(

)

{

bảng điều khiển

.log (

`

$ {

cái này

.branch}

`

);

} }

Trong lớp trên Sinh viên, chúng ta sẽ có quyền truy cập vào tất cả các thuộc tính của class Person, trong khi chúng tôi đã thêm một số thuộc tính và phương thức bổ sung cho lớp Student.

Đầu ra:

 
  

let

s1 =

mới

Sinh viên (

'Jon'

,

18

,

'Hogwarts'

,

'CSE'

< p>,

1101

);

s1.greet ();

// output: Xin chào, tôi là Jon, số báo danh: 1101 và tôi là học sinh trường Hogwarts

hãy để

p1 =

mới

Giáo sư (

'Peter'

,

45

,

'Hogwarts'

,

'Công nghệ web'

,

15

);

p1.displayBranch ();

// đầu ra: công nghệ web

p1.displayName ();

// đầu ra: Peter

Giải thích kết quả:

Ở đây chúng ta đã tạo hai đối tượng p1 và s1.

s1 được tạo từ lớp Student, chuyển các tham số name, age và collegeName cho lớp Person. Khi s1.greet () được gọi, phương thức chào của lớp sinh viên sẽ ghi đè phương thức chào của Person và hiển thị kết quả.

p1 được tạo từ lớp Giáo sư, phương thức này một lần nữa chuyển các tham số tên, tuổi, collegeName cho lớp cha. Bây giờ khi p1.displayBranch () được gọi, nó sẽ gọi phương thức trong lớp và hiển thị nhánh. Tương tự, p1.displayName () gọi phương thức displayName trong lớp Person và nó hiển thị Peter.

Kế thừa các thành viên tĩnh

Các thuộc tính và phương thức tĩnh của lớp cha cũng được kế thừa trong quá trình kế thừa trong javascript. Các thành viên tĩnh kế thừa trong javascript thuộc về lớp và không phải là một phần của đối tượng được khởi tạo.

Ví dụ

 
  

class

ô tô

{

hàm tạo

(

màu sắc

)

{

this

.color = color;

}

hiển thị

(

)

{

bảng điều khiển

.log (

`Chiếc xe này là

$ {

< p> this

.color}

bằng màu sắc`

);

}

tĩnh

chào

(

)

{

bảng điều khiển

.log (

'Chào mừng!'

);

} }

class

Skoda

mở rộng

Xe hơi

{

modelName

(

)

{

bảng điều khiển

.log (

`Đây là Skoda`

);

} }

Skoda.greet ();

// Xin chào!

Giải thích ví dụ:

Trong ví dụ trên, chúng ta đã tạo hai lớp Car và Skoda, trong đó Skoda đang kế thừa Car, do đó nó cũng sẽ kế thừa các phương thức và thuộc tính tĩnh của nó. Do đó, Skoda.greet () sẽ xuất ra ‘Chào mừng!’.

Kế thừa từ Các loại dựng sẵn

Kế thừa trong javascript cho phép chúng ta kế thừa các kiểu tích hợp sẵn trong javascript như mảng, tập hợp, bản đồ, v.v.

Ví dụ

 
  

class

Hàng đợi

< p class = "hljs-class">

mở rộng

Mảng

{

danh sách

(

e

)

{

siêu

.push (e);

}

dequeue

(

)

{

return

super

.shift ();

}

xem trước

(

)

{

trả lại

!

cái này

.empty ()?

this

[

0

]:

không xác định

;

}

trống

(

)

{

trả lại

điều này

.length ===

0

;

} }

let

sinh viên =

mới

Queue ();

sinh viên.enqueue (

'Jon'

);

sinh viên.enqueue (

'Peter'

);

sinh viên.enqueue (

'Loki'

);

Giải thích ví dụ:

Trong ví dụ trên, chúng ta đã định nghĩa Hàng đợi lớp kế thừa kiểu Mảng dựng sẵn. Bây giờ, vì Mảng đã có các phương thức như push, shift, v.v. nên nó sử dụng các phương thức này mà không cần khai báo gì. Vì vậy, khi chúng ta tạo đối tượng sinh viên với lớp Queue, nó sử dụng phương thức enqueue để đẩy các mục vào bên trong hàng đợi. Vì vậy, cuối cùng, chúng ta sẽ có một hàng đợi với ba mục Jon, Peter và Loki.

Công dụng của Thừa kế

Sau đây là một số việc sử dụng kế thừa trong javascript:

  • Kế thừa trong javascript giúp tổ chức dữ liệu ở dạng

    phân cấp

    .

  • Tính kế thừa trong javascript cho phép chúng ta kế thừa các thuộc tính từ một lớp khác, do đó làm cho các định nghĩa lớp ít phức tạp hơn.
  • Tính kế thừa trong javascript cũng làm cho mã

    gỡ lỗi thân thiện

    .

  • Kế thừa trong javascript cho phép chúng tôi thêm các thuộc tính của riêng mình trong các lớp con, do đó chúng tôi có thể ghi đè một số phương thức của các lớp cha trong khi kế thừa các thuộc tính cần thiết.

Kết luận

  • Kế thừa trong javascript được sử dụng để kế thừa các thuộc tính và phương thức của một lớp.
  • Các lớp được

    kế thừa

    bằng cách sử dụng từ khóa

    expand

    .

  • Lớp đang được kế thừa được gọi là lớp

    cha

    và lớp kế thừa lớp cha được gọi là lớp con.

  • Từ khóa super

    trong javascript được sử dụng để gọi các phương thức của lớp cha.

  • Các phương thức

    của lớp cha có thể bị ghi đè bởi các phương thức của lớp con.

  • Chúng ta có thể kế thừa các kiểu tích hợp sẵn của javascript như

    Array

    ,

    Map

    , v.v.

Xem thêm những thông tin liên quan đến chủ đề kế thừa trong javascript là gì

Giới Thiệu Prototypal Inheritance Trong Javascript | Justin Nguyen

  • Tác giả: Justin Nguyen
  • Ngày đăng: 2021-09-05
  • Đánh giá: 4 ⭐ ( 2738 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào mừng các bạn đến với series video Học Javascript Qua Khái Niệm về lập trình hướng đối tượng Prototypal Inheritance trong javascript.

    Nội dung trong video:
    🟢 2:20 Prototype vs __proto__
    🟢 7:05 Sử dụng Object.create để tạo kế thừa trong ES5
    🟢 19:50 Sử dụng constructor function để tạo kế thừa tốt hơn
    🟢 31:15 Sử dụng class trong ES6 để tạo kế thừa và hướng đối tượng

    ♥️ Xem toàn bộ series Học Javascript Qua Khái Niệm: https://www.youtube.com/watch?v=61rUGyUiw8U&list=PL80CNtS5d8_ytV3Jq5RSH3luyT3qGd0GY
    ♥️ Xem toàn bộ series Học Javascript Qua Ví Dụ: https://www.youtube.com/watch?v=QXwotZn5WrY&list=PL80CNtS5d8_yEuis6Cc4xTnNB4ePE5obx
    ♥️ MDN về Closure: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

    Hãy bấm like, chia sẻ nếu bạn thích video này nhé, đăng ký kênh để theo dõi những series video tiếp theo.

    Từ mới Tiếng anh trong video, xem thêm video để hiểu ý nghĩa nhé:
    ⭐ Constructor Function
    ⭐ Prototypal Inheritance, Classical Inheritance
    ⭐ Prototype Chain
    ⭐ Sugar Syntax

    Plugin được sử dụng để chạy JS trong Visual Studio Code: Code Runner

    Website: https://appsindie.com/
    Twitter: https://twitter.com/apps_indie
    Facebook: https://www.facebook.com/AppsIndie
    Github: https://github.com/justindannguyen

    © Copyright 2021 by Justin Nguyen, AppsIndie.com

Kế thừa trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 3 ⭐ ( 1279 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kế thừa là một khái niệm quan trọng trong lập trình hướng đối tượng. Một đối tượng kế thừa một đối tượng khác thì nó sẽ có thuộc tính và phương thức có sẵn của đối tượng mà nó kế thừa.

Tại sao Prototype Lại Quan Trọng Trong Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 8726 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Prototype là khái niệm cốt lõi cơ bản trong JavaScript khá quan trọng để thực thi OOP trong JavaScript. Trong bài này chúng ta cùng tìm hiểu về nó nhé!

Sử dụng kế thừa trong Javascript

  • Tác giả: levunguyen.com
  • Đánh giá: 4 ⭐ ( 6144 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngôn ngữ lập trình web JavaScript là một ngôn ngữ lập trình hướng đối tượng OOP, mà một OOP thì thường bao gồm các tính chất tính đa hình, đóng gói, trừu tượng và kế thừa. Một trong những tính chất nổi trội đó chính là tính kế thừa. Bài viết sẽ giúp bạn hiểu được tính kế thừa trong ngôn ngữ lập trình web JavaScript là gì. Đồng thời hướng dẫn cách sử dụng nó để áp dụng được vào quá trình thực hành. Bài viết có kèm theo ví dụ minh hoạ hoàn chỉnh về tính kế thừa để bạn tham khảo thêm trong quá trình học.

Kế thừa Prototype trong Javascript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 2587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kế thừa Prototype trong Javascript – Lập Trình Từ Đầu 2 Đối Tượng Trong JavaScript

Các cách kế thừa cơ bản trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 5 ⭐ ( 7506 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi lập trình, việc kế thừa là cần thiết nếu bạn muốn giảm lượng code phải viết và quản lý code dễ dàng hơn. Vậy triển khai kế thừa trong JavaScript như thế nào? Bài viết này, mình sẽ giới thiệu với các bạn các cách triển khai kế thừa cơ bản trong JavaScript.

Chi tiết bài học 10. Kế thừa trong Javascript

  • Tác giả: www.vimentor.com
  • Đánh giá: 4 ⭐ ( 2035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vimentor chi tiết bài học

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình