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

总结

相关推荐
mayaairi4 小时前
Vue2 生命周期完全指南:从创建到销毁的8个钩子函数
前端·javascript·vue.js
研☆香5 小时前
一个简单的气泡弹窗制作
javascript
大模型丫丫5 小时前
用 TypeScript、NestJS 和 LangGraph 搭建一个可控的 AI Agent
javascript·人工智能·typescript
IMPYLH5 小时前
HTML 的 <pre> 元素
前端·javascript·html
shmily麻瓜小菜鸡6 小时前
JavaScript / TypeScript 易踩坑知识点 —— 异步编程类
开发语言·javascript·typescript
tsumikistep6 小时前
【前端】Vue + Axios 跨域问题实战:7070 代理转发 8080 + 401 报错分析(黑马外卖)
前端·javascript·vue.js
默_笙8 小时前
🧀 用户访问一个网站到底经历了什么?全栈部署的"城市观光"指南
前端·javascript
晓天衡宇•评测社区10 小时前
Seedance 2.5 登顶图生视频榜单,Wan 3.0 在游戏与教育场景进入前列
前端·javascript·网络
卡皮巴拉c9910 小时前
基于pnpm搭建monorepo项目
前端·javascript
jianpeng的工程笔记10 小时前
Colab Kaggle 防断开脚本
javascript·深度学习·kaggle·colab