一只 div 对象的完整原型链

简介: 一只 div 对象的完整原型链

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 )



目录
相关文章
|
6月前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
6月前
|
JavaScript 前端开发 Java
JavaScript难点:原型、原型链、继承、new、prototype和constructor
JavaScript 不像 Java、C++ 这种纯面向对象的语言,可以通过类实现继承,JavaScript中的继承是通过原型实现的,即使 ES6 中新增的 class 类也只是原型的语法糖而已
79 4
|
JavaScript 前端开发
|
JSON JavaScript 前端开发
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
147 0
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
|
JavaScript 前端开发
javaScript 对象添加属性和创建js对象的方式
javaScript 对象添加属性和创建js对象的方式
481 0
javaScript 对象添加属性和创建js对象的方式
|
JavaScript 前端开发
js函数与原型链
js函数与原型链
|
JavaScript 前端开发 程序员
对Javascript 类、原型链、继承的理解
一、序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承。
1111 0
|
Web App开发 前端开发 JavaScript