先看例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
class map{
print(data){
alert(data)
}
}
class child extends map{
constructor(opt){
super()
this.init(opt)
}
init(opt){
this.data=Object.assign({}, opt);
console.log(this.data.a)
this.print(this.data.a)
}
}
let data={
a:'1',
b:'2'
}
new child(data);
</script>
</body>
</html>

map类里边是一些可复用的方法集中放在一起，它可以衍生出很多子类，它本身是很多子类的交集。例子中的child在实例化的时候传入数据就是先传入constructor，但是里边要有super(),每个方法直接不要有逗号。

有时候项目中可能不需要继承，仅仅是在一个js文件中生成一个类，然后被其他js文件引用并且new实例化，那么可以写成如下：

class map{
constructor(opt){
this.init(opt)
}
init(opt){
this.data=Object.assign({}, opt);
console.log(this.data.a)
alert(this.data.a)
}
}
let data={
a:'1',
b:'2'
}
new map(data);

再啰嗦下，有时候一个对象是

var name = "The Window";

var object = {　

name: "My Object",

getNameFunc: function() {

var that = this;

returnfunction() {

return that.name;

};

}

};

alert(object.getNameFunc()()); //"My Object"

这种写法仅仅是定义一个对象，其中属性和方法之间用逗号隔开，如果是定义类的话那么不能用逗号隔开，两者很像，要注意区分。

 

js 类继承extends的更多相关文章

  1. Js 类继承 extends

    html 及 js 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  3. 128-PHP类继承extends

    <?php class father{ //定义father类 //定义public描述的成员属性和方法 public $eyes=2; public $ears=2; public funct ...

  4. js类继承扩展super

    相应的资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super 例子: class Pol ...

  5. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  6. js类（继承）（二）

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...

  7. 《JS权威指南学习总结--9.3 JS中JAVA式的类继承》

    内容要点: 一.JS中的类 1.JAVA或其他类似强类型 面向对象语言的 类成员的模样 实例字段:它们是基于实例的属性或变量,用以保存独立对象的状态. 实例方法: 它们是类的所有实例所共享的方法,由每 ...

  8. js原生继承之——类式继承实例(推荐使用)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. eclipse中tab键设置

    1.点击 window->preference-,依次选择 General->Editors->Text Editors,选中右侧的 insert space for tabs;如下 ...

  2. chrome 下载插件包及离线安装 附 Advanced Rest Client 下载

    最近需要测试http rest服务,由于chrome插件的轻便,首先想到了用chrome插件,在google商店找到Advanced Rest Client,用了一阵感觉不错. 于是项目组其他同事也要 ...

  3. spring之生命周期

    1.容器中对的生命周期 spring可以管理 singleton作用域的bean的生命周期,spring可以精确地知道该bean何时被创建,何时被初始化完成,容器合适准备销毁该bean实例. spri ...

  4. git提交之后没有push，代码被覆盖之后恢复

    git  reflog  通过这个看commit id git reset [commit id] --hard   有时候要删除一个index.lock文件.

  5. linux命令dhclient

    linux命令 dhclient 背景 多台服务器(CentOS7 系统)设置静态IP,其中有台服务器设置了静态IP后,只要重启就变更为其他的,但是配置文件并无改动. 使用命令 #自动获取IP dhc ...

  6. SHUoj 神无月排位赛

    神无月排位赛 发布时间: 2017年7月8日 21:06   最后更新: 2017年7月8日 22:35   时间限制: 1000ms   内存限制: 128M 描述 <神无月>作为盛大游 ...

  7. android soap webservers 无法执行 报错 ht.call(SOAP_ACTION, envelope);解决方法

    1.可能没有加入网络访问权限,在Manifest里面加入,<uses-permission android:name="android.permission.INTERNET" ...

  8. 16.1114 模拟考试T1

    1.正确答案 [题目描述] 小H与小Y刚刚参加完UOIP外卡组的初赛,就迫不及待的跑出考场对答案. “吔,我的答案和你都不一样!”,小Y说道,”我们去找神犇们问答案吧”. 外卡组试卷中共有m道判断题, ...

  9. DP的序--Codeforces956E. Wardrobe

    $n \leq 10000$个盒子,有高度,高度总和$\leq 10000$,盒子有重要的和不重要的,问最多有多少重要盒子的底端在区间$[L,R]$. 这是个入门级的DP,但需要一点胆量MD这题能放D ...

  10. java多线程总结一：线程的两种创建方式及比较

    1.线程的概念:线程(thread)是指一个任务从头至尾的执行流,线程提供一个运行任务的机制,对于java而言,一个程序中可以并发的执行多个线程,这些线程可以在多处理器系统上同时运行.当程序作为一个应 ...