1.class简单应用
//传统对象 - function
function Course(teacher,course){
this.teacher=teacher;
this.course=course;
}
Course.prototype.getCourse=function(){
return `teacher is ${this.teacher},course:${this.course}`
}
const course=new Course('aa','ES6');
course.getCourse()
//Es6
class Course{
constructor(teacher,course){
this.teacher=teacher;
this.course=course;
}
//拓展方法
getCourse(){
return `teacher is: ${this.teacher},course is ${this.course}`
}
}
const course =new Course('aa','ES6');
course.getCourse()
2.class的类型
console.log(typeOf course) //function
3.class的prototype
// 有区分,但本质类型相同
function Course(teacher, course) {
this.teacher = teacher;
this.course = course;
}
class Course1 {
// init 实例会默认执行
constructor(teacher, course) {
this.teacher = teacher;
this.course = course;
}
// 拓展方法
getCourse() {
return `teacher is:${this.teacher}, course: ${this.course}`;
}
}
4.class & 函数对象 属性
console.log(course.hasOwnProperty('teacher')); // true
5.属性定义 构造器 & 顶层定义 两种定义方式
class Course {
// init 实例会默认执行
constructor(teacher,course){
this.teacher=teacher;
this.course=course;
}
//拓展方法
getCourse(){
return `teacher is : ${this.teacher},course is : $ {this.course}`
}
get teacher(){
//留有空间
return this.teacher
}
set teacher(val){
//留有空间
this.teacher=val
}
}
//意义何在?
//1. js如何建立只读变量
class Course{
//init 实例会默认执行
constructor(teacher,course){
this._teacher=teacher;
this.course=course;
}
//拓展方法
getCourse(){
return `teacher is :${this.teacher},course is :${this.course}`
}
get teacher(){
//留有空间
return this._teacher
}
}
//修改只读变量,会报错么 - 无法改变但是不会报错
2.如何建立一个私有属性
class Course{
constructor(){
this._teacher=teacher;
//在constrctor作用域内定义一个局部变量
let _course = 'es6';
//内部通过闭包的形式去暴露该变量
this.getCourse=()=>{
return this._course;
}
}
}
class Course{
#course = 'es6';
constructor(teacher,course){
this._teacher = teacher;
}
get course(){
return this.#course;
}
set course(val){
if(val){
this.#course = val
}
}
}
//3.封装核心 - 适配器模式
// 底层封装中台业务 core
class utils{
constructor(core){
this._main=core;
this._name='my-utils';
this._id='123'
}
//fullName:{firstName:" ",lastName:'',name:''}
get name(){
return {
...this._main.fullName,
...{
name: `utils is ${this.name}`
}
}
}
get id(){
return{
...this._main.id,
id:this._id
}
}
set name(val){
//valid saftey
this._name=val;
}
}
6.静态方法 - 直接挂载在类上的方法无需实例化获取(static)
//es5实现
function Course(){
// ...
}
Course.ring=function(){
//...
}
//es6实现
class Course{
constructor(){
//...
}
static ring(){
//...
}
}
Course.ring();
//同一个class 多个实例,用于全局对象变量问题
7.继承
function Course(){
//...
}
//不用实例化可以调用 Course.ring()
Course.ring = function(){
//...
}
//实例化后才可以调用
Course.prototype.send=function(){
//...
}
function Child(){
Course.call(this,'aa','es6')
this..run=function(){
//...}
}
Child.prototype=Course.prototype;
//es6
class Course {
constructor(){
//...
}
static ring(){}
send(){}
}
// => 工厂模式
class Child extends Course{
constructor(){
super('aa',es6) //相当于Course.call(this,'aa','es6')
}
run(){}
}