JavaScript 面向对象(一) —— 基础篇

前端开发作者： 2024-08-26 09:10:01

学好JS的面向对象，能很大程度上提高代码的重用率，像jQuery，easyui等，这篇博客主要从细节上一步步讲JS中如何有效地创建对象，也可以看到常见的创建对象的方式，最后也会附上一些JS面向对象的案

 1 <!DOCTYPE html>
 2 <html 3     head 4         meta charset="UTF-8" 5         title></ 6         script 7             
 8             /**
 9              * 定义一个数组
10              */
11             var arr = [1,2345];
12             
13             14              * 弹出 object
15              * 说明数组就是个对象
16              17             alert(typeof arr); 
18             
19             20              * 弹出5
21              * 对象的属性 length
22              23             alert(arr.length); 
24             
25             26              * 对象的方法 push
27              * 弹出 1,2,3,4,5,6
28              29             arr.push(6); 
30             alert(arr); 
31         </32     33     body34     35 >

 7              8              * 定义一个全局函数
 9              10             function show(){
11                 alert(this);
12             }
//调用show()
            show();
15             
16         17     18     19     20 >

 5              6              * 为window定义一个show方法
 7                          window.show = (){
10             window.show();
13             
14         15     16 >

            arr.show  7             arr.show(); 弹出 1,5
10         11     12 >

="UTF-8" />
 4      6                          * 创建一个新对象
             * new Object()创建出来的对象几乎是空白的，需要自己添加属性，方法
 person new Object();
为person对象添加属性
            person.name "jiangzhou;
13             person.age 2214             为person对象添加方法
            person.showName 16 姓名：+.name);
18             person.showAge 19 年龄：.age);
21             调用对象的方法
22             person.showName();
            person.showAge();
25         26     27 >

构造函数：工厂
 createPerson(name,age){
 8                  9                 
10                 原料
                person.name  name;
                person.age  age;
13                 
14                 加工
                person.showName                     alert(                }
                person.showAge 21                 出厂
22                 return person;
24             创建两个对象
 p1  createPerson(26              p2 tom2027             
28             调用对象方法
            p1.showName();
            p1.showAge();
31             
32             p2.showName();
33             p2.showAge();
34             
35         36     37 >

 6             
                person.sex  sex;
20                 
                 *  person.showSex = function(){} 等价于 person.showSex = new Function('');
                 *  也就是说我们在创建这个函数的时候就是新建了一个对象。
24                  25                 person.showSex  Function('alert("性别："+this.sex));
26                 
27                 28 29             
30             31             男32             Lyli女33             
34             alert(p1.showName == p2.showName); false
35             
36         37     38 >

 Person(name,1)">                 * 可以假想成系统会创建一个对象
                 * var this = new Object();
11                  12                 
13 ); 弹出Object
14                 
15                 .name 16                 .age 17                 
18                 .showName .showAge 24                 
25                                  * 假想返回了对象
                 * return this;
28                  30             
 Person();可以看到在外面new了在function里面就不用new了；在function里面new了，在外面就不用new了；O(∩_∩)O~
33             35 36             
37         38     39 >

             * Person构造函数：在JS中，构造函数其实就可以看成类，对某个对象的抽象定义。
             * @param {Object} name
             * @param {Object} age
11              12             13                 属性：每个对象的属性各不相同
17             在原型上添加方法，这样创建的所有对象都是用的同一套方法
            Person.prototype.showName             Person.prototype.showAge 27             28             
29 true
这里为什么两个对象的方法是相等的呢，可以看成如下
31  Person.prototype.showName); 32             
33         >

 5      6      7                  * 对数组原型扩展一个求和的方法；
         * 注意不能只加在某个数组对象上，那样的话只能在那个对象上适用。
10                  Array.prototype.sum  sum 0for( i;i<.length;i++){
                sum += [i];
16              sum;
        }
18         通过new Array() 和 [] 创建数组完全是一样的效果。
19          arr1  Array(20          arr2 1133445521         
        alert(arr1.sum());
        alert(arr2.sum());
24         
        alert(arr1.sum  arr2.sum); 26         alert(arr2.sum  Array.prototype.sum); 27     28 >