Javascript-面向对象与原型

1. 编程思想

  • 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个调用
  • 面向对象是把食物分解成一个一个对象,然后由对象之间分工合作

面向对象编程

Javascript-面向对象与原型_第1张图片

1.1 面向对象与面向过程对比

Javascript-面向对象与原型_第2张图片

2. 构造函数

Javascript-面向对象与原型_第3张图片
Javascript-面向对象与原型_第4张图片

3. 原型

3.1 原型定义

Javascript-面向对象与原型_第5张图片

    // 任何一个数组都可以使用
    const arr = [1, 2, 3]
    // 自定义方法写到原型上
    Array.prototype.max = function () {
      return Math.max(...this)
    }
    console.log(arr.max());

    // 求和
    Array.prototype.sum = function () {
      return this.reduce((prev, item) => prev + item)
    }

    console.log([1, 2, 3, 4, 5].sum());

3.2 construtor属性

Javascript-面向对象与原型_第6张图片
Javascript-面向对象与原型_第7张图片

3.3 对象原型

Javascript-面向对象与原型_第8张图片

可以理解成构造函数是爸爸,实例对象和原型prototype是两个儿子
Javascript-面向对象与原型_第9张图片

    function Star() { }
    const s = new Star()
    console.log(s.__proto__ === Star.prototype);//true	对象原型指向原型对象

总结

Javascript-面向对象与原型_第10张图片

4. 原型继承

Javascript-面向对象与原型_第11张图片

4.1 封装

Javascript-面向对象与原型_第12张图片
Javascript-面向对象与原型_第13张图片

5. 原型链

Javascript-面向对象与原型_第14张图片

只要是对象就有__proto__
Javascript-面向对象与原型_第15张图片
原型链属于一种查找规则,由于这条线路的存在,可以不断往上查找属性和方法,直到查完为止

你可能感兴趣的:(Javascript,javascript,原型模式,开发语言)