JS封装类或对象的最佳方案

怼烎@ 2022-06-03 08:11 146阅读 0赞

**JS封装类或对象的最佳方案**

面向对象强大的优点之一是能够创建自己专用的类或者对象，封装一组属性和行为。抛开性能来说，JS要比面向对象语言如JAVA要灵活好用的多，组装数据结构很灵活方便。那么我们如何来用面向对象的思维来定义JavaScript的类或对象呢？

**问题的出现**

如果要抽象出来一个人，那么简单的属性为:name,sex,birthday等，方法为:sayHi,最初级的写法就是

Js代码   ![收藏代码][icon_star.png]

1.  **var** oPerson = **new** Object;  
2.  oPerson.name = "zs";  
3.  oPerson.sex = 'boy';  
4.  oPerson.birthday = '2001-02-03';  
5.  oPerson.sayHi = **function**()  
6.  \{  
7.     alert("Hi ! I am "\+**this**.name);  
8.  \}

那么我们要多创建几个人，怎么办呢？就得再写几个Object,那得哭死，那么怎么办呢？看下面的几种解决方案：

**下面的最终解决方案可能不是最佳，但是我目前的水平，是觉得最佳的，欢迎指教**

Js代码   ![收藏代码][icon_star.png]

1.  functon createPerson(name,sex,birthday)  
2.  \{  
3.    **var** oPerson = **new** Object;  
4.    oPerson.name =name;  
5.    oPerson.sex = sex;  
6.    oPerson.birthday = birthday;  
7.     
8.   oPerson.sayHi = **function**()  
9.   \{  
10.     alert("Hi ! I am "\+**this**.name);  
11.  \}  
12.   **return** oPerson;  
13. \}  
14.   
15. //那么我们多创建几个人的话，就可以  
16. **var** person1 = **new** createPerson('zs','boy','2001-02-03');  
17. **var** person2 = **new** createPerson('ls','boy','2001-02-04');  
18. person1.sayHi();  
19. person2.sayHi();

看上去，似乎解决了，但是问题是 你创建几个人就创建了几个sayHi行为，但是他们都是一个功能，怎么办呢？JS的灵活造就了下面的解决方法，把方法作为一个对象的属性：

Js代码   ![收藏代码][icon_star.png]

1.  **function** sayHi()  
2.  \{  
3.   alert("Hi ! I am "\+**this**.name);  
4.  \}  
5.    
6.  functon createPerson(name,sex,birthday,fn)  
7.  \{  
8.    **var** oPerson = **new** Object;  
9.    oPerson.name =name;  
10.   oPerson.sex = sex;  
11.   oPerson.birthday = birthday;  
12.   oPerson.sayHi = sayHi;//这里是个函数引用  
13.   **return** oPersn;  
14. \}  
15. **var** person1 = **new** createPerson('zs','boy','2001-02-03');  
16. **var** person2 = **new** createPerson('ls','boy','2001-02-04');  
17. person1.sayHi(); //outputs "Hi ! I am zs"  
18. person2.sayHi(); //outputs "Hi ! I am ls"

问题似乎解决了，但是，你参见prototype就会发现人家有更高明的解决方案，所有函数只创建一次，而每个对象都具有自己的对象属性实例，看下面的代码：

**最终方案**

Js代码   ![收藏代码][icon_star.png]

1.  functon CreatePerson(name,sex,birthday,fn)  
2.  \{  
3.    **this**.name =name;  
4.    **this**.sex = sex;  
5.    **this**.birthday = birthday;  
6.  \}  
7.  CreatePerson.prototype.sayHi = **function** ()  
8.  \{  
9.    alert("Hi ! I am "\+**this**.name);  
10. \}  
11.   
12. **var** person1 = **new** CreatePerson('zs','boy','2001-02-03');  
13. **var** person2 = **new** CreatePerson('ls','boy','2001-02-04');  
14. person1.sayHi(); //outputs "Hi ! I am zs"  
15. person2.sayHi(); //outputs "Hi ! I am ls"  
16.   
17. 一般情况下，一个对象或者类不只一个方法，需要多个方法配合使用，那么  
18. CreatePerson.prototype=\{  
19.   sayHi:**function**()  
20.   \{  
21.     alert("Hi ! I am "\+**this**.name);  
22.   \},  
23.   walk:**function**()  
24.   \{  
25.     alert("walk,walk");  
26.   \},  
27.   ……  
28. \}  
29. 是不是优雅的多？

昨天写了一半，看到同志们回复是javascript高级程序设计上的，我要说的是对，确实是来源于上面，我就不废话了，中间省掉了很多循序渐进的引导，如：工厂模式、构造函数方式、原型方式、混合的构造方法/原型方式、动态原型方式、混合工厂模式。希望想学好JS的同志们回头多看看这些，会明白很多“为什么”。

呵呵，炫丽背后其实很朴实。

[icon_star.png]: /images/20220603/69eb153448084332be369de8e60824e2.png