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

总结

相关推荐
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的4 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀4 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce5 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L6 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop7 小时前
05-ES6
前端·javascript·es6
Heo7 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子8 小时前
深入 npm 模块安装机制
前端·javascript·面试