JavaScript中面向对象编程方式

JavaScript语法比较灵活，并没有严格规定的面向编程的方式。在JavaScript中支持多种实现面向对象编程方式。

Object Literals

// 标准的 JS对象
const book1 = {
    title: 'Book One',
    author: 'John Doe',
    year: '2013',
    getSummary: function () {
        return `${this.title} was writter by ${this.author} in ${this.year}`;
    }
};

console.log(book1.getSummary())
// Book One was writter by John Doe in 2013

console.log(Object.values(book1))
// ['Book One', 'John Doe', '2013', fn]

console.log(Object.keys(book1))
// ['title', 'author', 'year', 'getSummary']

Constructors & This

// Constructor
function Book (title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;  
    this.getSummery = function () {
        return `${this.title} was writter by ${this.author} in ${this.year}`; 
    }
}

const book1 = new Book('Book one', 'John Doe', '2013');
const book2 = new Book('Book two', 'John Doe', '2016');

console.log(book1);
// Book{title:'Book one', author: 'John Doe', getSummary: f (), year: '2013}

Prototypes

// Constructor
function Book (title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;  
}
// getSummary
Book.prototype.getSummary = function () {
   return `${this.title} was writter by ${this.author} in ${this.year}`;
}

// getAge
Book.prototype.getAge = function () {
    let years = new Date.getFullYear() - this.year;
    return `${this.title} is ${year} years old`;
}

// Revise / Change year
Book.prototype.revise = function (newYear) {
    this.year = newYear;
    this.revised = true
}

const book1 = new Book('Book one', 'John Doe', '2013');

console.log(book.getSummary());
// Book one was writter by John Doe in 2013

book1.revise('2018')

console.log(book1);
// Book{title:'Book one', author: 'John Doe', year: '2013', revised: true}

Inheritance

// Constructor
function Book (title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;  
}
// getSummary
Book.prototype.getSummary = function () {
   return `${this.title} was writter by ${this.author} in ${this.year}`;
}

// Magazine Constructor
function Magazine(title, author, year, month) {
    Book.call(this, title, author, year);
    this.month = month;
}

// Inherit Prototype
Magazine.prototype = Object.create(Book.prototype);

// Use Magazine Constructor
Magazine.prototype.constructor = Magazine;

const mg1 = new Magazine('Mag One', 'John Doe', '2018', 'Jan');

console.log(mg1);
// Magazine{title: 'Mag One', author: 'John Doe', year: '2018', month: 'Jan', __protp__: Book}

console.log(mg1.getSummary())
// Mag one was writter by John Doe in 2013

Object.create()

// Object Of Protos
const bookProtos = {
    getSummary: function () {
        return `${this.title} was writter by ${this.author} in ${this.year}`;
    },
    getAge: function () {
        let years = new Date.getFullYear() - this.year;
    	return `${this.title} is ${year} years old`; 
    }
};

// const book1 = Object.create(bookProtos);
// book1.title = 'Book One';
// book1.author = 'John Doe';
// book1.year = '2013';
// console.log(book1);
//  {title: 'Book One', author: 'John Doe', year: '2013', __proto__: Object }

const book2 = Object.create(bookProtos, {
    title: {value: 'Book Two'},
    autho: {value: 'John Doe'},
    year: {value: '2016 '}
});

Classes

// Class
class Book {
    constructor (title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year;
    }
    
    getSummary() {
       return `${this.title} was writter by ${this.author} in ${this.year}`; 
    }
    
    getAge() {
        let years = new Date.getFullYear() - this.year;
    	return `${this.title} is ${year} years old`;       
    }
    
    revise(newYear) {
    	this.year = newYear;
    	 this.revised = true	
    }
    
    static topBookStore() {
		return 'Barnes & Noble';
    }
}

const book1 = new Book('Book One', 'Johe Doe', '2013');
console.log(book1)
//  {title: 'Book One', author: 'John Doe', year: '2013', __proto__: Object }

console.log(Book.topBookStore())
// 'Barnes & Noble';

SubClasses

// Class
class Book {
    constructor (title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year;
    }
    
    getSummary() {
       return `${this.title} was writter by ${this.author} in ${this.year}`; 
    }    
}

// Magazine SubClass
class Magazine extends Book() {
    constructor(title, author, year, month) {
        super(title, author,year);
        this.month = month;
    }
}
// Instantiate Magazine
const mg1 = new Magazine('Mag One', 'John Doe', '2018', 'Jan'); 

console.log(mg1);
// Magazine{title: 'Mag One', author: 'John Doe', year: '2018', month: 'Jan', __protp__: Book}

console.log(mg1.getSummary());
// Mag one was writter by John Doe in 2018