(一)js前端开发中设计模式前篇之对象

js 设计模式前篇之对象

• js 中的传值方式
  • 基本类型：值传递
  • 引用类型：地址传递

var count = 10;

//按值传递

var baz = (function (a) {
  a *= 20;
  console.log(a);
})(count);

console.log(count);

//按址传递
let userInfo = {
  name: "张三",
  age: 26,
};

var foo = (function (data) {
  data.age = 28;
  console.log(data);
})(userInfo);

console.log(userInfo);

//200
//10
//{ name: '张三', age: 28 }
//{ name: '张三', age: 28 }

类式继承

• 父类实例化，子类继承父类的实例，见名知意

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

let reader = new Person("张三");
console.log(reader.getName());

//继承类，原型链

function Author(name, book) {
  Person.call(this, name);
  this.book = book;
}
//获取原型对象，父类上的所有实例方法
Author.prototype = new Person();
//修正constructor，子类的constructor指向自己
Author.prototype.construtor = Author;
//添加子类方法
Author.prototype.getBooks = function () {
  return this.book;
};

//test
let author = new Author("李四", "JavaScript设计模式");
//子类中并没有设置name，所以取父类中的，即Person中的name
//子类中没有getName方法，所以取父类中的,即Person中的getName方法
console.log(author.getName());
//子类扩展了属于自己的新方法
console.log(author.getBooks());

//extend函数，简化类的声明
function extend(subClass, superClass) {
  //避免直接实例化父类，可能父类有副作用，或者是大量的计算
  //创建一个空函数，作为中介
  var F = function () {};
  //将父类的原型对象，赋给中介函数
  F.prototype = superClass.prototype;
  //将中介函数，赋给子类
  subClass.prototype = new F();
  //修正constructor，子类的constructor指向自己
  subClass.prototype.constructor = subClass;
}

//设计版的类式继承

function Person1(name) {
  this.name = name;
}

Person1.prototype.getName = function () {
  return this.name;
};

/** Class Author */
function Author1(name, book) {
  Person1.call(this, name);
  this.book = book;
}
//使用extend函数，简化类的声明
extend(Author1, Person1);

//添加子类方法
Author1.prototype.getBooks = function () {
  return this.book;
};
//test
let author1 = new Author1("李四2222", "JavaScript设计模式2222");
console.log(author1.getName());
console.log(author1.getBooks());

//上面类似继承的写法，唯一的问题是父类固化在子类的构造函数中
//继续改进优化exend函数

function extend1(subClass, superClass) {
  var F = function () {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;

  //子类增加了一个属性，直接指向了父类的原型对象，prorotype
  subClass.superclass = superClass.prototype;
  //正常情况下，每个类的constructor属性都是指向自己，
  //保证父类的constructor属性指向父类
  if (superClass.prototype.constructor === Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}

//使用test1
function Person2(name) {
  this.name = name;
}
Person2.prototype.getName = function () {
  return this.name;
};
/** Class Author */
function Author2(name, book) {
  //调用父类的构造函数，初始化父类属性
  //弱化，子类和父类的强耦合
  Author2.superclass.constructor.call(this, name);
  this.book = book;
}
extend1(Author2, Person2);
Author2.prototype.getBooks = function () {
  return this.book;
};
let author2 = new Author2("李四333", "JavaScript设计模式333");
console.log(author2.getName());
console.log(author2.getBooks());

原型继承

//原型式继承

// - 步骤
//     - 创建一个对象
//     - 实例化该类，创建一个新对象

const Person = {
  name: "默认名字",
  getName() {
    return this.name;
  },
  books: [],
};
const reader = clone(Person);
console.log(reader.getName());
reader.name = "李四";
console.log(reader.getName());

function clone(superClass) {
  console.log("🚀 ~ clone ~ superClass:", superClass);
  let F = function () {};
  F.prototype = superClass;
  return new F();
}

//test2

const Author = clone(Person);
// Author.books = [];
Author.books.push("《JavaScript高级程序设计》");
Author.books.push("《JavaScript语言精粹》");
Author.books.push("《JavaScript设计模式》");
Author.books.push("《JavaScript权威指南》");
Author.books.push("《JavaScript DOM编程艺术》");
Author.getBooks = function () {
  return this.books;
};

console.log("Author", Author.getBooks());
reader.getBooks = function () {
  return this.books;
};
console.log("reader", reader.getBooks());

/**
 * Author [
  '《JavaScript高级程序设计》',
  '《JavaScript语言精粹》',
  '《JavaScript设计模式》',
  '《JavaScript权威指南》',
  '《JavaScript DOM编程艺术》'
]
reader [
  '《JavaScript高级程序设计》',
  '《JavaScript语言精粹》',
  '《JavaScript设计模式》',
  '《JavaScript权威指南》',
  '《JavaScript DOM编程艺术》'
]
 */

• 从上面的代码中，可以看到，原型继承的缺点是：
  • 1.所有实例共享同一个原型对象，无法实现多继承
  • 2.原型对象中保存的，是所有实例共享的值，只要有一个实例修改了原型对象中的值，其他实例也会受到影响
• 解决办法是，每个实例都添加自己属性，在自己的属性上进行操作，不要污染原型对象
  • 取消// Author.books = [];这行的注释，在运行代码，reader 类 books 就不会有值了

参元类

//参元类
//先创建一个包含各种方法的通用类，然后再用它扩充到其他类

const Mixin = function () {};

Mixin.prototype = {
  serialize() {
    let output = [];
    for (let key in this) {
      if (!this.hasOwnProperty(key)) {
        continue;
      }
      output.push(`${key}=${this[key]}`);
    }
    return output.join("&");
  },
  getName() {
    return this.name;
  },
};

function argument(receivingClass, givingClass) {
  for (let methodName in givingClass.prototype) {
    if (!receivingClass.prototype[methodName]) {
      receivingClass.prototype[methodName] = givingClass.prototype[methodName];
    }
  }
}

function Author(name, books) {
  this.name = name;
  this.books = [];
}
argument(Author, Mixin);

var author = new Author("张三", ["java", "js"]);
var serialize = author.serialize();
var name = author.getName();

console.log(serialize);
console.log(name);

//改进版
function argument2(receivingClass, givingClass) {
  //复制特定的成员方法或属性
  console.log("🚀 ~ argument2 ~ argument[2]:", arguments);
  if (arguments[0]) {
    console.log(arguments[2]);
    for (i = 2; i < arguments.length; i++) {
      receivingClass.prototype[arguments[i]] =
        givingClass.prototype[arguments[i]];
    }
  } else {
    //复制所有成员方法或属性
    for (let methodName in givingClass.prototype) {
      if (!receivingClass.prototype[methodName]) {
        receivingClass.prototype[methodName] =
          givingClass.prototype[methodName];
      }
    }
  }
}

argument2(Author, Mixin, "serialize");
var author1 = new Author("李四", ["java", "js"]);
console.log("🚀 ~ author1:", author1);
var serialize1 = author1.serialize();
var name1 = author1.getName(); //author1.getName is not a function

console.log(serialize1);
console.log(name1);

改进版与基础版要分开测试，不然会互相影响到