Hướng dẫn how does oop work in javascript? - oop hoạt động như thế nào trong javascript?

JavaScript không phải là ngôn ngữ hướng đối tượng dựa trên lớp. Nhưng nó vẫn có cách sử dụng lập trình hướng đối tượng [OOP].

Trong hướng dẫn này, tôi sẽ giải thích OOP và chỉ cho bạn cách sử dụng nó.

Theo Wikipedia, lập trình dựa trên lớp học là

Một phong cách lập trình hướng đối tượng [OOP] trong đó sự kế thừa xảy ra thông qua việc xác định các lớp đối tượng, thay vì di truyền xảy ra thông qua các đối tượng một mình

Mô hình phổ biến nhất của OOP là dựa trên lớp.

Nhưng như tôi đã đề cập, JavaScript không phải là một Langauge dựa trên lớp-đó là một langauge dựa trên nguyên mẫu.

Theo tài liệu của Mozilla:

Một ngôn ngữ dựa trên nguyên mẫu có khái niệm về một đối tượng nguyên mẫu, một đối tượng được sử dụng làm mẫu để có được các thuộc tính ban đầu cho một đối tượng mới.

Hãy xem mã này:

let names = {
    fname: "Dillion",
    lname: "Megida"
}
console.log[names.fname];
console.log[names.hasOwnProperty["mname"]];
// Expected Output
// Dillion
// false

Biến đối tượng names chỉ có hai thuộc tính -

console.log[names];

console.log[names];

Vậy

console.log[names];

Vâng, nó đến từ nguyên mẫu

console.log[names];

Thử đăng nhập nội dung của biến vào bảng điều khiển:

console.log[names];

Khi bạn mở rộng kết quả trong bảng điều khiển, bạn sẽ nhận được điều này:

Lưu ý thuộc tính cuối cùng -

console.log[names];

Bạn sẽ thấy một tập hợp các thuộc tính trong hàm tạo

console.log[names];

console.log[names];

console.log[names];

Nói cách khác, tất cả các đối tượng đều có quyền truy cập vào nguyên mẫu của ____ 13. Chúng không sở hữu các thuộc tính này, nhưng được cấp quyền truy cập vào các thuộc tính trong nguyên mẫu.

Tài sản

console.log[names];

4

Điều này chỉ vào đối tượng được sử dụng làm nguyên mẫu.

Đây là thuộc tính trên mọi đối tượng cho phép nó truy cập vào thuộc tính

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

Mỗi đối tượng đều có thuộc tính này theo mặc định, trong đó đề cập đến

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

console.log[names];

Sửa đổi thuộc tính

console.log[names];

4

Thuộc tính này có thể được sửa đổi bằng cách nêu rõ rằng nó nên đề cập đến một nguyên mẫu khác. Các phương pháp sau được sử dụng để đạt được điều này:

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

4

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

Trong bảng điều khiển, đây là những gì bạn có:

Lưu ý thuộc tính

console.log[names];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

8 Từ khóa

function DogObject[name, age] {
    this.name = name;
    this.age = age;
}
DogObject.prototype.speak = function[] {
    return "I am a dog";
}
let john = new DogObject["John", 45];

Thuộc tính ________ của

console.log[names];

console.log[names];

console.log[names];

console.log[names];

console.log[names];

Kỹ thuật này được gọi là chuỗi nguyên mẫu.PROTOTYPE CHAINING.

Lưu ý rằng: Cách tiếp cận từ khóa

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

Và vì thế...

Mỗi đối tượng trong JavaScript đều có quyền truy cập vào nguyên mẫu của ____ 13 theo mặc định. Nếu được cấu hình để sử dụng một nguyên mẫu khác, giả sử

function DogObject[name, age] {
    this.name = name;
    this.age = age;
}
DogObject.prototype.speak = function[] {
    return "I am a dog";
}
let john = new DogObject["John", 45];

function DogObject[name, age] {
    this.name = name;
    this.age = age;
}
DogObject.prototype.speak = function[] {
    return "I am a dog";
}
let john = new DogObject["John", 45];

Đối tượng + kết hợp chức năng

Bạn có thể bị nhầm lẫn bởi thực tế là

function DogObject[name, age] {
    this.name = name;
    this.age = age;
}
DogObject.prototype.speak = function[] {
    return "I am a dog";
}
let john = new DogObject["John", 45];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

Khi các chức năng được khai báo, theo mặc định, chúng được cung cấp rất nhiều thuộc tính được đính kèm với nó. Hãy nhớ rằng các chức năng cũng là đối tượng trong các loại dữ liệu JavaScript.

Bây giờ, lớp học

JavaScript đã giới thiệu từ khóa

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

Ví dụ sau đây là cách sử dụng chung của

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

Đây là kết quả trong bảng điều khiển:

console.log[names];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

console.log[names];

