原型继承

function Student(name) {
        this.name = name;
        this.hello = function () {
            alert('Hello, ' + this.name + '!');
        }
    }
   // PrimaryStudent构造函数:
    function PrimaryStudent(props) {
        Student.call(this, props);
        this.grade = props.grade || 1;
    }

    // 空函数F:
    function F() {
    }

    // 把F的原型指向Student.prototype:
    // “构造函数F”和“构造函数Student”的prototype指向一个原型对象
    F.prototype = Student.prototype;

    把PrimaryStudent的原型指向一个F构造函数实例化的对象:
    由于构造函数F的prototype指向了Stduent.prototype【构造函数Student的prototype属性】所以由“构造函数F”构造的所有实例共享“构造函数Student”的原型属性
PrimaryStudent.prototype = new F();
    构造函数PrimaryStudent的原型现在是构造函数F()的一个实例,共享F()构造函数的原型对象,而F构造函数的原型与Student共享一个原型,所以构造函数PrimaryStudent构造的实例可以访问Student的原型的所有属性,构成了原型继承

在这里插入图片描述

    // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
    console.log(PrimaryStudent.prototype.constructor)//原本指向Student
    PrimaryStudent.prototype.constructor = PrimaryStudent;
    console.log(PrimaryStudent.prototype.constructor)

    // 继续在PrimaryStudent原型(就是new F()对象)上定义方法:
    PrimaryStudent.prototype.getGrade = function () {
        return this.grade;
    };

在这里插入图片描述

    // 创建xiaoming:
    //构造一个实例xiaoming,xiaoming共享“构造函数PrimaryStudent”的原型F()
    【PrimaryStudent.prototype = new F();】∵xiaoming是构造函数PrimaryStudent构造出来
    PrimaryStudent.prototype是一个对象包含“构造函数PrimaryStudent”构造的所有实例共享的属性
    和方法。
    而PrimaryStudent.prototype是一个对象,这个对象由“构造函数 F()”构造,所以这个对象共享构造函数
    的prototype属性,而构造函数F()的prototype和Student的prototype一样。
    var xiaoming = new PrimaryStudent({
        name: '小明',
        grade: 2
    });
   /
    xiaoming.name; // '小明'
    console.log(xiaoming.name)
    xiaoming.grade; // 2
    console.log(xiaoming.grade)

    // 验证原型:
    xiaoming.__proto__ === PrimaryStudent.prototype; // true
    console.log(xiaoming.__proto__ === PrimaryStudent.prototype)
    xiaoming.__proto__.__proto__ === Student.prototype; // true
    console.log(xiaoming.__proto__.__proto__ === Student.prototype)

    // 验证继承关系:
    xiaoming instanceof PrimaryStudent; // true
    console.log(xiaoming instanceof PrimaryStudent)
    xiaoming instanceof Student; // true
    console.log(xiaoming instanceof Student)

猜你喜欢

转载自blog.csdn.net/weixin_42519137/article/details/84675262