原型链是实现继承的主要方法。基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
}
function SubType() {
this.subproperty = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue()); // true
alert(instance instanceof Object); // true
alert(instance instanceof SuperType); // true
alert(instance instanceof SubType); // true
alert(Object.prototype.isPrototypeOf(instance)); // true
alert(SuperType.prototype.isPrototypeOf(instance)); // true
alert(SubType.prototype.isPrototypeOf(instance)); // true
实现的本质是重写原型对象,代之以一个新类型的实例。给原型添加方法的代码一定要放在替换原型的语句之后,在通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这样就会重写原型链。
通过原型来实现继承时,原型实际上会变成另一个类型的实例,实例会恭喜。而且在创建子类型的时候,不能向超类型的构造函数传递参数。
使用使用一种叫做借用构造函数的技术,解决了原型中包含引用类型值所带来问题。
function SuperType(name) {
this.colors = ["red", "green", "blue"];
this.name = name;
}
function SubType() {
// 继承了SuperTyle, 同时还传递了参数
SuperType.call(this, "Miles");
this.age = 24;
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // "red,green,blue,black"
alert(instance1.name); // "Miles"
alert(instance1.age); // 24
var instance2 = new SubType();
alert(instance2.colors); // "red,green,blue"
借用构造函数的方法都在构造函数中定义,因此函数的复用的问题没法解决。
组合继承,指的是讲原型链和借用构造函数的技术组合到一起,使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。
function SuperType(name) {
this.colors = ["red", "blue", "green"];
this.name = name;
}
SuperType.prototype.sayName = function() {
alert(this.name);
}
function SubType(name, age) {
// 继承了SuperTyle, 同时还传递了参数
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
}
var instance1 = new SubType("Miles", 24);
instance1.colors.push("black");
alert(instance1.colors); // "red,blue,green,black"
instance1.sayName(); // "Miles"
instance1.sayAge(); // 24
var instance2 = new SubType("Jenny", 24);
alert(instance2.colors); // "red,blue,green"
instance2.sayName(); // "Jenny"
instance2.sayAge(); // 24
与个人博客同步更新
分享到:
相关推荐
javascript读书笔记1:初次学习javascript的同学比较实用的材料,想要的可以下载;
自己总结的javascript的学习笔记,希望对大家有所帮助!
该份文档于2004年整理,前段时间翻阅出来看,颇有收益,方便初学者的入门学习,也可以作为索引文件进行查阅、
JavaScript学习基础知识,对你一定有帮助!!
基础篇 Javascript学习笔记1 数据类型 Javascript学习笔记2 函数 Javascript学习笔记3 作用域 Javascript学习笔记4 Eval函数 Javascript学习笔记5 类和对象 Javascript学习笔记6 prototype的提出 Javascript学习...
JAVASCRIPT从入门到精通读书笔记.pdf
NULL 博文链接:https://shaw-n-lu.iteye.com/blog/1881210
JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译;逐行执行;无需进行严格的变量声明;内置大量现成对象,编写...
读书笔记
High Performance JavaScript(高性能JavaScript)读书笔记,让你的js代码更有效率。
javascript 笔记 有助于大家去阅读,去巩固,给大家提供一定的方便。
《HTML5 CSS3 JavaScript从入门到精通微课》读书笔记模板.pptx
发布读书笔记:用户可以创建新的读书笔记,包括书名、作者、阅读时间、笔记内容等信息。查看和搜索读书笔记:用户可以查看其他同学发布的读书笔记,并可以通过关键词搜索特定的笔记。评论和点赞:用户可以对其他同学...
推荐阅读:JavaScript学习笔记之数组的增、删、改、查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于...
推荐阅读:JavaScript学习笔记之数组的增、删、改、查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和...
基于canvas(12个)、javascript(22个)、bootstrap(11个)的读书笔记(共45个demo)
合理的排版能够使内容易于阅读,提高用户对信息的理解和保留。 除了外观,网页设计还需要考虑到网站的性能和加载速度。优化图像、压缩文件、合理使用缓存等技术手段是确保网站高效运行的重要策略。这对于提高用户...
本文实例讲述了JavaScript DOM基础操作。...文本节点6 <!--文本节点adsasda--> <!--元素节点 qeqweq</span>--> </body> javascript [removed] [removed]=function(){ varoUl=doc