JS:关于在实例修改原型属性的两种情况

在最近复习js时偶然看到一段话,大概意思是:基本数据类型在实例修改时会直接在实例上创建该属性,而不会在原型上修改;而引用类型在实例修改时会改变原型对象上的属性。

看到这里是否也感到十分懵,不知道是什么原因。而我在查阅一些资料并自己实践了一部分,得出以下结论。

为什么实例给原型对象上的属性赋值时,会出现这两种差异?

  • 首先分析第一种情况:在实例给在原型对象上定义的属性赋值时,会在实例上创建一个同名的属性,而不会去赋值原型对象上的属性。这里不管是引用类型还是基本类型都一样。

    • 原因:编译器在读取到赋值信息时依旧会沿着原型链进行查找,当在原型对象上找到该属性时,会先查看其属性描述符[[writable]](默认为true)。若[[writable]]为true,则不会对原型对象上的属性进行操作,而是在该实例上创建一个新的同名属性。若[[writable]]为false,则会操作失败。
        function Person() { }
    
        Person.prototype = {
          name: "我要走走看看",
          age: 18,
          hobby: ["code"]
        }
    
        var person1 = new Person()
        var person2 = new Person()
    
        person1.hobby = ["games"]
    
        console.log(person1);
        console.log(person2)
    复制代码

在这里插入图片描述

  • 分析第二种情况:在实例对在原型对象上定义的引用类型属性进行修改,会直接对原型对象的该属性进行修改。
    • 原因:在不是赋值的情况下,编译器直接沿着原型链进行查找,在原型对象上找到该属性后就直接进行修改。
    function Person() { }

    Person.prototype = {
      name: "我要走走看看",
      age: 18,
      hobby: ["code"]
    }

    var person1 = new Person()
    var person2 = new Person()

    person1.hobby.push("game")

    console.log(person1);
    console.log(person2)
复制代码

在这里插入图片描述

这些只是我的一些拙见,如果有什么错误的敬请批评指正。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享