KẾ THỪA CLASS TRONG CSS

     
Kế thừa class trong JavaScript là phương pháp để tạo ra một class thông qua việc sử dụng mà không ngừng mở rộng class khác. Nhờ đó, chúng ta có thể tạo thêm các tính năng lạ mà vẫn giữ nguyên những kĩ năng hiện tại.

Bạn đang xem: Kế thừa class trong css

Từ khóa extend khi kế thừa class

Giả sử mình tất cả class Animal như sau:


class Animal constructor(name) this.speed = 0; this.name = name; run(speed) this.speed = speed; console.log(`$this.name runs with speed $this.speed.`); stop() this.speed = 0; console.log(`$this.name stands still.`); let animal = new Animal("My animal");
Tiếp theo, mình muốn tạo thêm class không giống là Rabbit. Nhưng mà Rabbit thực chất cũng là Animal, yêu cầu class Rabbit đề xuất được kế thừa từ class Animal để rất có thể sử dụng các phương thức trong đó.

Nói cách khác, từng object tạo vì chưng Rabbit hoàn toàn có thể làm được các thứ nhưng mà Animal hoàn toàn có thể làm. Đó đó là bản chất của kế thừa.

Cú pháp để thừa kế class trong JavaScript là: class Child extends Parent. Vị đó, class Rabbit hoàn toàn có thể được viết như sau:


class Rabbit extends Animal hide() console.log(`$this.name hides!`); let rabbit = new Rabbit("White Rabbit");rabbit.run(5); // white Rabbit runs with tốc độ 5.rabbit.hide(); // white Rabbit hides!
Bạn thấy rằng, object tạo vày Rabbit có thể đồng thời thực hiện phương thức vào Rabbit là rabbit.hide() và cách làm trong Animal là rabbit.run().

Về bạn dạng chất, tự khóa extends sử dụng cơ chế thừa kế prototype trải qua việc gán Rabbit.prototype.<> bởi Animal.prototype. Nghĩa là giả dụ một cách làm không được kiếm tìm thấy trong Rabbit.animal thì JavaScript sẽ auto tìm tìm trong Animal.prototype.

Ví dụ để tìm thủ tục rabbit.run, JavaScript engine sẽ tiến hành tìm kiếm như sau:

Tìm trong đối tượng người dùng rabbit - không có run.Tìm vào prototype của rabbit, sẽ là Rabbit.prototype - cũng không có run.Tìm trong prototype của Rabbit.prototype, sẽ là Animal.prototype - tất cả phương thức run.

Chú ý: Đằng sau từ khóa extends không chỉ có là class mà lại còn có thể là một biểu thức.

Ví dụ một hàm trả về một class như sau:


function f(message) return class sayHi() console.log(message); ;class User extends f("Hello") new User().sayHi(); // Hello
Trong lấy một ví dụ trên, class User kế thừa xuất phát điểm từ một class là tác dụng của việc gọi hàm f("Hello").

Ghi đè phương thức

Khi kế thừa class vào JavaScript, tất cả các cách thức không được có mang trong class bé Rabbit sẽ tiến hành tìm với lấy sống class cha Animal nhằm sử dụng.

Nhưng ở tinh tướng ngược lại, ví như mình định nghĩa lại một phương thức của class Animal vào class Rabbit, giả sử là phương thức stop. Lúc đó, cách tiến hành stop vào Rabbit sẽ được sử dụng:


class Rabbit extends Animal stop() // cách tiến hành này được áp dụng khi gọi `rabbit.stop()` // thay do phương thức `stop` trong class Animal.
Đó đó là ghi đè ở trong tính khi kế thừa class vào JavaScript.

Xem thêm: 30+ Lời Cảm Ơn Sinh Nhật Tới Bạn Bè, Lời Cảm Ơn Trong Ngày Sinh Nhật

Tuy nhiên, họ thường không muốn thay thế hoàn toàn phương thức cha nhưng mà sẽ dựa vào đó với rồi triển khai thêm một trong những tác vụ. Nghĩa là bản thân sẽ làm một trang bị gì đó, nhưng lại vẫn gọi đến phương thức phụ thân trước hoặc sau quá trình kia.

Để giải quyết vấn đề này, class cung ứng từ khóa super với cách thực hiện như sau:

super.method(): hotline đến thủ tục cha.super(...): hotline đến hàm khởi chế tạo ra của class phụ vương (chỉ áp dụng trong hàm khởi tạo).

Ví dụ, class Rabbit thừa kế class Animal và ghi đè cách làm stop:


class Animal constructor(name) this.speed = 0; this.name = name; run(speed) this.speed = speed; console.log(`$this.name runs with speed $this.speed.`); stop() this.speed = 0; console.log(`$this.name stands still.`); class Rabbit extends Animal hide() console.log(`$this.name hides!`); stop() super.stop(); // hotline đến thủ tục stop của Animal this.hide(); // và rồi gọi cách thức hide của chính nó. Let rabbit = new Rabbit("White Rabbit");rabbit.run(5);// white Rabbit runs with speed 5.rabbit.stop();// white Rabbit stands still.// white Rabbit hides!
Trong ví dụ như trên, Rabbit đã có phương thức stop riêng. Và cách tiến hành này điện thoại tư vấn đến cách tiến hành stop của class cha Animal là super.stop().

Chú ý: arrow function không tồn tại super. Dó đó, super sẽ tiến hành tham chiếu đến hàm mặt ngoài, ví dụ:


