js 面向对象

参考了该文章:JavaScript 面向对象 - 简书 (jianshu.com)

工厂模式

1
2
3
4
5
6
7
8
9
10
11
function createCar(color,wheel){//createCar工厂
var obj = new Object;//或obj = {} 原材料阶段
obj.color = color;//加工
obj.wheel = wheel;//加工
return obj;//输出产品
}
//实例化
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色

工厂模式对传入的值进行加工,然后输出

构造函数

构造函数就是类

构造函数用于写属性

image

当我们 new 这个类的时候,这里的 name 和 sex 会作为属性一并被赋给 obj3

image

我这儿构造函数的命名不规范,应该首字母大写

原型(prototype)

*每个函数都有一个属性——****prototype**。这个**prototype**的属性值是一个对象(属性的集合),默认只有一个叫做**constructor****的属性,指向这个函数本身**

image

这里是给 createPre 类,添加一个 showName 的方法,然后后面创建实例化对象(obj3)的时候,这个 obj3 会有这个方法

image

构造函数和原型的用法

构造函数里面加属性,原型里面加方法

image

这里再放一张容易理解对象的图

image

image

这里的不同颜色的车和不同种类的狗,就是 new 出来的实例对象

命令空间

image

不同对象,相同方法

继承

js 通过 call 方法来继承父元素的属性

call 方法:可以改变函数执行的时候,里面的 this

image

call 可以传参数,这里的 this 就是 show2 这个对象

call 将 show2 这个对象传入 show

然后将 show 里面 this 指向指为 show2

继承的问题

这里举个栗子

image

这里 arr2 并不是复制了一份 arr1,而是将 arr2 也指向了 arr1 的空间了

他们都指向了同一块空间

image

可以看见这个 arr1 里面的数据也被更改了

解决这个问题的方法是,用循环将 arr1 里面的数据传入 arr2

image

对象里面,方法的继承也存在同样的问题

image

这样做的话,会和上面数组的问题一样,修改 show2 的方法,show 的方法也会被修改

image

这样就不会出问题了

重写

image

重写就是将新的原型里面的方法,给重新写一遍