es6新语法第三天-CSDN博客

本文链接：https://blog.csdn.net/qq_64241441/article/details/131252585

本文介绍了ES6中的面向对象编程概念，包括构造函数、原型和原型链。通过构造函数实现封装，但存在内存浪费问题，而原型可以解决这个问题，将共享方法放在原型对象上。此外，还讨论了原型的this指向、constructor属性以及对象原型的__proto__。文章还阐述了原型继承的实现方式和原型链的工作原理，并提到了instanceof运算符用于检测原型链关系。

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

es6新语法第三天

1.深入面向对象

1.1面向过程编程

1.2面向对象编程

封装、继承、多态

js中面向过程比较多

2.构造函数

面向对象封装靠构造函数来实现，但是存在浪费内存的问题

3.原型

prototype是一个原型对象，每个构造函数都有

为了避免内存浪费，将所有的不变的方法封装到原型对象里面，避免多次声明造成内存浪费

公共的属性写到构造函数
公共的方法写到prototype原型对象

3.1原型-this指向

还是实例对象

构造函数和原型的this都是指向实例对象

const arr = [1, 2, 3]
    Array.prototype.max = function () {
      // 展开运算符
      return Math.max(...this)
      // 原型函数里面的this 指向谁？ 实例对象 arr
    }
    // 2. 最小值
    Array.prototype.min = function () {
      // 展开运算符
      return Math.min(...this)
      // 原型函数里面的this 指向谁？ 实例对象 arr
    }
    console.log(arr.max())
    console.log([2, 5, 9].max())
    console.log(arr.min())
    // const arr = new Array(1, 2)
    // console.log(arr)
    // 3. 求和 方法 
    Array.prototype.sum = function () {
      return this.reduce((prev, item) => prev + item, 0)
    }
    console.log([1, 2, 3].sum())
    console.log([11, 21, 31].sum())

3.2constructor（构造函数）属性

是原型里面的属性：

该属性指向该原型对象的构造函数

如果原型对象重新赋值的话使用constructor重新指回来

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

3.3对象原型

每一个实例对象里面都有一个属性（__ proto__）（两个杠）指向构造函数的prototype原型对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VTYOH3w-1686914141032)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615181422905.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfubn5i2-1686914141032)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615181753858.png)]

（__ proto__）只读，不可以赋值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmw72ySi-1686914141033)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615183215734.png)]

3.4原型继承

通过原型来继承

因为公共的部分需要在原型prototype中声明

function person() {
    eyes : 2
}
function Woman(){
    
}
Woman.prototype = new Person()
//指回原来的构造函数
Woman.prototype.constructor = Woman

子类的原型 = new 父类

3.5原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mikm8CKz-1686914141033)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615192739500.png)]

主要是里面的–prototype–

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ULcx7hAD-1686914141033)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615192926508.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MtuM4uvo-1686914141033)(C:\Users\20664\AppData\Roaming\Typora\typora-user-images\image-20230615193243751.png)]

instanceof运算符用来检测构造函数的prototype属性是否位于实例对象的Object原型链上

Lcx7hAD-1686914141033)]

[外链图片转存中…(img-MtuM4uvo-1686914141033)]

instanceof运算符用来检测构造函数的prototype属性是否位于实例对象的Object原型链上