热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js原型及原型链的理解

1.prototype每个函数都有一个prototype属性,被称为显示原型2._proto_每个实例对象都会有_proto属性,其被称为隐式原型每一个实例对象的隐式

1. prototype


每个函数都有一个prototype属性,被称为显示原型



2._ proto _


每个实例对象都会有_ proto 属性,其被称为隐式原型
每一个实例对象的隐式原型
proto _属性指向自身构造函数的显式原型prototype



3. constructor


每个prototype原型都有一个constructor属性,指向它关联的构造函数。
在这里插入图片描述



原型链


获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。


需要注意:Object是属于原型链的顶层,所有构造函数的的prototype都指向 Object.prototype

举个例子:

function Person(name) {this.name = name;
}
Person.prototype.eat = function () {console.log(this.name+"吃东西");
};
Person.prototype.sleep = function () {console.log(this.name+"睡觉");
}
function Student(school) {this.school = school;
}
Student.prototype.write = function () {console.log("写作业");
}
Student.prototype = new Person("小华");//改变Student()构造函数的指向,让Student()构造函数的原型对象指向Person的实例对象var s1 = new Student("某某高中");
s1.eat();//小华吃东西
s1.sleep();//小华睡觉
s1.write();//Uncaught TypeError: s1.write is not a function,因为Student()的原型的指向改变,所以找不到write()方法
console.dir(Student);
console.dir(s1);

在这里插入图片描述
从这个例子中,可以发现,利用原型可以实现继承。面向对象的编程语言中有(class)类的概念,但是Javascript不是面向对象的语言,所以js中没有类(class)(ES6中实现了class),但是js可以模拟面向对象的思想编程,js中通过构造函数来模拟类的概念。


推荐阅读
  • 本文深入探讨了JavaScript中`this`关键字的多种使用方法和技巧。首先,分析了`this`作为全局变量时的行为;接着,讨论了其在对象方法调用中的表现;然后,介绍了`this`在构造函数中的作用;最后,详细解释了通过`apply`等方法改变`this`指向的机制。文章旨在帮助开发者更好地理解和应用`this`关键字,提高代码的灵活性和可维护性。 ... [详细]
  • 在处理木偶评估函数时,我发现可以顺利传递本机对象(如字符串、列表和数字),但每当尝试将JSHandle或ElementHandle作为参数传递时,函数会拒绝接受这些对象。这可能是由于这些句柄对象的特殊性质导致的,建议在使用时进行适当的转换或封装,以确保函数能够正确处理。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 在最近的学习过程中,我对Vue.js中的Prop属性有了更深入的理解,并认为这一知识点至关重要,因此在此记录一些心得体会。Prop属性用于在组件之间传递数据。由于每个组件实例的作用域都是独立的,无法直接引用父组件的数据。通过使用Prop,可以将数据从父组件安全地传递到子组件,确保数据的隔离性和可维护性。 ... [详细]
  • 如何精通编程语言:全面指南与实用技巧
    如何精通编程语言:全面指南与实用技巧 ... [详细]
  • 本文总结了JavaScript的核心知识点和实用技巧,涵盖了变量声明、DOM操作、事件处理等重要方面。例如,通过`event.srcElement`获取触发事件的元素,并使用`alert`显示其HTML结构;利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外,还介绍了如何在表单中动态生成和操作``元素,以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。 ... [详细]
  • 如何在页面底部添加倾斜样式效果? ... [详细]
  • 在掌握Promise调用链的过程中,理解其在异步执行中的核心作用至关重要。链式调用不仅简化了代码结构,提高了可读性,还增强了程序的健壮性和维护性。类似于jQuery中常用的链式调用,如 `$(#app).show().css('color', 'red')`,Promise的链式调用通过 `.then()` 方法实现了异步操作的无缝衔接,使得复杂的异步流程更加直观和高效。掌握这些技巧将有助于开发者更好地处理异步编程中的常见问题,提升开发效率。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用
    Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用 ... [详细]
  • 探索偶数次幂二项式系数的求和方法及其数学意义 ... [详细]
  • C++ 开发实战:实用技巧与经验分享
    C++ 开发实战:实用技巧与经验分享 ... [详细]
  • 本文深入解析了Java 8并发编程中的`AtomicInteger`类,详细探讨了其源码实现和应用场景。`AtomicInteger`通过硬件级别的原子操作,确保了整型变量在多线程环境下的安全性和高效性,避免了传统加锁方式带来的性能开销。文章不仅剖析了`AtomicInteger`的内部机制,还结合实际案例展示了其在并发编程中的优势和使用技巧。 ... [详细]
  • 在使用 jQuery 的 `html()` 方法时,我发现了一个奇怪的现象:该方法无法完整地插入指定的字符串内容。具体来说,当尝试插入较长或包含特殊字符的字符串时,部分内容可能会被截断或丢失。这一问题可能与 jQuery 对字符串的处理方式有关,建议在实际应用中进行充分测试以确保数据完整性。 ... [详细]
  • Java解析YAML文件并转换为JSON格式(支持JSON与XML的结构化查询)
    本文探讨了如何利用Java解析YAML文件并将其转换为JSON格式,同时支持JSON和XML的结构化查询。YAML、JSON和XML这三种数据格式通过其名称作为文件扩展名,便于区分和使用。文章详细介绍了这些格式的层次结构和数据表示方法,并重点讨论了在数据传输过程中,XML的特性和优势。此外,还提供了具体的代码示例和实现步骤,帮助开发者高效地进行数据格式转换和查询操作。 ... [详细]
author-avatar
kg810219_447
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有