JavaScript-原型对象、对象原型、原型继承、原型链

1313亮晶晶~

于 2023-02-07 12:56:27 发布

阅读量576

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_45802287/article/details/128914429

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中的原型概念，包括原型对象的作用，如共享方法以节省内存，以及constructor属性的用途。此外，讨论了对象原型的__proto__属性和构造函数的关系，阐述了原型继承的工作原理及存在的问题，如方法共享导致的副作用，并提出了解决方案。最后，解释了原型链的概念及其查找规则。

摘要由CSDN通过智能技术生成

一、原型对象

（一）什么是原型

原型本质上是一个对象，也称为Prototype为原型对象

（二）原型作用

共享方法

可以把那些不变的方法，直接定义在prototype对象身上

例如：将公共的sing方法写在Star方法的原型对象身上节约内存

    // 构造函数  公共的属性和方法 封装到 Star 构造函数里面了
    // 1.公共的属性写到 构造函数里面
    function Star(uname, age) {
      this.uname = uname
      this.age = age
      // this.sing = function () {
      //   console.log('唱歌')
      // }
    }
    // 2. 公共的方法写到原型对象身上   节约了内存
    Star.prototype.sing = function () {
    // 原型对象里面的函数this指向的还是 实例对象
      console.log('唱歌')
    }
    const ldh = new Star('刘德华', 55)
    const zxy = new Star('张学友', 58)
    ldh.sing() //调用
    zxy.sing() //调用
    // console.log(ldh === zxy)  // false
    console.log(ldh.sing === zxy.sing)

（三）constructor属性

（1）constructor作用

指回该原型对象的构造函数。每个原型对象里面都有个constructor 属性（constructor 构造函数）该属性指向该原型对象的构造函数。

（2）constructor应用场景

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

function Star() {
    }
    // console.log(Star.prototype)
    Star.prototype = {
      sing: function () {
        console.log('唱歌')
      },
      dance: function () {
        console.log('跳舞')
      },
    }
    console.log(Star.prototype)

输出结果：

此时，我们可以在修改后的原型对象中，添加一个 constructor 来指向原来的构造函数。

function Star() {
    }
    // console.log(Star.prototype)
    Star.prototype = {
     // 从新指回创造这个原型对象的 构造函数
      constructor: Star,
      sing: function () {
        console.log('唱歌')
      },
      dance: function () {
        console.log('跳舞')
      },
    }
    console.log(Star.prototype)

输出结果：