Lập trình hướng đối tượng với JavaScript

Lập trình hướng đối tượng với JavaScript

JavaScript không là một ngôn ngữ lập trình hướng đối tượng hoàn toàn. Tuy nhiên, bạn có thể có nhiều cách để cài đặt lập trình hướng đối tượng và bạn có thể tạo các lớp về kế thừa chúng.

Chúng ta sẽ sử dụng prototype trong JavaScript để xây dựng lớp và lập trình kế thừa. Đầu tiên chúng ta có thể tạo một lớp. Chúng ta sẽ tạo constructor cho lớp BaseClass:

var Mammal = function(){
		this.name = "Mammal";
	}

Tiếp theo đó, chúng ta sẽ tạo các phương thức cho lớp BaseClass bằng cách sử dụng thuộc tính prototype của biến BaseClass:

        var Mammal = function(){
		this.name = " Mammal";
	}

	Mammal.prototype = {
		getName:function() {
			return this.name;
		},
		setName:function(str) {
			this.name = str;
		}
	};

Phần thú vị nhất đó là làm sao để cài đặt phần kế thừa. Chúng ta sẽ cài đặt một phương thức giúp cho việc kế thừa trở nên dễ dàng hơn:

function extend(childClass, parentClass) {
		childClass.prototype = new parentClass();
		childClass.prototype.constructor = childClass;
	}

Phương thức này sẽ giúp cho việc kế thừa lớp con từ lớp cha một cách dễ dàng. Dòng lệnh thứ nhất sẽ sao chép mọi thuộc tính và mọi phương thức kể cả cấu tử. Điều này có nghĩa là nếu chúng ta cần tạo một đối lượng của lớp childClass và chúng ta sẽ sử dụng cấu tử của lớp parentClass. Ở dòng thứ hai, chúng ta phục hồi cấu tử của lớp childClass.

Bây giờ chúng ta hãy xem toàn bộ ví dụ về kế thừa:

var Mammal = function() {
            this.name = "Mammal";
        };

        Mammal.prototype = {
            getName: function () {
                return this.name;
            },
            setName: function (str) {
                this.name = str;
            }
        };

        function extend(childClass, parentClass) {
            childClass.prototype = new parentClass();
            childClass.prototype.constructor = childClass;
        };

        var Dog = function() {
            this.setName("Dog");
        };

        var Cat = function() {
            this.setName("Cat");
        };

        extend(Dog, Mammal);
        extend(Cat, Mammal);

        var mammal = new Mammal();
        var cat = new Cat();
        var dog = new Dog();

        console.log(mammal.getName());
        console.log(cat.getName());
        console.log(dog.getName());

Khi bỏ mã JavaScript này vào một trang HTML và chạy nó thì bạn sẽ thấy ở console sẽ xuất hiện các tên lần lượt là:

result

Như vậy, qua bài viết này, bạn đã phần nào nắm được cách thức tạo lớp và kế thừa một lớp từ một lớp khác.