JavaScript：面向对象的特性及用JavaScript实现

[Mardanjan]

函数模仿面向对象

// 用函数模仿面向对象的编程方式
    function Person (name) {
        this._name = name
        this.getName = function() {
            console.log(this._name)
            return this._name
        }
        this.setName = function (name) {
            this._name = name
        }
    }
    let p = new Person('Maierdan')
    p.getName()
    p.setName('张三')
    p.getName()

es6提供的书写方式

// es6的新提供的书写方式，这种方式更接近面向对象的书写方式
    class Person {
        // 构造方法
        constructor(name) {
            this._name = name
        }
        getName () {
            console.log(this._name)
            return this._name
        }

        setName(name) {
            this._name = name
        }
    }
    let p = new Person('mardan')
    p.getName()
    p.setName('啦啦')
    p.getName()

面向对象的三大特征

• 封装： 我们平时所用的方法和类都是一种封装，当我们在项目开发中，遇到一段功能的代码在好多地方重复使用的时候，我们可以把它单独封装成一个功能的方法，这样在我们需要使用的地方直接调用就可以了

• 继承：继承在我们的项目中开发中主要使用为子类继承父类，下面是es6继承的书写方式

 // es6 继承的书写方式
    class Father {
        // 构造函数
        constructor(name) {
            this._name = name
        }
        // 实例方法，通过实例对象去调用
        getName () {
            console.log(this._name)
            return this._name
        }
        // 静态属性不会被继承，并且通过类名去调用的
        static hitXiaoming() {
            console.log('打小明')
        }
    }

    class Child extends Father {
        constructor(name, age) {
            // 实例化子类的时候把子类的数据传给父类
            // super关键字：用于访问对象上的函数
            super(name)
            this._age = age
        }
    }

    let daming = new Father('大名')
    Father.hitXiaoming()
    console.log(Father.hitXiaoming)
    daming.getName()
    console.log(daming.hitXiaoming)

    let xiaoming = new Child('小明', '1222')
    xiaoming.getName()
    console.log(xiaoming._age)
    console.log(xiaoming.hitXiaoming)

• 特别提醒：继承会继承父类的实例属性和实例方法，并不会继承静态属性和静态方法，并且静态方法和静态属性只能通过类名来调用

多态

• 多态的具体表现为方法重载和方法重写
• 方法重载：重载时指不同的函数使用相同的函数名，但是函数的参数的类型或者个数不同。调用的时候根据函数的参数来区别不同的函数
• 方法重写：重写（也叫覆盖）时指在派生类中重新对基类中的虚函数重新实现，即函数名和参数都一样，只是函数的实现体不一样

class Father {
        constructor(name) {
            this._name = name
        }
        getName () {
            console.log(this._name)
            return this._name
        }
        work () {
            console.log('我是父类的work方法')
        }
    }

    class Son extends Father  {
        constructor(name, age) {
            super(name)
            this._age = age
        }

        getAge () {
            console.log(this._age)
            return this._age
        }

        work () {
            console.log('我是子类的work方法')
        }
    }
    let f = new Father('Father')
    f.getName()
    f.work()
    let s = new Son('son', 'age')
    s.getName()
    s.getAge()
    s.work()

三大特征的优点

• 封装：封装的优势在于可以定义只可以在类内部进行操作的属性，外部对这些属性做不了指手画脚，想要修改只能通过定义的封装方法来实现
• 继承：继承的优势在于减少了代码冗余，省略了很多重复代码，开发者可以在父类底层定义所有子类必须要有的属性和方法
• 多态：多态实现了方法的个性化，不同的子类根据状态实现不同的方法，光有父类的方法时不够灵活的，可以重写父类的方法

[Mardanjan]

new操作符将函数作为构造器进行调用的过程

• 函数被调用，新创建一个对象，并且成了函数的上下文（也就是此时函数内部的this是指向该新创建的对象，这意味着我们可以在构造函数内部使用this给这个新创建的对象初始化参数），最后返回该对象的引用
• new： 1.运行构造函数，创建一个空对象，2.此时函数里的this指向这个空对象，我们可以使用this给这个空对象初始化一些属性，3.返回新对象的引用

[Mardanjan]

proto 的作用

• 当访问某个对象的某个属性的时候，如果对象没有这个属性，那么就会去这个对象的proto属性所指向的对象里找，一直找，直到proto属性的终点为null，不会再网上找，通过proto属性将对象链接起来的这条链路即我们所谓的原型链

[Mardanjan]

proto 和 constructor

• proto 和 constructor属性是对象所有的属性
• prototype是函数所有的属性，函数也是对象，所以函数也有proto和construnctor属性
• prototype属性的作用就是让该函数所实例化的对象们都可以找到公共的方法和属性
• construcor属性的含义就是指向该对象的构造函数，所有函数的最终的构造函数都指向Function

  function Person(name,height){
  this.name=name;
  this.height=height;
  }
  Person.prototype.hobby=function(){
      return 'watching movies';
  }
  var obj = new Person()
  log(obj.__proto__ === Person.prototype) // true
  log(obj.constructor.prototype === obj.__proto__) // true

[Mardanjan]

prototype

• JavaScript中的每个数据类型都是对象，每个对象都继承自另一个对象，后者成为原型prototype对象，只有null除外，它没有自己的原型对象
• 原型对象的所有属性和方法，都会被对象的实例所共享
• 通过构造函数生成实例对象时，会将对象实例的原型指向构造函数的prototype属性，每个构造函数都有一个prototype属性，这个属性就是对象实例的原型对象。

补充

• 对于构造函数来说，prototype是一个属性，是这个构造函数生成的实例的原型，就是构造的实例的proto属性

  function Person(name,height){
  this.name=name;
  this.height=height;
  }
  Person.prototype.hobby=function(){
      return 'watching movies';
  }
  var obj = new Person()
  log(obj.__proto__ === Person.prototype) // true

• 原型对象的属性不是对象实例的属性，对象实例的属性是继承自构造函数定义的属性，因为构造函数内部有一个this关键字来指向将要生成的对象的实例。对象实例的属性，其实就是构造函数内部定义的属性。只要修改原型对象上的属性和方法，变动就会立刻体现在所有的对象实例上

[Mardanjan]

参考的博文

• https://www.jianshu.com/p/7d58f8f45557

• https://blog.csdn.net/lc237423551/article/details/80010100?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

• https://www.cnblogs.com/douyage/p/8630529.html

• https://www.cnblogs.com/zhengyufeng/p/10992972.html