JS Obejcted Oriented ES5&ES6 + Babel

最新推荐文章于 2021-10-11 16:16:08 发布

原创最新推荐文章于 2021-10-11 16:16:08 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文深入探讨JavaScript中对象原型的运用及类的继承方式，包括ES5与ES6的不同实现方法，展示了如何通过原型链实现属性和方法的共享，以及如何创建子类并继承父类的特性。

向object类中添加属性

所有的该类对象都会继承Prototype的属性；

//Object.prototype
//Person.prototype 

//Person constructor
function Person(firstName, lastName, dob){
  this.firstName=firstName;
  this.lastName=lastName;
  this.birthday=new Date(dob);
  // this.calculateAge = function(){
  //   const diff = Date.noew() - this.birthday.getTime();
  //   const ageDate = new Date(diff);
  //   return Math.abs(ageDate.getUTCFullYear()-1970);
  // }
}

//Calculate age
Person.prototype.calculateAge = function(){
  const diff = Date.now() - this.birthday.getTime();
  const ageDate = new Date(diff);
  return Math.abs(ageDate.getUTCFullYear()-1970);
}

//Get full name
Person.prototype.getFullName = function(){
  return `${this.firstName} ${this.lastName}`;
}


//Gets Married
Person.prototype.getsMarried = function(newLastName){
  this.lastName=newLastName;
}



const john = new Person('John','Doe','8-12-90');
const mary = new Person('Mary','Johnson','March 20 1978');

console.log(mary);
console.log(john.calculateAge());
console.log(mary.getFullName());


mary.getsMarried(`Smith`);

console.log(mary.getFullName());

console.log(mary.hasOwnProperty('firstName')); //True
console.log(mary.hasOwnProperty('getFullName'));  //False

Prototypal Inheritance ES5

https://blog.youkuaiyun.com/major_zhang/article/details/81118387

//Person constructor
function Person(firstName,lastName){
  this.firstName=firstName;
  this.lastName=lastName;
}

//Greeting
Person.prototype.greeting = function(){
  return `Hello there ${this.firstName} ${this.lastName}`;
}

const person1=new Person('John','Doe');


console.log(person1);
console.log(person1.greeting());


//Custormer constructor  //类继承
function Customer(firstName,lastName,phone,member){
  Person.call(this, firstName,lastName); //call 得到另外的类
            //this + 两个参数
  this.phone = phone;
  this.member=member;
}

//Inherit the Person prototype methods
Customer.prototype = Object.create(Person.prototype);
//继承了person的prototype

//Make customer.prototype return Customer()
Customer.prototype.constructor = Customer;

//Create customer
const customer1 = new Customer('Tom','Smith','555-555-5555','Standard');

console.log(customer1);

//Customer greeting
Customer.prototype.greeting = function(){  
  return `Hello there ${this.firstName} ${this.lastName} welcome to our company`;
}  


console.log(customer1.greeting());

Using object.create()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

const personPrototypes = {
  greeting:function(){
    return `Hello there ${this.firstName} ${this.lastName}`;
  },
  getsMarried:function(newLastName){
    this.lastName=newLastName;
  }
}

const mary = Object.create(personPrototypes);
mary.firstName = 'Mary';
mary.lastName = 'Williams';
mary.age  = 30;
console.log(mary);

mary.getsMarried('Thompson');

console.log(mary.greeting());

const brad= Object.create(personPrototypes,{
  firstName:{value:'Brad'},
  lastName:{value:'Traversy'},
  age:{value:36}
});

console.log(brad);
console.log(brad.greeting());

Syntax sugar——ES6

static定义的methods，用class.调用；

class Person{
  constructor(firstName,lastName,dob){  //初始化的变量
    this.firstName=firstName;
    this.lastName=lastName;
    this.birthday=new Date(dob);
  }

  greeting(){   //后续的函数放在prototype
    return `Hello there ${this.firstName} ${this.lastName}`;
  }

  calculateAge(){
    const diff = Date.now()-this.birthday.getTime();
    const ageDate = new Date(diff);
    return Math.abs(ageDate.getUTCFullYear()-1970);
  }

  getsMarried(newLastName){
    this.lastName=newLastName;
  }

  //用类变量调用static  Person.static
  static addNumbers(x,y){
    return x+y;
  }
}

const mary = new Person('Mary','Williams','11-13-1980');


console.log(mary);
console.log(mary.greeting());

console.log(mary.calculateAge());
mary.getsMarried('Jack');
console.log(mary);

console.log(Person.addNumbers(1,2));

subclass+extends

class Person{
  constructor(firstName,lastName){
    this.firstName=firstName;
    this.lastName=lastName;
  }


  greeting(){
    return `hello there ${this.firstName} ${this.lastName}`;
  }
}

//subclass
class Customer extends Person{
  constructor(firstName,lastName,phone,membership) {
    //call Person的constructor
    super(firstName,lastName); //继承前两个
    this.phone = phone;
    this.membership=membership;
  }
  static getMembershipCost(){
    return 500;
  }
}

const john=new Customer('john','doe','555-555-5555','Standard');
console.log(john);
//直接调用函数
console.log(john.greeting());
console.log(Customer.getMembershipCost());

注意点
extends后的class的contructor中，需要使用super()；

Es6 Babel

省略constructor和super（）；
定义时无需this，调用时加上this，可防止this改变引起的错误；

class human{

  gender='male';
 
  
  printGender=()=>{
    console.log(this.gender);
  }
}


//extends时需要在constructor中add super method

class Person extends human{


   name ="max"; 
   gender="female";
  
  
  printMyName=()=>{
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();