JavaScript高级复习01-面向对象编程,原型对象

面向对象编程

1.理解什么是面向对象编程

• 面向对象不是一门技术，而是一种解决问题的思维方式

• 面向对象的本质是对面向过程的一种封装

2.面向对象与面向过程区别

• 面向过程：注重的是过程(实现某一个功能的逻辑,12345步)

• 面向对象：注重的是结果(能一行代码搞定,尽量一行代码搞定)

3.理解什么是对象

• 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义

  • 对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据

  • 对象：对现实世界实物的一种抽象。

原型对象

构造函数

1.构造函数： 使用new关键字调用的函数

2.new的工作原理:

(1)创建空对象

(2)this指向这个对象

(3)对象赋值

(4)返回对象

3.new细节:

(1)构造函数首字母大小: 为了提醒别人不要忘记new关键字

(2)在构造函数中主动写return:

        值类型: 无效, 还是返回new创建的对象

        引用类型: 有效, 会覆盖new创建的对象

<script>
      // 使用函数创建对象 : 解决创建多个对象代码冗余
      // 工厂函数 ： 创建对象
      function createPerson (name, age, sex) {
        // (1)创建空对象
        let p = {}
        // (2)对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        // (3)返回创建好的对象
        return p
      }
      let p1 = createPerson('ikun', 32, '男')
      let p2 = createPerson('班长', 38, '男')
      let p3 = createPerson('王悦', 28, '男')
      console.log(p1, p2, p3)
​
      /*构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
        构造函数 ： 使用new关键字调用一个函数     
      */
      function Person (name, age, sex) {
        // (1)创建空对象  {}
        // (2)将this指向这个对象  this = {}
        // (3)对象赋值
        this.name = name
        this.age = age
        this.sex = sex
        // (4)返回这个对象  return this
      }
      let person1 = new Person('ikun', 32, '男')
      let person2 = new Person('班长', 38, '男')
      let person3 = new Person('王悦', 28, '男')
      console.log(person1, person2, person3)
​
    // 测试new关键字功能
    // 声明一个空函数
    //   function fn () {}
    //   let res1 = fn() //普通函数
    //   let res2 = new fn() //构造函数
    //   console.log(res1, res2)
    </script>

原型对象

1.原型对象: 当声明一个函数的时候，编译器会自动帮你创建一个与之对应的对象，称之为原型对象

2.原型对象作用: 解决构造函数内存资源浪费 + 全局变量污染

3.如何访问:

构造函数名.prototype

实例对象可以直接访问原型中的一切成员

4.构造函数、原型对象、实例对象三角关系

prototype: 属于构造函数，指向原型对象

        作用：解决构造函数资源浪费+变量污染

__proto__: 属于实例对象，指向原型对象  

        作用： 可以让实例对象访问原型中的成员

constructor: 属于原型对象，指向构造函数

        作用： 可以让原型对象知道自己是被哪一个构造函数创建的

prototype属性

<script>
      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }
​
      //2.原型对象
      Person.prototype.type = '哺乳动物'
      Person.prototype.eat = function () {
        console.log('吃东西')
      }
    
    /* 
    prototype `: 属于构造函数，指向原型对象
​
    作用：解决构造函数资源浪费+变量污染 
     */
    </script>

proto属性

    <script> 
      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }
​
      //2.原型对象
      Person.prototype.eat = function () {
        console.log('我中午真的吃了红烧武昌鱼')
      }
      Person.prototype.country = '中国人'
​
      //3.实例对象
      let p1 = new Person('班长', 28)
      console.log(p1)
​
      /* 
      __proto__ : 属于实例对象,指向原型对象
      作用： 可以让实例对象访问原型对象中的成员
      */
     console.log( Person.prototype === p1.__proto__ )//true
​
     //实例对象为什么可以直接访问原型中的成员，其实都是通过__proto__来访问的
     /* 
     1.虽然实例对象可以直接访问原型的原理是 __proto__,但是开发中不推荐使用
     2.原因： __proto__不是ECMA标准语法，有一些浏览器不支持。
     3.结论： 学习阶段，学习原型可以用__proto__. 实际开发中，建议省略__proto__
     */
     p1.eat()//p1.__proto__.eat()      
    </script>

constructor属性

    <script>
      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }
​
      //2.原型对象
      Person.prototype.type = '哺乳动物'
      Person.prototype.eat = function () {
        console.log('吃东西')
      }
​
      //3.实例对象
      let p1 = new Person('布丁', 3)
      p1.eat()
      console.log(p1.type)
​
      /* 
      constructor : 属于原型对象，指向构造函数
      作用：可以让原型对象知道自己是被哪一个构造函数创建的 
      */
      console.log(Person.prototype.constructor)//Person
      console.log(Person.prototype.constructor === Person )//true
      console.log( p1.constructor )//Person p1.__proto__.constructor
    </script>