码迷,mamicode.com
首页 > 编程语言 > 详细

javascript原型继承

时间:2018-07-13 12:13:42      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:===   lan   官方网站   var   parent   技术   cti   his   struct   

用一张图来表示新的原型链:

技术分享图片

 

封装一个inherits()函数,函数F用于桥接

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

这样inherits()函数就可以重复使用了
function Student(props) {
    this.name = props.name || ‘Unnamed‘;
}

Student.prototype.hello = function () {
    alert(‘Hello, ‘ + this.name + ‘!‘);
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 创建xiaoming:
var xiaoming = new PrimaryStudent({
    name: ‘小明‘,
    grade: 2
});
xiaoming.name; // ‘小明‘
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

 

原型继承 - 廖雪峰的官方网站 (选自 @廖雪峰)

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000

 

javascript原型继承

标签:===   lan   官方网站   var   parent   技术   cti   his   struct   

原文地址:https://www.cnblogs.com/minjh/p/9304127.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!