Tin tức chung

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

    • 17 October 2019

    Tìm hiểu sâu hơn về các khía cạnh liên quan đến lập trình hướng đối tượng của ngôn ngữ lập trình JavaScript.

    Trong bài viết Lập trình hướng đối tượng với JavaScript?, tôi đã so sánh ngôn ngữ lập trình dựa trên đối tượng với ngôn ngữ lập trình hướng đối tượng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu sâu hơn về các khía cạnh liên quan đến lập trình hướng đối tượng của ngôn ngữ lập trình JavaScript.

    Lịch sử object


    Có một câu nói mang đầy tính triết học như này:

    Một vấn đề phức tạp có thể được quản lý bằng cách chia nó thành những phần nhỏ độc lập với nhau.

    Mỗi thành phần nhỏ ở đây chính là object. Object cung cấp cho chúng ta những phương thức để gọi mà không cần biết nội dung bên trong nó như thế nào. Sau khi xây dựng được những object hoạt động theo đúng yêu cầu, ta sẽ sử dụng chúng để giải quyết những bài toán lớn hơn một cách đơn giản. Đây cũng chính là tư tưởng chia để trị.

    Method (phương thức)


    Method là một thành phần vô cùng quan trọng trong object. Đối với C++ hay Java, chúng ta chỉ có thể sử dụng được những method dạng public. Chúng ta sẽ sử dụng những method này để lấy giá trị hay thay đổi thông tin các thuộc tính của object. Trong JavaScript, method chính là một thuộc tính mà giá trị của nó là function. Sau đây là một phương thức đơn giản:

    var rabbit = {};
    rabbit.speak = function(line) {
      console.log("The rabbit says '" + line + "'");
    };
    
    rabbit.speak("I'm alive.");
    // => The rabbit says 'I'm alive.'
    

    Thông thường, một method sẽ làm một vài thứ với object gọi nó. Để biểu thị object đã gọi method, JavaScript cung cấp từ khoá this để chúng ta sử dụng bên trong method. Ví dụ trên có thể thay đổi như sau:

    function speak(line) {
      console.log("The " + this.type + " rabbit says '" + line + "'");
    }
    var whiteRabbit = {type: "white", speak: speak};
    var fatRabbit = {type: "fat", speak: speak};
    
    whiteRabbit.speak("I'm alive.");
    // => The white rabbit says 'I'm alive.'
    fatRabbit.speak("I'm alive.");
    // => The fat rabbit says 'I'm alive.'
    

    Tư tưởng sử dụng từ khoá this này cũng được áp dụng trong C++ hay Java.

    Sự tương quan với bind, call, apply

    Nếu bạn chưa biết bindcall hay apply là gì thì bạn có thể tham khảo tại đây. Khi gọi 3 hàm này, tham số đầu tiên chính là giá trị của con trỏ this.

    function speak(line) {
      console.log("The " + this.type + " rabbit says '" + line + "'");
    }
    var whiteRabbit = {type: "white"};
    var fatRabbit = {type: "fat"};
    var sexyRabbit = {type: "sexy"};
    
    speak.apply(whiteRabbit, ["I'm alive."]);
    // => The white rabbit says 'I'm alive.'
    
    speak.call(fatRabbit, "I'm alive.");
    // => The fat rabbit says 'I'm alive.'
    
    var sexyRabbitSpeak = speak.bind(sexyRabbit, "I'm alive.");
    sexyRabbitSpeak();
    // => The sexy rabbit says 'I'm alive.'
    

    Prototypes


    Prototype là khái niệm rất riêng của JavaScript. Không giống như C++, Java, một JavaScript Object luôn có sẵn ít nhất một thuộc tính bên trong nó, là prototype. Và prototype cũng chính là một object. Khi một object gọi đến một thuộc tính mà nó không có thì nó sẽ tìm trong prototype. Hãy xem ví dụ sau:

    var empty = {};
    console.log(empty.toString);
    // => function toString() { [native code] }
    console.log(empty.toString());
    // => [object Object]
    

    Rõ ràng, tôi chỉ khai báo empty là một object mà không định nghĩa thêm thuộc tính nào. Tuy nhiên, ví dụ trên chỉ ra rằng thuộc tính toString tồn tại trong object empty. Đó là vì: toString là một thuộc tính của prototype mà một object thì luôn chứa thuộc tính prototype.

    var empty = {};
    
    console.log(Object.getPrototypeOf(empty) == Object.prototype);
    // => true
    console.log(Object.getPrototypeOf(Object.prototype));
    // => null
    

    Constructors (Hàm khởi tạo)


    Nếu bạn đã biết về lập trình hướng đối tượng thì bạn sẽ không còn xa lạ gì với constructor. Trong JavaScript, hàm khởi tạo constructor sẽ chứa từ khoá this để biểu thị object được tạo ra từ nó. Thông thường, constructor sẽ được bắt đầu bằng chữ cái viết hoa - dùng để phân biệt nó với các function khác. Bạn sẽ phải sử dụng từ khoá new đứng trước tên function để tạo ra một đối tượng mới từ hàm constructor này. Sau đây là một ví dụ đơn giản về constructor:

    function Rabbit(type) {
      this.type = type;
      this.greeting = function(){
        console.log(this.type + " rabbit" + " say Hello!");
      }
    }
    
    var blackRabbit = new Rabbit("black");
    console.log(blackRabbit.type);        
    // => black
    blackRabbit.greeting();  
    // => black rabbit say Hello!
    
    var killerRabbit = new Rabbit("killer");
    console.log(killerRabbit.type);
    // => killer
    killerRabbit.greeting(); 
    // => killer rabbit say Hello!
    

    Lúc này, mỗi đối tượng được tạo ra từ constructor Rabbit sẽ có hai thuộc tính type và greeting. Tuy nhiên, bạn vẫn có thể tạo thêm thuộc tính cho nó thông qua Object.prototype như sau:

    function Rabbit(type) {
      this.type = type;
      this.greeting = function(){
        console.log(this.type + " rabbit" + " say Hello!");
      }
    }
    
    Rabbit.prototype.sayBye = function (){
      console.log(this.type + " rabbit" + " say GoodBye!");
    }
    
    var blackRabbit = new Rabbit("black");
    blackRabbit.sayBye();
    // => black rabbit say GoodBye!
    

    Ghi đè thuộc tính


    Trong ví dụ trên, Rabbit chứa thuộc tính type. Đối với mỗi object được tạo ra từ constructor Rabbit, bạn có thể thay đổi giá trị thuộc tính của một object mà không làm ảnh hưởng tới các object khác.

    function Rabbit(type) {
      this.type = type;
      this.greeting = function(){
        console.log(this.type + " rabbit" + " say Hello!");
      }
    }
    
    Rabbit.prototype.teeth = "small";
    
    var blackRabbit = new Rabbit("black");
    var killerRabbit = new Rabbit("killer");
    
    console.log(blackRabbit.teeth);   // => small
    console.log(killerRabbit.teeth);  // => small
    
    killerRabbit.teeth = "long";
    console.log(blackRabbit.teeth);   // => small
    console.log(killerRabbit.teeth);  // => long
    

    Tính chất đặc trưng của lập trình hướng đối tượng trong JavaScript


    Tính đóng gói (Encapsulation)

    Tính đóng gói: che giấu dữ liệu, không cho phép truy cập dữ liệu trực tiếp từ bên ngoài, mà phải thông qua các method được cung cấp.

    function Person(_name){
      var name = _name;
      this.setName = function(_name){
        name = _name;       
      }
      this.getName = function(){
        return name;
      }
    }
    
    var person = new Person("LamPham");
    console.log(person.name);          // => undefined
    console.log(person.getName());     // => LamPham
    
    person.setName("LP Devs");
    console.log(person.getName());     // => LP Devs</pre>
    
    
    Tính kế thừa (inheritance)

    Tính kế thừa: đối tượng con sẽ kế thừa những thuộc tính của đối tượng cha mà không cần phải định nghĩa lại. Mặc dù, JavaScript không hỗ trợ trực tiếp tính kế thừa, tuy nhiên ta vẫn có thể tuỳ biến để áp dụng tính chất này trong JavaScript.

    function Person(_name){
      var name = _name;
      this.setName = function(_name){
        name = _name;       
      }
      this.getName = function(){
        return name;
      }
    }
    
    function Student(_name, _school){
      var school = _school;
      Person.call(this, _name);
      this.setSchool = function(_school){
        school = _school;
      }
      this.getSchool = function(){
        return school;
      }
    }
    
    var student = new Student("LamPham", "HUST");
    console.log(student.getName());    // => LamPham
    console.log(student.getSchool());  // => HUST
    
    student.setSchool("NEU");
    student.setName("Ronaldo");
    
    console.log(student.getName());    // => Ronaldo
    console.log(student.getSchool());  // => NEU
    

    Ngoài ra, còn hai tính chất nữa là: tính đa hình và tính trừu tượng. Tuy nhiên, việc áp dụng hai tính chất này trong JavaScript là không rõ ràng. Do đó, tôi sẽ không trình bày về chúng nữa.

    Kết luận


    Trên đây là những khía cạnh cơ bản của lập trình hướng đối tượng được áp dụng trong JavaScript. Tôi có thể tóm tắt ngắn gọn lại như sau:

    • Method: chúng ta sẽ sử dụng method để lấy giá trị và sửa đổi giá trị thuộc tính của object.
    • Prototype: mọi object đều chứa thuộc tính prototype. Chúng ta có thể thay đổi, thêm thuộc tính của object dựa vào prototype.
    • Constructor: Có thể tạo mới một object từ một hàm khởi tạo constructor sử dụng từ khoá new.
    • Tính đóng gói: che giấu dữ liệu; không cho phép truy cập dữ liệu trực tiếp từ bên ngoài, mà phải thông qua các method được cung cấp.
    • Tính kế thừa: đối tượng con sẽ kế thừa những thuộc tính của đối tượng cha mà không cần phải định nghĩa lại.

    Việc áp dụng lập trình hướng đối tượng vào JavaScript là tương đối khó. Tuy nhiên, nếu bạn nắm vững những kiến thức cơ bản mà tôi đã trình bày trên đây, thì tôi tin chắc rằng bạn sẽ dễ dàng tìm hiểu thêm và áp dụng lập trình hướng đối tượng trong JavaScript.

    DevPro Việt Nam via Lam Pham kipalog: https://kipalog.com/posts/LAP-TRINH-HUONG-DOI-TUONG-CUNG-JAVASCRIPT