Từ đó, chúng ta có thể thấy rằng hàm tạo xác định các tính năng chính trong khi mọi thứ bên ngoài hàm tạo [

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

Trong nền, sử dụng cách tiếp cận từ khóa

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function Animals[name, specie] {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function[]{
    return `${this.name} can sing`;
}
Animals.prototype.dance = function[] {
    return `${this.name} can dance`;
}
let Bingo = new Animals["Bingo", "Hairy"];

Lớp con

Đây là một tính năng trong OOP nơi một lớp kế thừa các tính năng từ lớp cha nhưng sở hữu các tính năng bổ sung mà cha mẹ không.

Ý tưởng ở đây là, ví dụ, nói rằng bạn muốn tạo một lớp mèo. Thay vì tạo ra lớp từ đầu - nêu rõ tài sản, tuổi và loài một lần nữa, bạn sẽ thừa hưởng các thuộc tính đó từ lớp động vật cha mẹ.

Lớp mèo này sau đó có thể có các thuộc tính bổ sung như màu của râu ria.

Hãy xem các lớp con được thực hiện như thế nào với

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

Ở đây, chúng ta cần một phụ huynh mà lớp con được thừa hưởng. Kiểm tra mã sau:

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

Với những điều trên, chúng tôi nhận được các đầu ra sau:

console.log[clara.sing[]];
console.log[clara.whiskers[]];
// Expected Output
// "Clara can sing"
// "I have indigo whiskers"

Khi bạn đăng nhập nội dung của Clara trong bảng điều khiển, chúng tôi có:

Bạn sẽ nhận thấy rằng

function Animals[name, specie] {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function[]{
    return `${this.name} can sing`;
}
Animals.prototype.dance = function[] {
    return `${this.name} can dance`;
}
let Bingo = new Animals["Bingo", "Hairy"];

console.log[names];

function Animals[name, specie] {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function[]{
    return `${this.name} can sing`;
}
Animals.prototype.dance = function[] {
    return `${this.name} can dance`;
}
let Bingo = new Animals["Bingo", "Hairy"];

function Animals[name, specie] {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function[]{
    return `${this.name} can sing`;
}
Animals.prototype.dance = function[] {
    return `${this.name} can dance`;
}
let Bingo = new Animals["Bingo", "Hairy"];

console.log[names];

console.log[names];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

Sử dụng phương pháp phương pháp

function DogObject[name, age] {
    let dog = Object.create[constructorObject];
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function[]{
        return "I am a dog"
    }
}
let bingo = DogObject["Bingo", 54];
console.log[bingo];

function Animals[name, age] {
    let newAnimal = Object.create[animalConstructor];
    newAnimal.name = name;
    newAnimal.age = age;
    return newAnimal;
}
let animalConstructor = {
    sing: function[] {
        return `${this.name} can sing`;
    },
    dance: function[] {
        return `${this.name} can dance`;
    }
}
function Cats[name, age, whiskerColor] {
    let newCat = Animals[name, age];
    Object.setPrototypeOf[newCat, catConstructor];
    newCat.whiskerColor = whiskerColor;
    return newCat;
}
let catConstructor = {
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
Object.setPrototypeOf[catConstructor, animalConstructor];
const clara = Cats["Clara", 33, "purple"];
clara.sing[];
clara.whiskers[];
// Expected Output
// "Clara can sing"
// "I have purple whiskers"

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

Từ trên, hàm

class Animals {
    constructor[name, specie] {
        this.name = name;
        this.specie = specie;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals["Bingo", "Hairy"];
console.log[bingo];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

function Animals[name, specie] {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function[]{
    return `${this.name} can sing`;
}
Animals.prototype.dance = function[] {
    return `${this.name} can dance`;
}
let Bingo = new Animals["Bingo", "Hairy"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

Do đó, các động vật bình thường chỉ có quyền truy cập vào

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

class Animals {
    constructor[name, age] {
        this.name = name;
        this.age = age;
    }
    sing[] {
        return `${this.name} can sing`;
    }
    dance[] {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor[name, age, whiskerColor] {
        super[name, age];
        this.whiskerColor = whiskerColor;
    }
    whiskers[] {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats["Clara", 33, "indigo"];

Gói lên

JavaScript tận dụng bản chất nguyên mẫu của nó để chào đón các nhà phát triển OOP vào hệ sinh thái của nó. Nó cũng cung cấp các cách dễ dàng để tạo các nguyên mẫu và tổ chức dữ liệu liên quan.

Ngôn ngữ OOP thực sự không thực hiện tạo mẫu trong nền - chỉ cần lưu ý điều đó.

Một lời cảm ơn lớn đến khóa học của Will Sentance trên Frontend Masters - JavaScript: Phần cứng của JavaScript hướng đối tượng. Tôi đã học được tất cả mọi thứ bạn thấy trong bài viết này [cộng với một nghiên cứu thêm một chút] từ khóa học của anh ấy. Bạn nên kiểm tra xem nó ra.

Bạn có thể đánh tôi trên Twitter tại Iamdillion cho bất kỳ câu hỏi hoặc đóng góp nào.

Cảm ơn vì đã đọc : ]

Tài nguyên hữu ích

• JavaScript hướng đối tượng cho người mới bắt đầu
• Giới thiệu về lập trình hướng đối tượng trong JavaScript