当前位置：首页 > news >正文

JS原型概念讲解

news 来源：原创 2024/5/19 18:03:05

1.对象中存储属性的区域实际有两个

- 对象自身

 --比如直接通过对象所添加的属性
 --在类中通过x = y 的形式添加的属性，位于对象自身中

- 原型中存储

 --对象中还有一些内容，会存储到其他对象中（原型对象）
 --在对象中会有一个属性用来存储原型对象，这个属性叫做__proto__
 --原型对象也负责为对象存储属性
 当我们访问对象中的属性时，会优先访问对象自身的属性
 对象自身不包含该属性时，才会去原型对象中寻找
--会添加到原型对象中的情况：
     1.在类中通过xxx() {} 方式添加的方法，位于原型中
     2.主动向原型中添加的属性或方法

例子：

class Person {
        name = "孙悟空"
        age = 18

        sayHello() {
            console.log("我是", this.name)
        }
    }
    const per = new Person()
    console.log(per)

按道理，应该输入一个包含sayHello的对象，但是实际上

在这里插入图片描述
sayHello方法并不是在age和name一层级，而是在Prototype中。
这就是一个叫做原型的地方存储着。

2.如何访问一个对象的原型呢？两种方式

  class Person {
        name = "孙悟空"
        age = 18

        sayHello() {
            console.log("我是", this.name)
        }
    }

    const per = new Person()
    console.log(per)
    console.log(per.__proto__)
    console.log(Object.getPrototypeOf(per))

在这里插入图片描述

3.原型对象中的数据：

1.对象中的数据（属性、方法等）
2.constructor （对象的构造方法）

注意：
原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同，比如

 class Person {
        name = "孙悟空"
        age = 18

        sayHello() {
            console.log("我是", this.name)
        }
    }

    const per = new Person()
    console.log(per)
    console.log(per.__proto__)
    console.log(Object.getPrototypeOf(per))
    console.log(per.__proto__.__proto__)
    console.log(per.__proto__.__proto__.__proto__)