Đánh giá của học viên đã tốt nghiệp

  • Các anh chị nhiệt tình, thân thiện. Em được mở mang nhiều kiến thức

    Nguyễn Hằng ly
  • Các chị dạy rất dễ hiểu và nhiệt tình. Các kiến thức như trong thực tế khi em đi thực tập tại RikkeiSoft. Cám ơn các anh chị nhiều ạ. Chúc Dev có nhiều học viên hơn nữa.

    Vũ Thị Hà Phương
  • Học ở DevPro đã giúp mình có nhiều kinh nghiệm lập trình android thực tế. Tại đây mình được các thầy dạy rất chi tiết theo một lộ trình rõ ràng của dự án cụ thể nên sau này đi làm mình rất dễ bắt nhịp với công việc.

    Nguyễn Trọng Duy
  • Qua khoá học ở DevPro thì em đã có một “ít” vốn trong tay để có thể "bò" trong lĩnh vực vạn người mê này Trong qúa trình học thì em cảm thấy trung tâm suppost rất nhiệt tình từ đồ ăn tối, event và đầu ra :p. Có chị Quyên "sinh gái" siêu nhây và siêu lầy dụ dỗ bán rẻ học viên cho các nhà tuyển dụng :3 **** Đặc biệt các thầy có rất nhiều kinh nghiệm chỉ dạy và giúp đỡ rất nhiệt tính < mấy tháng liền bám càng đi nhờ thấy :p>

    PhạmTiến Đạt
  • Tôi sẽ không khuyên các bạn phải đến DevPro để học tập thay vì những chỗ khác nhưng tôi đã từng là một người giống các bạn. Tôi băn khoăn không biết chọn nơi đâu làm ngọn đèn chỉ lối và tôi đến với Devpro . Mọi người khá hoà đồng , các thầy cũng cực nhiệt tình nhưng cũng có vốn kiến thức rất rộng còn lại là phụ thuộc vào sự nỗ lực của các bạn nữa thôi. Cố lên nhé. #ATran

    Trần Xuân Ái
  • em thấy mọi thứ đều ổn, thầy giáo nhiệt tình trong cách giảng dậy, dev cũng rất quan tâm học viên . Nhưng theo quan điểm của em và nhìn từ sự phát triển của các trung tâm khác , em nghĩ mỗi khóa học ở dev nên có bài tập cũng như dự án giao cho học sinh làm để tạo áp lực cho học viên code, giữa học viên và công ty cần có những buổi giao lưu nhiều hơn, và cũng nên có 1 số bạn trợ giảng giúp thầy đi fix những lỗi cơ bản cho những bạn hay sai , chứ nhiều khi 1 mình thầy mà phải chạy đến từng bàn fix lỗi cũng k xuể , Xin chúc devpro ngày càng phát triển hơn

    Nguyễn Đình Thành
  • Thầy giáo dạy rất nhiệt tình rất dễ hiểu, các chị quản lý vui vẻ, tạo động lực học viên. Bài giảng phong phú bao gồm nhiều kiến thức nền tảng. .., giúp học viên nắm chắc kiến thức. Có điều lớp toàn nam, ko có nữ ạ

    Vũ Văn Thủy
  • -Thầy giáo rất nhiệt tình trong công tác giảng dạy , cũng như vui tính , thầy luôn giúp đỡ bọn e rất nhiệt tình ! Tuy chỉ học với lớp 1 thời gian không quá dài nhưng e cũng cảm thấy tuyệt vời vì đã từng là học trò của thầy ! - Chị Hằng và Chị Quyên rất vui tính và nhiệt tình giúp đỡ bọn e nữa ạ - e chúc trung tâm ngày càng đông học viên hơn nữa

    Phan Trung Phú
  • DevPro là một môi trường tốt để cho những ai chưa biết gì về lập trình theo học. Bên cạnh đó, đội ngũ giảng viên rất chất lượng, nhiệt tình chỉ bảo cả trên lớp lẫn ở nhà. Ngoài ra tôi rất thích chính sách giới thiệu việc làm cho học viên sau khi tốt nghiệp để có thể tiếp với các doanh nghiệp uy tín. Sau hơn 4 tháng học tập tại công ty, tôi đã hoàn toàn tự tin rằng mình có thể tự học hỏi và bắt đầu làm việc ở một công ty mới với vai trò Web Developer. Cảm ơn DevPro vì tất cả!!

    Nguyễn Đức Huy
  • Học một lúc 2 trường, nhưng mình vấn chưa biết tìm đam mê từ đâu. Từ lúc gặp chị Hằng mình đã quyết chọn theo android, và bây giờ mình chưa bao giờ thấy hạnh phúc đến thế. Mình có công việc ổn định, chuẩn bị onsite ở nhật 1 năm hi hi.

    Trần An Hưng
  • 1.Thầy đẹp trai thì không phải bàn rồi!! Lại được cái nhiệt tình!! ok. 2. Công ty có nhiệt tình hỗ trợ không? Công ty có nhiệt tình hỗ trợ sinh viên, vd:tiền học phí được chia làm 3 đợt giúp đỡ những sv khó khăn,.....

    Trương Quang Trường
  • Em thấy trung tâm dạy tốt và chất lượng ạ. Thầy và các chị đều tận tâm, nhiệt tình và hòa đồng. Đặc biệt là giải lao giữa giờ chúng em còn được ăn nhẹ, e rất thích khoản này.

    Trần Thị Hồng Nhung
  • Tại DevPro mình còn được học code trên tool mới nhất của Android, điều đó càng khiến mình thích thú hơn và trở nên say mê từ lúc nào không biết nữa. Không khí học ở đây rất vui vẻ, ngoài giờ học mình cùng các bạn còn được giải lao ăn nhẹ và trò chuyện cùng nhau nên rất thoải mãi.

    Trương Ngọc Đức
  • Dev chính là nơi giúp mình tìm thấy niềm yêu thích code, cũng chính là nơi đã cho mình những bước đi đầu tiên, cho mình những kiến thức nền tảng tốt nhất trên con đường theo đuổi nghề Dev.

    Nguyễn Thanh Hằng
  • Thầy giáo vui tính, nhiệt tình trả lời và giúp đỡ các bạn khi các bạn có thắc mắc hay khi gặp khó khăn. Các anh chị vui tính, thân thiện tạo cảm giác thoải mái và vui vẻ cho các bạn khi học ở đây.

    Cao Minh Lâm
  • Nghĩ lại hồi đấy, không có Devpro thì chắc giờ em phát rồ mất thôi! Em vốn nghĩ mình có thể tự học được, nhưng kiến thức vốn là vô tận, không có người hướng dẫn thì mình sẽ chẳng biết bắt đầu dư lào, bước tiếp là gì? Nhờ DevPro, sự tận tâm của các thầy mà em mới biết à hóa ra mọi thứ thật đơn giản.

    Kim Erico
  • Hồi học ở DevPro, mình rất quý thầy Việt và những người bạn. Từ kiến thức học được từ trung tâm mình đã mạnh dạn đi thực tập ở một công ty lớn của Nhật Bản và đến giờ đã là nhân viên chính thức ở đây rồi. Vui hơn nữa là có bạn học cùng lớp đó giờ đang là đồng nghiệp cùng mình luôn rồi. Hihi

    Nguyễn Thanh Việt
Nguyễn Hằng ly Vũ  Thị Hà Phương Nguyễn Trọng Duy PhạmTiến Đạt Trần Xuân Ái Nguyễn Đình Thành Vũ Văn Thủy Phan Trung Phú Nguyễn Đức Huy Trần An Hưng Trương Quang Trường Trần Thị Hồng Nhung Trương Ngọc Đức Nguyễn Thanh Hằng Cao Minh Lâm Kim Erico Nguyễn Thanh Việt