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

总结

相关推荐
猫3287 小时前
v-cloak
前端·javascript·vue.js
AC赳赳老秦7 小时前
OpenClaw二次开发实战:编写专属办公自动化技能,适配个性化需求
linux·javascript·人工智能·python·django·测试用例·openclaw
旷世奇才李先生7 小时前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
Ulyanov8 小时前
《PySide6 GUI开发指南:QML核心与实践》 第二篇:QML语法精要——构建声明式UI的基础
java·开发语言·javascript·python·ui·gui·雷达电子对抗系统仿真
聚美智数8 小时前
企业实际控制人查询-公司实控人查询
android·java·javascript
herinspace11 小时前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别
这里不能睡觉12 小时前
js 实现 Blob、File、ArrayBuffer、base64、URL 之间互转
javascript
拉拉肥_King12 小时前
Ant Design Table 横向滚动条神秘消失?我是如何一步步找到真凶的
前端·javascript
吴声子夜歌13 小时前
Vue3——新语法
前端·javascript·vue.js
jiayong2313 小时前
第 36 课:任务详情抽屉快捷改状态
开发语言·前端·javascript·vue.js·学习