js构造函数和继承

1.什么是构造函数

在JavaScript中，用new关键字来调用的函数，称为构造函数，构造函数首字母一般大写,不能用箭头写法

2.为什么使用构造函数

录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：

var p1 = { name: 'zs', age: 6, gender: '男'};
var p2 = { name: 'ls', age: 7, gender: '女'};
var p3 = { name: 'ww', age: 8, gender: '女'};
var p4 = { name: 'zl', age: 6, gender: '男'};

像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。

此时，我们就可以创建以下的函数，可以通过 new 关键字调用，也就是通过构造函数来创建对象了。

function Person(name,age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    var p1 = new Person('zs',6, '男');
    var p2 = new Person('ls',7, '女');
    console.log(p1)
    console.log(p2)

虽然封装构造函数的过程会比较麻烦，但一旦封装成功，我们再创建对象就会变得非常轻松，这也是我们为什么要使用构造函数的原因。

在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

3.构造函数执行过程

单独看Person函数不是一个构造函数，只有被new出来的时候才能算一个构造函数

1.当以new关键字调用，会创建出一个新的工作空间，标记为Person的实例
2.将空对象的原型绑定为new操作符后面的构造函数的原型
3.函数体内部的 this 指向该内存，并执行构造函数的函数体,创建相关属性和方法
4.判断执行结果是否返回了新的对象,如果有返回新对象,就是用返回的新对象,没有的话,返回原来创建的对象(obj)

4.构造函数的继承

构造函数继承有多种，最常见的继承方式 原型链 + 构造函数

function Person(name,age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    var p1 = new Person('zs',6, '男');
    var p2 = new Person('ls',7, '女');
    console.log(p1) //{name: "zs", age: 6, gender: "男"}
    console.log(p2)

    //继承
    function PersonChild(name,age,gender,hobby){
        Person.call(this,name,age,gender)
        this.hobby = hobby
    }
    PersonChild.prototype = new Person()
    var p3 = new PersonChild(1,2,3,4)
    console.log(p3) //{name: 1, age: 2, gender: 3, hobby: 4}
    console.log(p3.__proto__ === PersonChild.prototype) //true

p3.__proto__ === PersonChild.prototype 是相等的 我们还可以在他原型上再次添加属性或者方法

PersonChild.prototype.action = function(age) {
        this.age = age
    }
    var p4 = new PersonChild(1,2,3,4)
    console.log(p4.age) //2
    p4.action(10)
    console.log(p4.age) // 10

5.class

class属于es6提供写构造函数的语法糖

    //class 
    class Person1{
        //一个类只能有一个constructor方法
        constructor(name,age){
            this.name = name
            this.age = age
        }
        say(name){
            this.name = name
        }
    }

    var p5 = new Person1('ikun',22)
    p5.say('小黑子')
    console.log(p5.name) // 小黑子'

    //class 继承
    class PersonChild1 extends Person1{
        //一个类只能有一个constructor方法  使用super关键字调用父类方法 
        //super方法必须在constructor中第一行
        constructor(name,age,title){
            super(name,age)
            this.title = title
        }
    }

    var p6 = new PersonChild1(2,3,4)
    console.log(p6) //{name: 2, age: 3, title: 4}
    p6.say('哈哈哈')
    console.log(p6.name) //哈哈哈