js中的原型和原型链

最新推荐文章于 2024-08-25 09:57:22 发布

置顶 <a href="#">leo</a>

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量445

点赞数 4

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_57712926/article/details/119650182

版权

javascript 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

前言

为什么要学原型呢？原型链有什么作用呢？本文通过图解和代码给你讲解，快来一睹为快~

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是原型？

JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通
过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有
都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，

二、原型链

每一个构造函数都有一个prototype属性指向原型对象，原型对象又通过constructor指回构造函数。每一个对象都有一个非标准的属性__proto__，用来指向原型对象，当对象查找成员找不到的时候，就会沿着__proto__的指向继续寻找。
在这里插入图片描述

三、代码演示

封装一个数组求和的方法，将其添加到内置对象Array的原型对象上，然后调用这个方法求和。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      Array.prototype.sum = function () {
        return this.reduce((acc, cur) => (acc += cur), 0)
      }

      let arr = [1, 2, 3, 4, 5]
      console.log('和为：',arr.sum())

      console.dir(Array)
    </script>
  </body>
</html>

在这里插入图片描述

上图控制台输出，可以很清晰的看到在内置对象Array原型对象上已经添加了我们自己封装的sum方法，通过内置对象Array原型对象上的sum方法我们也完成了求和需求。又学废了~

总结

学就完了!!!

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
js中的原型和原型链

目录前言一、什么是原型？二、原型链三、代码演示总结前言为什么要学原型呢？原型链有什么作用呢？本文通过图解和代码给你讲解，快来一睹为快~提示：以下是本篇文章正文内容，下面案例可供参考一、什么是原型？JavaScript 是一种通过原型实现继承的语言与别的高级语言是有区别的，像 java，C#是通过类型决定继承关系的，JavaScript 是的动态的弱类型语言，总之可以认为 JavaScript 中所有都是对象，在 JavaScript 中，原型也是一个对象，通过原型可以实现对象的属性继承，
复制链接

扫一扫

专栏目录