javascript如何封裝函數

時間 2020-07-06

原文原文鏈接

一般寫js組件開發的，都會用到匿名函數的寫法去封裝一個對象，與外界造成一個閉包的做用域。封裝，全天下漫天遍野的封裝，JQuery，EXT和Prototype.js封裝的是javascript，jQuery uI和jQuery mobile封裝着jQuery，java中的JDBC在spirng,Hibernate等框架封裝着。javascript

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 <script type="text/javascript">
11     var beibei = {
12         init:function () {
13             console.log('come in here!');
14         }
15     };
16     beibei.init();
17 
18     //構造函數
19     function Person() {
20         this.name = "beibei";
21         this.age = 26;
22         this.getName = function () {
23             return this.name;
24         }
25     }
26     var person = new Person();
27     console.log(person.age);
28     console.log(person.getName());
29 
30     function Person(name,age) {
31         this.name = name;
32         this.age = age;
33         this.getName = function () {
34             return this.name;
35         }
36     }
37 
38     var p1 = new Person("beibei",10);
39     console.log(p1.name);
40     console.log(p1.age);
41     console.log(p1.getName());
42 
43     //這樣寫是沒問題的 可是 有一點缺陷 就是 每一個對象都維護相同的方法實例 而其實它們能夠共享此方法 而沒必要每一個對象都生成此實例
44     //在java語言中 面向對象的思想中 有一條「繼承」既然此方法對於每一個對象來講是公用的 那麼能夠在它的父類中實現
45     //在javascript中繼承 是基於原型對象的繼承 在原型對象中實現此方法，那麼每一個對象調用次方法時 首先查看本身是否有此方法 若是有 調用本身的方法
46     //若是沒有 去原型對象中查詢 調用原型對象的方法 是否是和java中的繼承差很少呢？ 這是修改後的代碼。
47 
48     function Person(name,age) {
49         this.name = name;
50         this.age = age;
51     }
52 
53     Person.prototype.getName = function () {
54         return this.name;
55     }
56 
57     var p1 = new Person("beibei",10);
58     console.log(p1.name);
59     console.log(p1.age);
60     console.log(p1.getName());
61 
62     //對象字面量的形式構造對象
63     var p1 = {
64         name:"beibei",
65         age:10,
66         getName:function () {
67             return this.name;
68         }
69     }
70     console.log(p1.name);
71     console.log(p1.age);
72     console.log(p1.getName());
73     
74 </script>
75 </body>
76 </html>