先看例子:

<!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. PAT Basic 1013

    1013 数素数 令P~i~表示第i个素数.现任给两个正整数M <= N <= 10^4^,请输出P~M~到P~N~的所有素数. 输入格式: 输入在一行中给出M和N,其间以空格分隔. 输出 ...

  2. PowerShell-第2章 管道

    2.1 过滤列表项或命令输出项 列出所有正在运行进程名称中包含"search"的进程,对进程名字属性使用-like操作符来比较进程的Name属性 Get-Process | Whe ...

  3. Core Animation 动画

    Core Animation框架 Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用 ...

  4. Leetcode 388.文件的最长绝对路径

    文件的最长绝对路径 假设我们以下述方式将我们的文件系统抽象成一个字符串: 字符串 "dir\n\tsubdir1\n\tsubdir2\n\t\tfile.ext" 表示: dir ...

  5. 84. Spring Boot集成MongoDB【从零开始学Spring Boot】

    至于MongoDB网上有很多相关的资料,所以在这里不进行过多的介绍,我们在这里主要是介绍下如何将mongodb与spring boot结合使用.本节大纲: (1) 准备工作: (2) 新建一个mave ...

  6. [AHOI2009]维护序列 (线段树)

    题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一 ...

  7. P1136 迎接仪式 (动态规划)

    题目描述 LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的 ...

  8. Android开发之(1)AnimationListener

    1,就像Button控件有监听器一样,动画效果也有监听器,只需要实现AnimationListener就可以实现对动画效果的监听,只需要实现AnimationListener就可以实现对动画效果的监听 ...

  9. HDU 1242 dFS 找目标最短路

    //多个起点,要最短得目标,不妨倒过来从目标出发,去找最近的点更新!!!!!!递归时思路要清楚 #include<iostream> #include<cstring> usi ...

  10. rman备份OBSOLETE和EXPIRED参数来历及区别

    http://blog.itpub.net/30496894/viewspace-2096221/