(一)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);

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

相关推荐

  1. ()js前端开发设计模式对象

    2024-07-20 22:24:01       26 阅读
  2. (三)js前端开发设计模式工厂模式

    2024-07-20 22:24:01       20 阅读
  3. (二)js前端开发设计模式单例模式

    2024-07-20 22:24:01       24 阅读
  4. (四)js前端开发设计模式工厂方法模式

    2024-07-20 22:24:01       27 阅读
  5. (四)js前端开发设计模式简单工厂模式

    2024-07-20 22:24:01       32 阅读
  6. 前端开发用到了哪些设计模式

    2024-07-20 22:24:01       41 阅读
  7. 前端设计模式模版方法模式

    2024-07-20 22:24:01       62 阅读
  8. 2024 高级端面试题 前端安全模块 「精选

    2024-07-20 22:24:01       60 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 22:24:01       104 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 22:24:01       115 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 22:24:01       94 阅读
  4. Python语言-面向对象

    2024-07-20 22:24:01       100 阅读

热门阅读

  1. 网络安全-网络安全及其防护措施6

    2024-07-20 22:24:01       24 阅读
  2. [C++ 入门基础 - 命名空间]

    2024-07-20 22:24:01       20 阅读
  3. SharedPreferences 和 MMKV 是何方神圣

    2024-07-20 22:24:01       24 阅读
  4. 力扣1942.最小未被占据椅子的编号

    2024-07-20 22:24:01       24 阅读
  5. linux LED代码设计

    2024-07-20 22:24:01       27 阅读
  6. 【深度学习图像】拼接图的切分

    2024-07-20 22:24:01       26 阅读
  7. dp算法第三天(暑期提升)

    2024-07-20 22:24:01       28 阅读
  8. RabbitMQ 全面解析与常见问题解答

    2024-07-20 22:24:01       26 阅读
  9. 关于大数据技术栈的一些总结

    2024-07-20 22:24:01       25 阅读