JavaScript原型和三种常用的继承方式

原型prototype

        创建实例时解析器会向这个函数中添加一个原型对象属性（prototype），其相当于一个公共区域，当前实例都可以访问这个原型对象

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.sayName = function () {
    console.log(this.name)
}
Person.prototype.xxx ='这是一个属性'
let p1 = new Person('张三',20,'男');
let p2 = new Person('李四',20,'男');

console.log(p1)
console.log(p2)
//如果函数作为普通的函数调用，那么prototype没有任何作用，当前函数以构造函数的方式调用时，它所创建的对象会隐含一个属性__proto__（隐式原型）
//当我们访问一个对象的属性或者方法时，会先在自身寻找（比如访问p1 对象的name属性）如果找不到则去原型对象中寻找，找到了直接使用
console.log(p2.xxx);
//hasOwnProperty 判断这个属性是否是 p2特有的
console.log(p2.hasOwnProperty('xxx'))  //false
//__proto__.hasOwnProperty('xxx') 判断这个属性是否共有的
console.log(p2.__proto__.hasOwnProperty('xxx'))  //true

 继承方式1：原型链继承

// 定义父类构造函数
    function Father() {
        this.f1 = '这是父类';
    }
    //给父类的原型添加方法
    Father.prototype.fshow = function () {
        console.log('Father:',this.f1);
    }
    //定义子类的构造函数
    function Son() {
        this.s1 = '这是子类';
    }
    // 将子类的原型 指向父类实例
    Son.prototype = new Father();
    //在子类的上添加 方法
    Son.prototype.sshow = function () {
        console.log('Son:',this.s1)
    }
    //将设置子类的原型构造函数为子类本身
    Son.prototype.constructor = Son;
    //创建子类实例 完成继承
    var son = new Son();
    //调用父类方法
    son.fshow();
    //调用子类的方法
    son.sshow();
    console.log(son.toString());
    console.log(Son.prototype.constructor)
//1.原型链继承多个实例的引用类型属性指向相同一个实例被修改了原型属性，另一个实例的原型属性也会被影响
//2.不能传递参数
//3.继承单一

继承方式2：构造继承

//创建父类构造
    function Father(name) {
        this.name = name;
        this.showFname = function (){
            console.log('Fatherg:',this.show);
        }
    }
    //创建子类构造
    function Son(name,age) {
        Father.call(this,name);
        this.age = age;
    }
    //给子类原型 定义方法
    Song.prototype.showSon = function () {
        console.log('Son:',this.name,this.age);
    }

    let zs = new Son('张三',20);
    zs.showFname();
    zs.showSon();
    console.log(zs);

继承方式3：组合继承

function FFF(name,age) {
        this.name = name;
        this.age = age;
    }
    FFF.prototype.setName = function (name) {
        this.name = name;
    }

    function SSS(name,age,sex) {
        //------------构造继承-----
        FFF.call(this,name,age);
        this.sex = sex;
    }
    // 原型链继承
    SSS.prototype = new FFF();
    SSS.prototype.constructor = SSS;

    SSS.prototype.setSex = function (sex) {
        this.sex = sex;
    }

    let sss = new SSS('李四',22,'男');
    console.log(sss);
    sss.setName('王五');
    sss.setSex('女');
    console.log(sss);