JavaScript进阶 第三天

• 编程思想
• 构造函数
• 原型

 一.编程思想

• 面向过程：分析出解决问题所需要的步骤，然后利用函数把这些步骤一步一步实现，使用的时候再一个一个依次调用就可以了（按照步骤划分）
• 面向对象：把事务分解成一个个对象，然后由对象之间分工和合作（按照功能划分）

        ① 面向对象：每个对象都是一个功能中心，具有明确分工

        ② 面向对象编程具有灵活性，代码可复用，容易维护和开发等优点，适合多人开发的大型项目 

        ③ 面向对象的特性：（封装性，继承性，多态性）

• 面向过程

        ① 优点：性能比面向对象高，适合跟硬件联系紧密的东西，比如单片机就采用面向过程编程

        ② 缺点：没有面对对象易维护，易复用，易拓展

• 面向对象

        ① 优点：易维护，易复用，易拓展，由于面向对象有封装，继承，多态性的特性，可以设计出低耦合的系统，使系统更加灵活，更容易维护

        ② 缺点：性能比面向过程低

      前端面向过程更多一点 

     二. 构造函数

• 封装是面向对象思想中比较重要的一部分， JS面向对象可以通过构造函数实现封装
• 构造函数实例创建的对象彼此独立，互不影响
• 但是构造函数存在浪费内存的问题

     三.原型

     3.1 原型

•  构造函数通过原型分配的函数是所有对象所共享的
• JS规定，每一个构造函数都有一个prototype属性，指向另一个对象，也称为原型对象
• 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
• 可以把不变的方法，直接定义在prototype 对象上，这样所有对象的实例就可以共享这些方法
• 构造函数和原型对象中的this都指向实例化的对象

        // 公共的属性写到构造函数中
        function Star(uname, age) {
            this.uname = uname
            this.age = age
        }

        // 公共的方法写到原型中
        Star.prototype.sing = function() {
            console.log('唱歌')
        }

        const ldh = new Star('刘德华', 55)
        const zxy = new Star('张学友', 56)

   3.2 constructor属性

    ① 每个原型对象里面都有个constructor属性

    ② 作用：该属性指向该原型对象的构造函数

    

 ③ 使用场景

如果有多个对象的方法，可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，修改后的原型对象constructor 就不再指向当前构造函数了

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

    Star.prototype = {
        // 指回构造函数
        constructor: Star,
        sing: function() {
            console.log('唱歌')
        },
        dance: function() {
            console.log('跳舞')
        }
    }
    console.log(Star.prototype)

3.3 对象原型

对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在

•  __proto__是JS非标准属性
• [[prototype]]和__proto__意义相同
• 用来表明当前实例对象指向哪个原型对象prototype
• __proto__对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数

3.4 原型继承

        // 父类:构造函数 new出来的结构一样，但是对象不一样
        function Person () {
            this.eyes = 2
            this.head = 1
        }

        // 子类
        function Woman () {
        }

        // 子类的原型 = new 父类
        // 子类的constructor指回构造函数
        Woman.prototype = new Person()
        Woman.prototype.constructor = Woman

        Woman.prototype.baby = function () {
            console.log('宝贝')
        }
        const red = new Woman()
        console.log(red)

        function Man () {
        }

        const pink = new Man()

        Man.prototype = new Person()
        Man.prototype.constructor = Man
        console.log(pink)

3.5 原型链

① 基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链式的结构，我们将原型对象的链式结构关系称为原型链

 

 ② 原型链解释

• 原型链就是一个查找规则，当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
• 如果没有就找它的原型（也就是__proto__指向的prototype 原型对象）
• 如果还没有就查找原型对象的原型（Object的原型对象）
• 依次类推，一直找到Object为止（null）
• __proto__对象原型的意义就在于为对象成员查找提供一个方向或者一条路线
• 可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

 function Person() {

}

const ldh = new Person()
// 判断前者属不属于后者
console.log(ldh instanceof Person)
console.log([1,2,3] instanceof Array)