JavaScript面向对象实例详细讲解

1. 面向对象

// 大括号就是对象
p =
{
    a:1,
    b:2,
    c:3,
}

// 系统对象全部基于window
// console.log(window);
// window.alert(1);
// alert(2);
// console.log(navigator.appVersion);

// 对象Object
const book1 =
{
    title   : 'Book One',
    author  : 'John',
    year    : '2012',
    getSummary: function()
    {
        return `${this.title} was written by ${this.author} in ${this.year}`
    }
}
console.log('book1:',book1);
console.log('book1.title:',book1.title);
console.log('p:',p);


const book11 =
{
    title   : 'Book Two',
    author  : 'Tom',
    year    : '2016',
    getSummary: function()
    {
        // this 这个对象
        return `${this.title} was written by ${this.author} in ${this.year}`
    }
}
console.log('book11:',book11);
console.log('book11.getSummary():',book11.getSummary());
// 对象所有的值
console.log(Object.values(book11));
// 对象所有的键名
console.log(Object.keys(book11));

2. 构造函数

/**
构造函数的特点
1. 首字母必须大写
2. 内部使用this对象，来指向即将要生成的实例对象
3. 使用new来生成实例对象
**/
function Book1(title,author,year)
{
    this.title = title;
    this.author = author;
    this.year = year;
}
const book11 = new Book1('Book One','John','2012');
const book12 = new Book1('Book Two','Tom','2016');

console.log('book11.year:',book11.year);
console.log('book11:',book11);

// 构造函数2 
// 问题类中的方法通过原型prototype全部展现
function Book2(title,author,year)
{
    this.title = title;
    this.author = author;
    this.year = year;
    this.getSummary= function()
    {
        return `${this.title} was written by ${this.author} in ${this.year}`
    }
}

const book21 = new Book2('Book One','John','2012');
const book22 = new Book2('Book Two','Tom','2016');

console.log('book21.getSummary():',book21.getSummary());
console.log('book22.getSummary():',book22.getSummary());
console.log('book21:',book21);
console.log('book22:',book22);

3. 原型与原型链

/*
1. 所有的实例都会通过原型链引用到prototype
2. prototype相当于特定类型，所有实例都可以访问到一个公共容器
3. 重复的东西放到公共的容器
*/
function Book(title,author,year)
{
    this.title = title;
    this.author = author;
    this.year = year;
}
// getSummary获取摘要
Book.prototype.getSummary =function ()
{
    return `${this.title} was written by ${this.author} in ${this.year}`
}
// getAge 发行距今多长时间
Book.prototype.getAge = function ()
{
    const years = new Date().getFullYear -this.year;
    return `${this.title} is ${years} years old`;
}
// Revise修订
Book.prototype.revise = function (newYear)
{
    this.year = newYear;
    this.revised = true;
}

const book1 = new Book('Book One','John','2012');
const book2 = new Book('Book Two','Tom','2016');

console.log('book1:',book1);
console.log('book2:',book2);
console.log('book1.getSummary():',book1.getSummary());
console.log('book2.getAge():',book2.getAge());

// getSummary存在于原型中，而不存在对象本身
// 生成的实例不一定需要getSummary，而title属性就需要每个都有

const book3 = new Book('Book Two','Tom','2019');
book3.revise('2022')
console.log('book3:',book3);

4. 继承

// 继承
function Book(title,author,year)
{
    this.title = title;
    this.author = author;
    this.year = year;
};
// getSummary获取摘要
Book.prototype.getSummary =function ()
{
    return `${this.title} was written by ${this.author} in ${this.year}`
}
// 杂志构造函数
function Magazine(title,author,year,month)
{
    Book.call(this,title,author,year);
    this.month = month;
}
// inherit prototype 继承原型
Magazine.prototype = Object.create(Book.prototype);

//  实例化杂志对象
const mag1 = new Magazine('Mag One','Tom','2022','Jan')

// 使用Magazine构造器
Magazine.prototype.constructor = Magazine;

console.log('mag1:',mag1);
console.log('mag1.getSummary():',mag1.getSummary());

• 不使用Magazine构造器

  

• 使用Magazine构造器

  

5. 对象的创建

// 创建对象的多种方法
//  object of protos
const bookProtos =
{
    getSummary: function()
    {
        return `${this.title} was written by ${this.author} in ${this.year}`
    },
    getAge:function()
    {
        const years = new Date().getFullYear -this.year;
        return `${this.title} is ${years} years old`;
    }
};

// Create Object
// 方法1(推荐)
const book1 = Object.create(bookProtos);
book1.title='Book One';
book1.author='Tom';
book1.year='2012';

console.log('book1:',book1);

// 方法二
const book2 = Object.create
(bookProtos,
    {
        title   :{value : 'Book One'},
        author  :{value : 'Tom'},
        year    :{value : '2012'}
    }

);

console.log('book2:',book2);

6. 类

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

// Instantiate Object 实例化对象
const book1 = new Book('Book One','Tom','2012')

console.log(book1);
book1.revise('2020');
console.log(book1);

// static 方法
console.log(Book.topBookStore());

7. 子类

// 子类
class Book
{
    constructor(title,author,year)
    {
        this.title=title;
        this.author=author;
        this.year=year;
    }
    getSummary()
    {
        return `${this.title} was written 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 mag1 = new Magazine('Mag One','Tom','2022','Jan');
console.log('mag1:',mag1);
console.log(mag1.getSummary());

好了， 以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！