JS类的继承/使用原型优化对象

类的继承

在面向对象编程中,类是某一些具有相同特性的对象的集合,例如,猫,狗,鱼都可以抽象为动物,手机,电脑可以抽象为电子产品

根据某个类所实例化的个体叫做这个类的对象(类实例化后就是对象,类是模板,对象是产品)

如果A类是B类的子类,那么在设置这两个类的构造函数时,可以选择让A继承于B,例如

function Animal(age,color,weight){
        this.age = age;
        this.color = color;
        this.weight = weight;
    }

    function Dog(age,color,weight,tail,eye){
        this.age = age;
        this.color = color;
        this.weight = weight;
        this.tail = tail;
        this.eye = eye;
    }

这里Animal类有的属性[方法]Dog都有,且Dog还有自己特有的属性[方法],这时候这么写很繁琐,那么可以

function Animal(age,color,weight){
        this.age = age;
        this.color = color;
        this.weight = weight;

        this.breathe = function(){
            console.log("进行呼吸");
        }
    }

// 子类可以在父类的基础上扩展新的属性和方法
    function Dog(age,color,weight,tail,eye){
        // 子类继承父类,需要在子类的构造函数中调用父类构造函数
        // 但是不能直接调用,因为直接调用时父类的构造函数中this是全局对象
        // Animal(age,color,weight);
        
        // 子类调用父类构造函数时,需要指定函数执行时的this是当前函数中的this
        // 通过call或apply指定this为当前函数中的this
        Animal.call(this,age,color,weight); 
        this.tail = tail;
        this.eye = eye;
    }

改变this指向可以看上一篇博客

创建Dog的实例:

var d1 = new Dog(3,"yellow",10,"长","蓝")
    // console.log(d1)
    d1.breathe();

子类可以再作为父类被其他类继承

 function Husky(age,color,weight,tail,eye){
        Dog.apply(this,arguments);
        this.sha = function(){
            console.log("傻狗");
        }
    }

var h1 = new Husky(3,"yellow",10,"长","蓝");
    h1.sha();

使用原型优化对象

属于同一类的多个对象,各自有各自的属性值,但是方法是相同的,比如上面的Animal函数,所有"动物"继承它都会创建一个"呼吸"方法,也就是说每一个"动物"都有一个相同的方法

如果在构造函数中为创建的对象添加方法,那么这个方法是附加在对象上的,创建多个对象时,这些对象内部都会存储着一个相同的函数,而这是没有必要的,因为同一类的对象,方法是相同的,所以只需要把这些方法存在一个公共的位置,这个类的对象都使用这个公共位置的方法即可

重新写一个例子:

function People(name,age){
        this.name = name;
        this.age = age;
    }

 构造函数对象有一个属性叫做prototype,表示构造函数的原型对象,通过这个构造函数创建出的对象原型(__proto__)都是这个prototype对象(有点绕,多读多理解),所以为某个类的对象添加方法时,需要添加在它的构造函数的prototype上,这样可以实现方法的共用

People.prototype.speak = function(){
        console.log("my name is "+this.name);
    }

创建People的实例:

var p1 = new People("sunset",20);

在js中,所有对象都会有一个属性,叫做proto(原型),原型也是一个对象(可以  console.log(p1.__proto__);  查看)

当访问的对象的属性或方法时,会先从对象本身中寻找这个属性或方法,如果存在则直接使用;如果不存在则会在对象的对象的原型中寻找这个属性或方法,如果存在则使用

p1.speak();
    console.log(p1)