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);
改进版与基础版要分开测试,不然会互相影响到