js中的原型和原型链

目录

  • 前言
  • 一、什么是原型?
  • 二、原型链
  • 三、代码演示
  • 总结


前言

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


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

一、什么是原型?

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

二、原型链

每一个构造函数都有一个prototype属性指向原型对象,原型对象又通过constructor指回构造函数。每一个对象都有一个非标准的属性__proto__,用来指向原型对象,当对象查找成员找不到的时候,就会沿着__proto__的指向继续寻找。
js中的原型和原型链_第1张图片

三、代码演示

封装一个数组求和的方法,将其添加到内置对象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>Documenttitle>
  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>

js中的原型和原型链_第2张图片

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


总结

学就完了!!!

你可能感兴趣的:(javascript,javascript)