JavaScript 中的继承是基于原型链机制来实现的,只要是对象就会有原型( 对象原型的 __proto__ 为 null ),那我们通过元素选择器获取的 div 对象,它也是一个对象,它有原型吗?搞一下不就知道了:
let div = document.getElementById('div');
console.log(div); //打印一个div标签,不要相信,它在骗傻子呢
console.dir(div); //打印出一个对象,可以根据__proto__属性逐级查看原型
首先是 div 元素的一些自身属性,如:className、id、style 等等。
div 的第一层原型:HTMLDivElement.prototype,里面是所有 div 共有的属性。( 对象.__proto__ === 其构造器.prototype )
div 的第二层原型:HTMLElement.prototype,里面是所有 HTML 标签共有的属性。
div 的第三层原型:Element.prototype,里面是所有 XML、HTML 标签的共有属性。
div 的第四层原型:Node.prototype,里面是所有节点共有的属性,节点包括 XML 标签文本注释、HTML标签文本注释等。
div 的第五层原型:EventTarget.prototype,里面重要的函数属性是 addEventListener()、removeEventListener()。
div 的最后一层原型:Object.prototype,它是 JavaScript 中所有对象的原型链上的根(Object.prototype.__proto__ === null )