【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(){}的方式

总结

相关推荐
bestadc17 小时前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
萌萌哒草头将军18 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
太空游走的鱼18 小时前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
GISer_Jing18 小时前
Next系统学习(二)
前端·javascript·node.js
织_网18 小时前
Electron 核心模块速查表
javascript·electron·策略模式
EndingCoder18 小时前
Electron 原生模块集成:使用 N-API
javascript·electron·node.js·桌面端
咔咔一顿操作19 小时前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
落笔忆梦19 小时前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
艾小码19 小时前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
Mintopia19 小时前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc