JavaScript 原型继承
程序员文章站
2022-06-15 14:56:12
...
function Student (name) {
this.name = name;
this.hell = function () {
alert('Hello, ' + this.name + '~');
}
}
// PrimaryStudent构造函数:
function PrimaryStudent (props) {
Student.call(this, props);
this.grade = props.name || 1;
}
// 空函数
// 注意,函数F仅用于桥接,我们仅创建了一个new F()实例,
// 而且,没有改变原有的Student定义的原型链。
function F(){};
// 把F的原型指向Student.prototype;
F.prototype = Student.prototype;
// 把PrimaryStudent的原型指向一个新的F对象,F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();
// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent
// 继续在PrimaryStudent原型(就是new F()对象)上定义方法:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
};
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
// 把继承这个动作用一个inherits()函数封装起来,还可以隐藏F的定义,并简化代码:
function inherits(Child, Parent) {
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
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;
};
上一篇: Smarty3:自定义变量调解器插件
推荐阅读
-
关于树形菜单 Checkbox的全选_javascript技巧
-
一些老手都不一定知道的JavaScript技巧_javascript技巧
-
让iframe子窗体取父窗体地址栏参数(querystring)_javascript技巧
-
基于STM32F4的可穿戴式智能手表原型设计
-
JavaScript弹出窗口方法汇总_javascript技巧
-
JS实现点击图片在当前页面放大并可关闭的漂亮效果_javascript技巧
-
js弹出模式对话框,并接收回传值的方法_javascript技巧
-
javascript - 请求延时过高,求分析
-
javascript - 手机腾讯网的文章详情页返回列表页是如何实现的?
-
用javascript来实现动画导航效果的代码_javascript技巧