(一)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 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

原型继承

//原型式继承

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

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("
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/844913