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());