<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classInherit</title>
<script type="text/javascript">
//声明父类
function superClass(){
this.name = 'Lucy';
}
superClass.prototype.getName = function(){
console.log(this.name);
}
//声明子类
function subClass(){
this.subname = 'Lilei';
this.books = ['html','css','js'];
}
//类式继承
subClass.prototype = new superClass();
//注：一定要先继承，再添加子类原型方法，否则子类的实例调用子类原型方法时会报错：function is not defined
subClass.prototype.getSubName = function(){
console.log(this.subname);
}
//将子类的prototype原型constructor属性的指向修正为subClass子类，否则继承后默认指向了父类的原型上，会出问题
subClass.prototype.constructor = subClass;
//实例化对象测试
var test1 = new subClass();
var test2 = new subClass();
console.log(test1.name); //Lucy
console.log(test1.subname); //Lilei
test1.getName(); //Lucy
test1.getSubName(); //Lilei
// console.log(test1.books);
test1.books.push('php');
console.log(test1.books); //输出：["html", "css", "js", "php"]
console.log(test2.books); //输出：["html", "css", "js"]
// 两个实例之间不会影响
//本例已经通过验证
</script>
</head>
<body>
</body>
</html>
js原生继承之——类式继承实例(推荐使用)的更多相关文章
-
js原生设计模式——2面向对象编程之继承—new类式继承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
-
JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
-
JavaScript中的类式继承和原型式继承
最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...
-
js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
-
精读JavaScript模式(八)，JS类式继承
一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...
-
JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...
-
js类式继承模式学习心得
最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...
-
js面向对象--类式继承
//待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...
-
JS原型继承与类的继承
我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
-
Java 理论与实践: 正确使用 Volatile 变量--转
原文地址:http://www.ibm.com/developerworks/cn/java/j-jtp06197.html Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 ...
-
SQL基础--序列
序列是一种数据库对象,用来自动产生一组唯一的序号:序列是一种共享式的对象,多个用户可以共同使用序列中的序号. 序列的创建语法 CREATE SEQUENCE sequencename [INCREME ...
-
Java多线程系列--“JUC集合”07之 ArrayBlockingQueue
概要 本章对Java.util.concurrent包中的ArrayBlockingQueue类进行详细的介绍.内容包括:ArrayBlockingQueue介绍ArrayBlockingQueue原 ...
-
关于new/delete、malloc/free的内存泄漏检测
情况一 new/delete 内存泄漏 1.在MFC中可以每一个cpp文件的头部添加以下一段宏来检测new申请而没用free释放的内存泄漏 #ifdef _DEBUG #define new DEBU ...
-
夺命雷公狗---TP商城----TP之样式和特效以及图片引入---2
---恢复内容开始--- 刚才见到笑脸了,那么下一步就到我们的shop目录下创建一个Admin的目录了,然后将Home目录里面的东西全部都拉进去即可 然后我们回到shop\Home\View目录下创建 ...
-
__set()与__get() 魔术方法
在面向对象编程的过程中,对于类当中的各个成员变量,都有不同的访问属性,比如公有的(public)属性,在类内部和类外部都可直接调用:而私有的(private)和受保护的(protected),在类外不 ...
-
DHTMLX 前端框架 建立你的一个应用程序教程(四)--添加一个工具条toolbar
工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlx ...
-
KeilC51使用详解 (三)
C51强大功能及其高效率的重要体现之一在于其丰富的可直接调用的库函数,多使用库函数使程序代码简单,结构清晰,易于调试和维护,下面介绍C51的库函数系统. 第一节 本征库函数(intrinsic rou ...
-
FaceBook要在视频领域打败YouTube?
据<纽约时报>报道,FaceBook正在探索一项新的策略来直接把音乐视频嵌入到用户的News Feeds中.目前,具有代表性的视频网站有YouTube和Vimeo,它们可以在社交网络上分享 ...
-
Scrapy常用命令行工具
查看所有命令 scrapy -h 查看帮助信息 scapy --help 查看版本信息 (venv)ql@ql:~$ scrapy version Scrapy 1.1.2 (venv)ql@ql:~ ...