对象创建和继承方法-优快云博客

JS中的对象

对象的创建方式

// 1. 使用字面量创建对象
let obj1 = {
  name: "王五",
  age: 23,
  hobby:['唱歌','打麻将']
}
console.log(obj1.hobby);

// 2. 通过内置构造函数创建
const obj2 = new Object()
obj2.name = "李四"
obj2.age = 45
obj2.address = '淘淘工厂'
console.log(obj2);

// 3. 工厂函数: 创建一个函数，通过调用函数传递参数，返回对象
function createObj(name, age, hobby){
  const obj ={}
  obj.name = name
  obj.age = age
  obj.hobby = hobby
  return obj
}

const obj3 = createObj('老刘', 34, ['吃饭'])
console.log(obj3);

// 4. 构造函数
// 构造函数是根据具体的事物抽象出来的抽象模板
function CreateObject(name){
  this.name = name
  this.hobby = []
  // 对于每一个对象都有一个info，那么为了减少内存，可以写在原型链上
  /* this.info = function(){
    console.log(`他是${name}`);
  } */
}
// 将公共的方法抽离出来
CreateObject.prototype.info = function(){
  console.log(`他是${this.name}`);
}

let obj4 = new CreateObject('张大大')
console.log(obj4); // CreateObject { name: '张大大', hobby: [], info: [Function (anonymous)] }
obj4.info() // 他是张大大

总结：通过构造函数创建的对象相比于工厂函数：1.不用显示创建对象、2.不用return、3.直接将属性和方法赋给this（创建的实例对象）、4. 命名开头大写字母

对象的继承方法

原型链继承

让一个构造函数的原型指向另外一个类型的实例，那么这个构造函数new出来的实例就具有该实例的属性。

缺点：不能定制化，所有实例化的对象共享父类的属性。

function Person() {
  this.isShow = true
  this.info = {
      name: "mjy",
      age: 18,
  };
}

Person.prototype.say = function(){
  console.log(this.info);
  console.log(this.isShow);
}

function Child(){}
/* 此刻实现了原型链继承，Child有了Person的属性和方法 */
Child.prototype = new Person()
const c1 = new Child()
c1.info.age = 13 // 引用数据类型，数据共享，会影响其他实例化对象
c1.say() // { name: 'mjy', age: 13 }  true
const c2 = new Child()
c2.say() // { name: 'mjy', age: 13 }  true

构造函数继承

在子类构造函数内部调用父类的构造函数，使用apply或者call方法将父对象的构造函数绑定在子对象上，实现子类拥有父类的属性。

缺点：在父类中定义属性和方法，所有子类继承来自父类的属性，没有个性化，方法都在构造函数中定义，因此无法实现函数复用，占内存。

function Person(name, age){
  this.name = name
  this.age = age
  this.getInfo = function(){
    console.log(`他是${this.name},${this.age}岁了！`);
  }
}
/* 此刻，实现构造函数的继承，将父类Person的this指向子类，使得子类有了父类的属性 */
function Child(...args){
  Person.call(this, ...args)
}

const c1 = new Child('王丽',23)
const c2 = new Child('老刘',45)
console.log(c1);
c1.getInfo() // 他是王丽,23岁了！
c2.getInfo() // 他是老刘,45岁了！

组合继承（经典）

使用原型链实现对原型属性和方法的继承，在通过构造函数实现对实例属性的继承，既能够实现对函数的复用，又能保证每个实例对象都有自己的属性。

缺点：当生成一个实例，超类型构造函数会被调用两次，一次在创建子类型原型，另一次在子类实例化的时候

/* 组合式继承（原型链 + 构造函数） */
function Person(name, age){
  console.log('父类被调用了');
  this.info = {
    name,
    age
  }
}
/* 原型链上添加公共的方法 */
Person.prototype.say = function(){
  console.log(`我叫${this.info.name},我今年${this.info.age}岁了`);
}
/* 构造函数继承 */
function Child(...args){
  Person.call(this, ...args)
}
/* 原型链继承 */
Child.prototype = new Person() // 父类被调用了

const c1 = new Child('老大',15) // 父类被调用了
c1.info.address = '天蓝'
const c2 = new Child('老二',10) // 父类被调用了
console.log(c1); // Person { info: { name: '老大', age: 15, address: '天蓝' } }
console.log(c2); // Person { info: { name: '老二', age: 10 } }
c1.say() // 我叫老大,我今年15岁了
c2.say() // 我叫老二,我今年10岁了

原型式继承

相当于对对象的浅复制过程。

缺点：浅拷贝，会影响原始对象的属性

方法一：借助构造函数在函数内部创建一个临时性的构造函数，然后将传入的对象作为构造函数的原型，返回这个临时创建的函数的一个新实例。

