浅析js class

一、浅析js class

1、在 ES6规范中，引入了 class的概念。使得 JS开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。

2、但是JS中并没有一个真正的 class原始类型， class仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。

3、本质上js中class其实是构造函数的另一种写法，使之更加直观的展现构造器中的各项属性

4、(1)constructor是一个构造函数方法，创建对象时自动调用该方法

5、(2)constructor是类必须的一个属性，少了他类的创建会报错，如果我们不写的话js会给他自动加上

6、(3)this指的是实例化对象,就相当于构造函数中的this，指向的是当前创建的对象

7、(4)类中声明函数不需要function关键字，直接函数名即可

8、(5)方法之间不需要都好分割，加了会报错

9、因为本质上是构造函数的另一种写法，所以他的使用和一些其他特性都是和构造函数相似的。比如调用都是通过new关键字并且class也存在prototype这个属性，通过她我们可以给这个类的原型对象定义属性。通过这个类创建出的对象一样会有这个属性

10、子类继承基类后，同名的属性会覆盖掉基类，以上例子中两个类都有sayName函数，但是调用的时候输出的是子类的sayName。

11、一个构造函数可以使用 super关键字来调用一个父类的构造函数。

二、[HTML问题] 标签中的class如何理解

1、class属性规定元素的类名（classname）。class属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过JavaScript来改变带有指定class的HTML元素。

2、html中的class=是一个选择器，可以理解为一个标识，用来标识特定的标签。

3、比如：<divclass="div1"></div>这就是一个标识效果，以后想要改变这个div的样式的话就可以找class为div1的元素了。

4、另外一般的flash文件是不可视的，它只是调用了而已。当想单独观看或者直接下载这个flash文件的话，就可以把这个flash的名称按照路径拷贝到浏览器里就可以直接看了。

5、对Html5中的id和name以及class属性的理解

6、（1）id是标签的唯一标识，多用于js脚本中，比如页面中有多个元素，让我们想在js脚本中对某个特定元素进行设置的时候，我们可以根据id来直接访问该元素。

7、同时，id也可用于css样式中，当我们想对某个单独的元素做出改变样式时候可以进行设置，使用#元素id{}方式来改变样式

8、（2）name多用于表单中，用来和服务器进行交互，如CheckBox标签和radio标签等，对应的name属性的值就是提交表单后变量的名称。

9、（3）class多用于设置CSS样式，当我们想让很多元素拥有相同的样式时，可以通过class属性的值来统一选择，通常为.class的属性{}设置css样式做法一般是先通过类设置大部分相同的元素样式，再通过ID设置独特的元素样式。

10、对于id name class属性值，我个人的感觉是能用到的时候再定义，不然要么元素过多，定义太多记不住，要么定义了用不到，浪费时间 id多用于js和css，强调每个元素的独特性；name多用于form表单，强调交互；而class多用于css的设置，强调标签的共同性。

三、js更改css class属性

1、更改一个标签的 class属性的代码是：

2、document.getElementById( id).className=字符串;

3、document.getElementById( id)用于获取标签对应的 DOM对象，你也可以用其它方法获取。className是 DOM对象的一个属性，它对应于标签的 class属性。字符串是 class属性的新值，它应该是一个已定义的CSS选择符。

4、class属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。

5、利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

6、font-size: 30px; font-weight: bold; color: red;

7、<div id="tt">欢迎光临！</div>

8、<p><button on click="setClass()">更改样式</button></p>

9、<script type="text/javas cript">

10、document.getElementById("tt").className="txt";