原生js面向对象实现和es6

// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || ‘Animal’;
// 实例方法
this.sleep = function(){
console.log(this.name + ‘正在睡觉!’);
}
}
// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + ‘正在吃:’ + food);
};

var animal = new Animal(“毛驴”);
animal.sleep()//毛驴正在睡觉!
animal.eat(“萝卜”)//毛驴正在吃:萝卜

构造继承
function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
cat.eat(“cao”)//cat.eat is not a function 只能继承父类的实例属性和方法,不能继承原型属性/方法
cat.sleep();//Tom正在睡觉!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

//另外一种比较完美的继承
function Cat(name){
Animal.call(this);
this.name = name || ‘Tom’;
}
Cat.prototype.constructor = Cat;
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();

es6

//定义类
class Student {
  //构造方法
  constructor(name, age, subject) {
    this.name = name;
    this.age = age;
    this.subject = subject;
  }

  //类中的方法
  study(){
    console.log('我在学习' + this.subject);
  }
}

//实例化类
let student3 = new Student('阿辉', 24, '前端开发');
student3.study(); //我在学习前端开发
//子类
class Pupil extends Student{
  constructor(name, age, subject, school) {
    //调用父类的constructor
    super(name, age, subject); 
    this.school = school;
  }
}

let pupil = new Pupil('小辉', 8, '小学义务教育课程', '北大附小');
pupil.study(); //我在学习小学义务教育课程

你可能感兴趣的:(原生js面向对象实现和es6)