Attribute和Prototype详解

最新有小伙伴问我Attribute和Prototype的区别，今总结如下：
Attribute： 表述HTML标签的特性集合。
Prototype： 表述DOM对象的属性，它属于Js里对象的范畴。
举个栗子：

<input id="test" placeholder="hello world" other="something" />

var input = document.getElementById('test');

从HTML标签的角度来讲input拥有三个特性(attribute)分别为id、placeholder和other。它们都被显示的定义且赋值，而且打印出input.attributes也可看出：
Attribute和Prototype详解
从Js的对象角度来讲input就是一个DOM对象的实例，它拥有一个DOM对象所有的属性（即使有些属性没有赋值）。还是举个栗子：

function Person(name,age,color){
    this.name = name || '';
    this.age = age || 0;
    this.color = color || 'yellow';
}
var tom = new Person('tom',18);
tom.name == 'tom'
tom.color == 'yellow'
tom.some == undefined  //未定义some属性

这里的tom就好比input也是一个对象实例，它拥有构造函数的所有属性，即便有些属性没有初始化。所以

input.id == 'test'  // 定义了id这一属性
input.className == '' // 未定义class属性，返回空字符串
input.value == ''  // 未定义value属性 返回空字符串
input.other == undefined // 自定义的特性，构造函数中未定义此属性，就像Person中未定义some一样

小结： 所以说Attribute和Prototype是两个不同领域中的内容，本身并没有可比性，只是他们翻译成中文都可以叫做‘属性’，所以容易造成概念上的混淆。

Attribute和Prototype详解

相关推荐