/* 4.1 方法一：临时构造函数 */
function CreateObject(obj){
  // 临时构造函数
  function Fun(){}
  Fun.prototype = obj
  return new Fun()
}

let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}
const p1 = CreateObject(person)
console.log(person.hasOwnProperty("name")); // true
// "name"是p1原型链上的属性，而不是她自身的属性
console.log(p1.hasOwnProperty("name"));
p1.name = 'mmy'
p1.hoby.push('rap')
const p2 = CreateObject(person)
console.log(p1.hoby, p2);
console.log(person); // 影响原始对象的属性

方法二：Object.create()：相当于把一个对象的属性和方法都复制给另外一个新对象{}身上。规范化了原型式继承。

let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}
const personCopy = Object.create(person)
personCopy.showName() // my name is: mjy

寄生式继承

寄生式继承的思路：原型式继承和工厂模式的结合，创建一个封装继承过程的函数，在函数内部增强对象，最后返回这个对象。

缺点：函数难以重用。使用寄生式继承来为对象添加函数, 会由于不能做到函数复用而降低效率;这一点与构造函数模式类似，且多个对象之前共享属性

/* 原型式继承 */
function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
/* 工厂函数增强函数，最后return */
function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}

let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}

let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy

let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

寄生组合式继承

组合继承是常用的经典继承模式，不过，组合继承最大的问题就是无论什么情况下，都会调用两次父类构造函数；一次是在创建子类型的时候，一次是在子类型的构造函数内部。寄生组合继承就是为了降低父类构造函数的开销而实现的。

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

缺点：代码复杂，难理解。注意代码的书写顺序，会影响是否改变了原型

/* 寄生组合式继承：利用寄生式继承+ 原型链继承：降低父类构造函数的调用次数，减少开销。
  寄生式继承来继承超类型的原型，在将结果指定给子类型的原型
*/
function objectCopy(obj){
  function Fun(){}
  Fun.prototype = obj
  return new Fun()
}

function Company(type, size){
  // 只有创建子例的时候被调用
  console.log('调用次数！'); //  调用次数！
  this.info = {
    type,
    size
  }
}
Company.prototype.logInfo = function(){
  console.log(`这是一家${this.info.type}公司,${this.info.size}规模`);
}
function Customer(args,name,age){
  Company.call(this, ...args)
  this.name = name
  this.age = age
}
function inheritPrototype(customer, company){
  // 使用原型式继承父类的原型，然后指定给子类型的原型
  let prototype = objectCopy(company.prototype)
  prototype.constructor = customer
  Customer.prototype = prototype
}
inheritPrototype(Customer, Company)

// 给Customer的原型链上添加方法，一定是在继承了父类之后
Customer.prototype.say =  function(){
  console.log(`顾客是${this.name}, 今年${this.age}岁了`)
}

const customer1 = new Customer(['零食店','小型'],'小红',6)
customer1.logInfo() // 这是一家零食店公司,小型规模
customer1.info.address = '无锡'
console.log(customer1); // Customer {  info: { type: '零食店', size: '小型', address: '无锡' },  name: '小红',  age: 6 }
customer1.say() // 顾客是小红, 今年6岁了

const customer2 = new Customer(['玩具店','中型'],'小明',8)
console.log(customer2); // Customer { info: { type: '玩具店', size: '中型' }, name: '小明', age: 8 }
console.log(customer2.__proto__.constructor); // [Function: Customer]

class类继承

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上（Parent.apply(this)）。类似于构造函数继承一样。

ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

class Person{
  constructor(name, age){
    this.name = name
    this.age = age
  }

  speak(){
    console.log('hello',this.name);
  }
}

class Child extends Person{
  constructor(name, age, hobby){
    super(name, age)
    this.hobby = hobby
  }
}

const chil = new Child('万物',34,['唱','跳'])
console.log(chil.hobby) // [ '唱', '跳' ]
chil.speak(); // hello 万物

面向过程和面向对象编程

面向过程

主要的特点是注重实现这个功能的步骤，第一步干什么,第二步干什么…
也注重 实现功能的因果关系，因为…所以…
缺点：注重每一步的过程，步骤之间相互影响，导致代码与代码之间的耦合度太高,扩展力差

面向对象

面向对象的开发形式更注重将一个功能进行拆分，每一模块进行独立开发，生成对象A,对象B,对象C，然后组合起来的对象ABC或对象CBA，让各个对象之间协作起来形成一个系统。
面向对象思想的特点就是不断的创建对象 ,再使用该对象调用功能 !面向对象虽然是着重对象的,但是他也是基于面向过程的！面向对象可以看做是面向过程的封装。
面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比由一系列函数或指令组成的传统的面向过程编程。