class Rabbit extends Animal stop() setTimeout(() => super.stop(); // điện thoại tư vấn đến hàm stop của class Animal sau 1000ms , 1000);
Ở lấy ví dụ trên, super vào arrow function là hoàn toàn tương đương với super trong hàm stop. Vì chưng vậy, công dụng thực hiện hoàn toàn đúng đắn như mong muốn muốn.

Tuy nhiên, nếu ráng arrow function bởi hàm thông thường thì công dụng sẽ khác:


setTimeout(function () super.stop(); // tác dụng không như mong mỏi muốn, 1000);

Ghi đè hàm khởi tạo

Khi thừa kế class trong JavaScript, việc ghi đè hàm khởi tạo phức hợp hơn so với câu hỏi ghi đè cách tiến hành thông thường.

Trong các ví dụ trên, class Rabbit chưa xuất hiện hàm khởi tạo. Vày đó, JavaScript engine sẽ auto tạo một hàm khởi tạo ra trống như sau:


class Rabbit extends Animal constructor(...args) super(...args);
Hàm khởi sản xuất của Rabbit không tiến hành thêm gì ngoài câu hỏi gọi hàm khởi tạo của class phụ vương Animal trải qua câu lệnh super(...args).

Bây giờ, bản thân sẽ đổi khác hàm khởi tạo của Rabbit, bằng phương pháp truyền thêm thông số earLength kề bên name như sau:


class Animal constructor(name) this.speed = 0; this.name = name; // ...class Rabbit extends Animal constructor(name, earLength) this.speed = 0; this.name = name; this.earLength = earLength; // ...// Sử dụnglet rabbit = new Rabbit("White Rabbit", 10);// Lỗi:// Uncaught ReferenceError: Must điện thoại tư vấn super constructor in derived class// before accessing "this" or returning from derived
Với giải pháp làm trên thì đã gồm lỗi xảy ra. Với lỗi này được gọi là:


Phải call hàm khởi sinh sản của class thân phụ trước khi truy vấn vào `this`hoặc xong hàm khởi tạo.
Vì vậy, mình vẫn sửa lại đoạn code bên trên như sau:


class Animal constructor(name) this.speed = 0; this.name = name; // ...class Rabbit extends Animal constructor(name, earLength) super(name); this.earLength = earLength; // ...// Sử dụng:let rabbit = new Rabbit("White Rabbit", 10);console.log(rabbit.name); // white Rabbitconsole.log(rabbit.earLength); // 10

Tổng kết

Những kiến thức và kỹ năng cơ phiên bản cần lưu giữ về thừa kế class trong JavaScript là:

Cú pháp thừa kế class vào JavaScript: class Child extends Parent.Bản chất câu lệnh trên thực hiện gán Child.prototype.__proto__ bằng Parent.prototype.Khi một cách thức không được tìm thấy vào class Child thì JavaScript sẽ tự động hóa tìm tìm trong class Parent.Khi ghi đè hàm khởi tạo:Phải call đến hàm khởi tạo của class phụ thân thông qua super() trước khi sử dụng this.Khi ghi đè các phương thức khác:Bạn hoàn toàn có thể sử dụng super.method() vào class Child để hotline đến cách thức method trong class Parent.

Chú ý: arrow function không tồn tại this cũng như super. Vì vậy, chúng sẽ được tham chiếu mang đến hàm bên ngoài.

Xem thêm: Mẫu Đơn Xin Xác Nhận Địa Chỉ Là Một, Mẫu Giấy Xác Nhận Địa Chỉ

Tham khảo: Class inheritance


★ nếu khách hàng thấy nội dung bài viết này hay thì nên theo dõi bản thân trên Facebook để nhận được thông báo khi có nội dung bài viết mới duy nhất nhé:


JavaScript
Class, ES6, Prototype
Cú pháp class trong JavaScript cơ bản
Thuộc tính và cách thức static của class vào JavaScript
Chia sẻ:

Bình luận


Bài viết new cập nhật


Cách chọn CMS đến trang webAsync/await là gì? Async/await trong JSMicrotasks là gì? Microtasks vào JSChuyển callback thành promise trong JSCác promise API vào JavaScriptXử lý lỗi với promise vào JavaScriptChuỗi promise trong JavaScriptPromise là gì? Promise trong JavaScriptCallback là gì? Callback vào JavaScriptTùy đổi thay và mở rộng đối tượng người dùng Error vào JS
*

Complete JavaScript là trang blog về lập trình sẵn - chuyên chia sẻ kiến thức về lập trình sẵn JavaScript, một số trong những thư viện/framework Javascript (React.js, Gatsby.js,...) và những kỹ năng và kiến thức khác liên quan đến lập trình sẵn web (HTML, CSS,...).


Mạng làng mạc hội
Complete Sites
Complete ToolsComplete ứng dụng IdeasComplete 1LOC
Dự án cá nhân
Gatsby Blog TemplateShiba.cssTic Tac ToeReact tiện ích TemplateMarkdown EditorNinePatch.jsDrum MachinePomodoro ClockBasic Calculator
Các trang web
Blog Thuật toánLam Dev BlogLam Pham BlogAmazing CSSPortfolioMy game android AppsCộng đồng JavaScriptFanpage
Tài nguyên
JavaScriptReactThủ thuật ITCuộc sống ITBài viết được tài trợQuestionFreebieBlogeBooksTags
Trang chủGiới thiệuLiên hệDịch vụHire me on UpworkĐiều khoảnChính sách