【JS】原型和原型链 | 笔记整理

构造函数和原型

prototype原型对象

JavaScript 引擎在函数定义时 会自动为函数添加 prototype 属性。这个属性对应着一个对象,这个对象就是所谓的原型对象。

  • 函数的原型对象中有属性constructor,指向这个函数
  • 如果函数作为普通函数调用prototype没有任何作用
  • 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过 __ proto __ 来访问该属性
  • 原型对象就相当于一个公共区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象看作是共有的内容跟,统一设置到原型对象中

查找属性

  • 当我们访问对象的属性或方法时,首先会在对象自身中寻找,如果有则直接使用;如果没有则会去原型对象中寻找;
  • in:检查对象中是否含有某个属性。会遍历原型链。

    • 如果对象中没有但是原型中有,也会返回true
    • console.log("name" in mc)

  • hasOwnProperty():检查对象自身中是否含有该属性,不会遍历原型链。

    • 该方法只有当对象自身中含有属性时才会返回true
    • console.log(mc.hasOwnProperty("hasOwnProperty"));

  • instanceof的判断方法:

    • 表达式:A instanceof B
    • 如果B函数的显示原型对象在A对象的原型链上,返回true,否则返回false
    • 通过检查A.__proto__是否等于B.prototype,直至原型链尽头。

显式与隐式

  • 每个函数function都有一个prototype(显示原型)。在定义函数时自动添加的,默认值是一个空object对象。
  • 每个实例对象可以通过 __ proto __(隐式原型)访问构造函数的原型对象。隐式原型在创建对象时自动添加的,默认值为构造函数的prototype属性的值,指向该对象的原型。
  • 程序员能够直接操作显示原型,但不建议直接操作隐式原型。

原型链

  • 函数的原型对象就相当于一个公共区域,所有由同一个构造函数创建的的实例对象都可以访问到这个原型对象。

当我们访问一个对象的属性时:

  • 现在自身属性中查找,找到返回
  • 如果没有,在沿着__ proto __这条链向上查找,找到返回
  • 如果最终没有找到,则返回undefined

作用:

  • 查找对象属性
  • 原型对象是一个object实例对象,所以它也有原型

    • 寻找对象的时候若原型也没有,则去原型的原型中寻找,直至寻找到object的原型
    • object对象的原型没有原型,如果在object中依然没有找到,则返回undefined
    • object的原型对象是原型链的尽头:Object.prototype.__proto__null,因此 Object.prototype 是原型链的终点。
  • 读取属性值时,会到原型链中去查找
  • 设置属性值时,不会查找原型链。如果当前对象中没有此属性,直接添加并设置其值

原型对象的this指向

  • 1.在构造函数中,this指向实例对象
  • 2.原型对象中的this:
    • 当通过 实例对象调用原型上的方法 时,方法内部的 this 指向 调用该方法的实例对象

扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。如:给数组增加自定义求偶数和的功能。

ini 复制代码
Arrat.prototype.sum=function(){
    var sum = 0;
    for(var i = 0;i<this.length;i++){
    sum+=this[i];  //this指向调用函数的数组
    }
    return sum;
}
var arr=[1,2,3]
console.log(arr.sum());

注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = function(){}的方式

总结

相关推荐
失落的多巴胺9 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear12 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息14 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
样子201819 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿20 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘21 分钟前
vue文本插值
javascript·vue.js·ecmascript
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
黄瓜沾糖吃4 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟4 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo4 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript