JS OOP （面向对象编程）

作者: Louis_King | 来源:发表于2018-11-27 08:34 被阅读0次

PHP面向对象基础总结
PHP面向对象基础总结(转载整理)
js面向对象
面向对象
对象_原型
01. 这个阶段改如何学习
面向对象浅析
JS OOP （面向对象编程）
JS面向对象编程---OOP
面向对象基础

类 Class

1.通过一系列特性、行为对事物的特征进行描述。
2.在类定义中，通过属性（数据）描述事物的特性，通过方法（操作）描述事物的行为。

const Animal= function(name, type) {
  /* private members */
  var type = type                                                                // 私有属性
  var isAnimal = function() { return type === 'animal' }      // 私有方法

  /* protect members */
  this.color = 'blue'
  Object.defineProperty(this, 'color', {
    get: function(){ if (this instanceof Animal) return color },
    set: function(v){ if (this instanceof Animal) color = v }
  })

  /* public members */ 
  this.name = name                                                           // 实例属性
  this.animalName = function(){                                         // 实例方法
    // 实例方法可访问私有属性和方法，原型方法不可以
    isAnimal() && console.log(this.name)
  }
}
Animal.prototype = {
  constructor: Animal,
  type: ' animal ',                                                                 // 原型属性
  action: function() { console.log(' eating, drinking ') }         // 原型方法
}
Animal.number = 0                                                             // 类静态属性
Animal.count = function(){ return Animal.number }            // 类静态方法

抽象 Abstract

1.没有足够信息描述一个具体的事物，而仅对事物进行概括性的描述。
2.无法展现出事物对象，必须要有事物的完整描述才能展现出对象。
3.抽象出的类就像一张蓝图，只是告诉我们宝藏的位置，但想得到宝藏就必须我们自己去寻宝。

const Animal = function() { 
  this.initialize()                                           // 抽象类不可实例化，在校验抽象方法时异常
}
Animal.prototype.initialize = function() {
    this.walk()                                               // 抽象方法在初始化时进行校验是否被派生类所实现
    this.yell()
  }
}

继承 Inheritance

1.若多个事物具有很多相似的特性和行为，可以通过对基础的描述进行扩充，而不需要重新描述。
2.派生出的类就像继承者，它不但获得被继承者的所有财产，而且也拥有自己的财产。

原型链继承（实例化时无法向父类构造函数传参、原型对象的引用属性被所有实例共享）

function Cat(name, type) { this.type = type }          // 无法向父类传递name属性
Cat.prototype = new Animal()                                // 原型指向对象被所有实例共享
Cat.prototype.name = name                                  // 实例化后方可为父类初始化属性值

构造继承（无法继承原型的属性和方法，每个子类均包含父类方法的副本）

function Cat(name, type) {
  Animal.call(this, name)                                       // 通过父类的构造函数对子类实例对象进行初始化
  Animal.prototype.contructor.call(this, name)      // 可多继承 （原型的方法不会被直接继承）
  this.type = type                                                   // 子类构造函数初始化对象属性（覆盖父类）
  this.yell = function() { console.log('喵') }             // 子类构造函数初始化对象方法（覆盖父类）
}

实例继承（扩展后的父类实例，不支持多继承）

function Cat(name, type) {
  var surperClass = new Animal(name)
  surperClass.type = type
  return surperClass
}

拷贝继承（内存占用高，无法获取父类不可枚举的属性和方法）

function Cat(name) {
  var animal = new Animal()
  for(var p in animal) { Cat.prototype[p] = animal[p] }
  Cat.prototype.name = name
}

组合继承（即可继承实例属性和方法，也可继承原型属性和方法）

function Cat(name, type) {
  Animal.call(this, name)      // 继承父类实例的属性和方法，并可传参
  this.type = type      // 子类实例属性和方法
}
Cat.prototype = new Animal()      // 原型链属性和方法继承，并支持 instanceof 指向
Cat.prototype.constructor = Cat      // 构造函数指向，用于子类访问父类实例属性和方法

寄生组合继承（剔除父类实例属性和方法）

function Cat(name, type) {
  Animal.call(this, name)
  this.type = type
}
(function() {      // 闭包的方式，避免污染全局
  var Super = function() {}      // 空的构造函数，剔除实例属性和方法
  Super.prototype = Animal.prototype      // 保存原型属性和方法
  Cat.prototype = new Super()
  Cat.prototype.constructor = Cat
})()

封装 Encapsulation

1.对事物描述的具体细节（隐私）被隐藏起来，而仅仅透露出事物的表面信息。

封装出的类就像事物对象的说明书，仅告诉我们如何去使用这个对象而已。

const Animal= function(name, secret) {
  this.name = name   // 表面信息（公共属性）
  let secret = secret   // 被隐藏的信息（私有变量）
  let collect = function() { secret = 'collect something' } // 被隐藏的行为（私有方法）
  /* 由于闭包的特性，原型链中的方法无法访问到私有变量 */
  this.exposure = function() {      // 暴露出来的表面行为（共有方法）可访问被隐藏的信息
      this.collect()
      console.log(secret)
  } 
}

