js面向对象

对象和类

什么是对象，对象可看做对单个物体的抽象，比如一只猫，一辆车。任何事物都可看做对象，即万物皆对象。对象可以具有属性和方法；比如猫有颜色（属性）、可以跑（方法）。 什么是类，类是对对象的抽象；将具有相同的属性及行为（方法）对象进行抽象；比如：猫和狗都有颜色（属性），及奔跑的行为（方法）。则可以将他们抽象为一个动物类。

1.构造函数

function Animal(name, color) {
    this.name = name;
    this.color = color;
    this.eat = function() { alert("吃东西"); };
}
let dog = new Animal('zs', 'black')
let cat = new Animal('ls', 'white')
dog.eat();
cat.eat();

我们创建了一个animal的类，生成dog,cat两个实例； 对于每一个实例对象，eat()方法都是一模一样的内容，每次生成，都占用一些内存，存在浪费内存的问题

2.原型

原型链：当访问对象的某个方法或者属性时，先在自己的构造函数中寻找，如果没有，就在自己的原型中寻找，如果还是没有，就找原型的原型，一直找到object的原型（null），这样形成了一条链称之为原型链

我们可以使用原型来解决上述问题

Animal.prototype.eat = function() { alert("吃东西"); };

每次创建对象，都指向同一份内存，这样可以解决上述内存浪费的问题。有个问题是原型可以被覆盖， Array.prototype.splice = function() {}

3.继承

构造函数继承

function Cat(name, color,sex) {
    Animal.apply(this, [name,color])
    this.sex = sex;
}

原型继承

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
console.log(Cat.prototype === Animal.prototype) // true

打印Cat、Animal的原型，我们发现此继承有个问题是Animal.prototype和Cat.prototype现在指向了同一个对象。显然这是不正常的。此处我们需要一个中间量进行转换。

var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

4.es6 class语法糖

class Animal{
    constructor(name,color){
        this.name = name
        this.color = color        
    }
    eat{
        alert('吃东西');
    }
}
class Cat extend Animal{
    constructor(name,color,sex){
        super(name,color)
        this.sex = sex        
    }
    //可进行重写
    //eat() {
    //   alert('吃饭');
    //}
}