多态 Polymorphism

事物衍生出来的，具有相似特性和行为的其它事物，在针对这些事物进行描述时，都具有不同的特征。

多态属于继承的一种特点，如从形状继承而来的圆形与方形，他们绘制的结果却完全不同。

const Cat = function(name,  type) {
  Animal.call(this, name)
  this.type = type
}
(function() {
  Super = function(){}
  Super.prototype = Animal.prototype
  Cat.prototype = new Super()
  Cat.prototype.constructor = Cat
  Cat.prototype.polyFunc = function() { console.log('it's cat') }     // 由派生类重写，从而具有不同的行为
})()

ES6 中 “类” 的定义与继承

类的定义

const privateProperty = Symbol('privateProperty')    // closure unique property identifer
const privateMethod = Symbol('privateMethod')    // closure unique method identifer
class Person {
  constructor(name) {    // constructor initial properties
      this._name = name    // initial public property
      this[privateProperty ] = 'private information'    // initial private property
  }
  get name() { return this._name }    // validate get property (use for protect members)
  set name(value) { this._name = value }  // validate set property (use for protect members)
  say() { console.log(this.name); this[privateMethod]() }    // public method, call the private method
  [privateMethod]() { console.log(this[privateProperty ]) }    // private method
  static getInformation(){ console.log('parent static method') }    // static method
}

类的继承

class RacePerson extends Person {    // inherit the Person class
  constructor(name, from) {
      super(name)    // must call parent constructor
      this.from = from    // create and initial it's own property
   }
   say() { 
      super.say()    // call it's parent method
      console.log('from: '  + this.from)    // handle it's own logic
   }
   static getInformation() {
       super.getInformation()    // call it's parent static method
       console.log('child static method')    // handle it's own logic
   }
}

Vue 中 “类” 的定义与继承

类的定义

const App = new Vue.extend({
  el: '#app',
  template: '<div>Hello world! {{name}}</div>',
  props: { name: '' },
  data() { return {} },
  created() { console.log('app created') }
})

extends 单继承（生命周期和watch钩子优先级最高，属性和方法继承优先级则最低）

const ExApp = new Vue.extend({
  extends: App,    // extends 继承中的生命周期钩子优先级最高，最先被调用
  data() { return { } },  // 所有派生类的同名的共有属性将覆盖父类的
  methods: {},  // 所有派生类的同名的共有方法将覆盖父类的
  created() { console.log('ExApp created') },  // 派生类的生命周期钩子优先级最低，最后被调用
})

mixins 多继承（生命周期和watch钩子优先级次于extends，属性和方法继承优先级次于派生类）

const mixin1 = {
  data() { return {} },
  methods: {},
  created() { console.log('mixin1 created') }
}
const mixin2 = {
  data() { return {} },
  methods: {},
  created() { console.log('mixin2 created') }
}
const MixinApp =  Vue.extend({
  mixins: [ mixin1, mixin2 ],  // 生命周期钩子前者优先于后者，而属性和方法继承后者优先于前者
  created() { console.log('MixinApp created') }
})

inheritAttrs, $attrs, $listeners 组件式继承（模板扩展，父类作为模板的一个模块）

const CompApp = Vue.extend({
  /* 父类将获取派生类实例化时的所有没有被继承的属性值和相应事件处理方法*/
  template: '<div>{{component}}<app v-bind="$attrs" v-on="$listeners"></app></div>',
  props: { component: '' },    // 派生类继承或扩展的属性
  data() { return {} },
  created() { console.log('componentApp created') },
  components: { app: App },
  inheritAttrs: false     //设置 $attrs 仅包含没有被继承的属性对象（不包含派生类props定义的属性）
})

问题

函数内部定义方法与 proto原型链中定义方法的区别

// 函数内部定义的 实例方法 可获取到闭包的作用域的 私有变量 和 私有方法。
const Person = function(name) {
  var name = name
  this.call = function() { console.log(name) } 
}
// prototype 原型链定义的 原型方法 指向其它内存空间独立的函数体，无法获取闭包的作用域。
Person.prototype = {
  constructor: Person,
  say: function() { console.log(name) }
}

instanceof 操作符（递归判断实例原型链上的原型对象指向）

JS原型链.jpg

function instance_of(instance, constructor) {
  var prototype = constructor.prototype      // prototype由定义时直接挂载在构造函数上（显式原型）
  var __proto__ = instance.__proto__        // __proto__ 指向对应原型对象 prototype （隐式原型）
  while(true) {
    if ( __proto__ === null ) return false       // 匹配失败，仅Object.prototype.__proto__为null
    if ( __proto__ === prototype ) return true   // 当前实例原型指向与指定构造函数匹配
    __proto__ = __proto__.__proto__         // 实现递归检测
  }
}