黑马程序员技术交流社区

标题: Javascript基础加强 [打印本页]

作者: Clover_ZhuWQ 时间: 2017-10-29 17:55
标题: Javascript基础加强
本帖最后由 Clover_ZhuWQ 于 2017-10-29 19:01 编辑

第一章 Javascript面向对象（上）

本章主要对Javascript面向对象的用法做详细讲解。

1.1 什么是对象

什么是对象？对象是对属性、方法的封装。每一个对象中，都是以属性名:属性值的形式存在。

一言以蔽之：对象就是键值对的集合。

1.2 1.2 什么是面向对象

这个问题很难回答，但这也是面试中最常见的问题。

要搞清楚这个问题，必须弄清楚面向对象和面向过程的区别：

面向过程：完成一件事情的所有步骤都亲力亲为，一步一步来完成。例如要吃饺子，就必须自己剁馅儿、和面、擀饺子皮儿、包饺子...

面向对象：完成一件事情，直接去找能做这件事的人。例如吃饺子，直接找老婆（如果没有就去饺子馆吧）。

面向过程：是事件的执行者。

面向对象：是指挥者。

一言以蔽之：面向对象就是对面向过程的封装！

1.3 为什么要面向对象

问这个问题，其实就是在问面向对象有什么好处，有哪些好处呢？

1）提高代码的复用性，简化开发

2）使代码结构清晰

3）在JS中有一个特殊的作用：防止代码污染

什么是代码污染？请看下面的实例代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Title</title>

    </head>

    <body>

    <script>

    // 演示:代码污染

    // 引入第一个JS文件

    function sum(a,b) {

         return a + b; 

    }

    </script>

    <script>

     // 引入第二个JS文件

    // 定义一个变量sum

     var sum = 100;

    </script>



    <script>

    // 调用求和函数进行求和

   console.log(sum(12, 5));

   </script>

   </body>

   </html>

如何解决代码污染？
我们可以把定义的方法放到对象中，然后用对象调用自己的方法：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

   <html lang="en">

   <head>

    <meta charset="UTF-8">

    <title>Title</title>

    </head>

   <body>

    <script>

   // 演示:代码污染

    // 引入第一个JS文件

   // 在对象里面定义一个求和函数

   var itcast = {

        sum : function(a,b) {

         return a + b;

       }

   };

   </script>

  <script>

  // 引入第二个JS文件

   // 定义一个变量sum,因为sum函数已经变成了对象的属性

   var sum = 100;

   </script>



   <script>

    // 调用求和函数进行求和

   console.log(itcast.sum(12, 5));

   </script>

  </body>

   </html>

1.4 创建对象的两种方式

需求：创建一个人，要求有姓名、年龄、性别、sayHello方法

1.4.1 对象的直接量

l 做法：

在定义对象的时候，直接使用JSON格式来定义一个JS对象，并且为这个对象赋值属性和方法，称为对象的直接量（字面量）

这种方式创建的对象，默认是Object类型的对象

l 案例代码：

[JavaScript] 纯文本查看 复制代码

    <script>

        // 演示：通过对象的直接量的形式来创建对象

        // 需求：创建一个人，要求有姓名、年龄、性别、sayHello方法

        // JSON结构

        var p = {

            // 属性

            name : 'Jack',

            age : 38,

            gender : '妖',

            // 方法

            sayHello : function() {

                // this 当前对象

                console.log('Hello, I am: ' + this.name);

            }

        };



        // 访问属性以及方法

        console.log(p.name);

        console.log(p.age);

        console.log(p.gender);



        p.sayHello();

    </script>

l 效果

[attach]193524[/attach]

l 缺陷

n 只能使用1次，无法重复利用，每次都要编写相同代码创建新对象

l 使用场景

n 对象只需要一次使用的时候。比如作为传递参数;

n 自己封装JS框架（函数）的时候。

1.4.2 构造函数创建对象

l 构造函数创建对象的一般步骤：

1) 通过function指定一个构造函数，与普通函数没差别，只是约定首字母大写以区分

2) 然后在构造函数中通过this.属性名=属性值来完成对象属性初始化。

3) 最后通过new关键字创建对象（实例）

l 案例代码：

[JavaScript] 纯文本查看 复制代码

    <script>

        // 使用构造函数的形式创建对象

        // 1. 定义一个构造函数(类)，构造函数其实就是普通的函数，构造函数首字母大写

        function Person(name,age,gender) {

            // 2. 在构造函数里面使用this.属性名=属性值的形式来初始化属性

            this.name = name;

            this.age = age;

            this.gender = gender;

            this.sayHello = function() {

                console.log('Hello, I am : ' + this.name);

            }

        }

        // 3. 使用new关键字来创建对象(实例)

        var p = new Person('Jack',38,'妖');

        console.log(p.name);

        p.sayHello();



        var p2 = new Person('Rose',18,'female');

        console.log(p2.name);

        console.log(p2.age);

        console.log(p2.gender);

        p2.sayHello();



        console.log(p.name == p2.name); // false

        console.log(p.sayHello == p2.sayHello); // false

    </script>

l 效果：

[attach]193528[/attach]

问题：对象中的函数是否相同？

测试：

[JavaScript] 纯文本查看 复制代码

        // 两个对象中的sayHello方法是否相等

        console.log(p.sayHello == p2.sayHello); // false

结果：

[attach]193530[/attach]

事实上，查看内存中对象的属性，发现p1和p2中各有一份 sayHello 方法： [attach]193531[/attach]

结论：

通过上面的实验我们发现，对象中的所有属性，包括定义的方法，都是每个对象独有的，不会共享。

属性不共享可以理解，但是方法都是一样的，如果也不共享，那么就是对内存的极大浪费。

l 优势：

u 对象可以重复创建

l 缺点：

u 对象中相同的方法，无法实现共享，内存占用高

1.1 1.5 对象的原型（prototype）

1.5.1 原型的概念

l 什么是prototype ?

在JS中，每一个构造函数都会有一个prototype（也是一个对象）属性，任何由同一个构造函数创建的对象，都会共享这个prototype对象，并且可以具备这个prototype的所有属性（成员）。

[attach]193532[/attach]

1.5.2 原型的基本使用

l 没有设置原型的时候

一开始，我们定义一个空的构造函数，并且只给出了name 属性，尝试打印对象的 age属性，结果是undefined。因为没有该属性

案例代码：

[AppleScript] 纯文本查看 复制代码

    <script>

        // 演示：原型的基本使用

        // 定义构造函数

        function Person(name) {

            this.name = name;

        }



        var p = new Person('Jack');

        console.log(p.name);

        console.log(p.age);



        var p2 = new Person('Rose');

        console.log(p2.name);

        console.log(p2.age);

    </script>

结果：

打印控制台中是undefined的。

[attach]193533[/attach]

查看对象属性也是只有name属性，没有age：

[attach]193534[/attach]

l 使用原型给构造函数添加新的属性

在对象定义后，使用prototype添加新属性：

[JavaScript] 纯文本查看 复制代码

    <script>

        // 演示：原型的基本使用

        // 定义构造函数

        function Person(name) {

            this.name = name;

        }



        // 通过原型去添加一个共享属性

        Person.prototype.age = 20;



        var p = new Person('Jack');

        console.log(p.name);

        console.log(p.age);



        var p2 = new Person('Rose');

        console.log(p2.name);

        console.log(p2.age);

    </script>

打印控制台已经有结果了：

此时查看对象的属性：

发现p1和p2对象中虽然依然没有age，但是构造函数Person的prototype中已经有age了，又因为对象会共享prototype的成员，所以每个对象都可以使用age属性了！

l 给对象从原型中继承的属性赋值

尝试修改对象中，继承自prototype的属性值age：

[JavaScript] 纯文本查看 复制代码

        // 尝试给从对象继承过来的属性赋值

        p.age = 30;

        // 我们发现p.age 是新值，而p2还是原来的值

        console.log(p.age);  // 30

        console.log(p2.age); // 20

结果：p1的age已经变为30， p2没变

问题，既然是共享的属性，那么为什么p1修改了，p2值没变？

查看内存中的状态：

我们发现：prototype中的age没有改变，而是在对象p1中新增了自己的age属性，并且赋值为30

结论：当原型和对象自身都有相同属性时，对象中的属性优先！

l 总结

1) 当我们访问对象中的属性时，默认会先在当前对象中查找；如果在当前对象找不到，就会去对象的prototype中查找

a) 事实上，prototype也是对象，因此在prototype对象中找不到，会到prototype对象的prototype中找，逐级向上形成“原型链”，原型链的最顶级的是Object.prototype

b) 那么Object.prototype也是对象，再向上还有吗？没有了，再向上是null。Object.prototype就是原型链的根

2) 修改对象的属性，不会修改prototype中的属性，而是在对象中创建新的属性

3) 某些浏览器支持__proto__属性，与prototype是同一个东西，但是某些浏览器还不支持。所以一般不要用

1.5.3    通过原型改造构造函数
为了减少对象内存占用，我们一般创建构造函数的时候，会把经常变化的属性在构造函数中声明，每个对象都有自己的属性。然后把公用的不变化的东西（通常是函数）通过原型来添加。

[JavaScript] 纯文本查看 复制代码

    <script>

        // 通过原型改造构造函数

        // 1. 定义一个构造函数(类)，构造函数其实就是普通的函数，构造函数首字母大写

        function Person(name,age,gender) {

            // 2. 在构造函数里面使用this.属性名=属性值的形式来初始化属性

            this.name = name;

            this.age = age;

            this.gender = gender;

        }

        // 通过原型去添加一个共享方法

        Person.prototype.sayHello = function() {

            console.log('Hello, I am :' + this.name);

        };



        // 3. 使用new关键字来创建对象(实例)

        var p = new Person('Jack',38,'妖');

        console.log(p.name);

        p.sayHello();



        var p2 = new Person('Rose',18,'female');

        console.log(p2.name);

        console.log(p2.age);

        console.log(p2.gender);

        p2.sayHello();



        console.log(p.name == p2.name); // false

        console.log(p.sayHello == p2.sayHello); // false

    </script>

验证结果：

每个对象都可以调用sayHello方法，证明共享了方法。各个对象的sayHello方法判断是相等的。证明内存中只有一份。

总结构造函数创建对象的方法：

1、构造函数里面写变化属性。

2、原型上去添加方法。

1.5.4 通过原型扩展JS原生对象

事实上不仅仅我们自己定义的对象有原型，JS中原生的对象也有原型。我们可以通过原生对象的原型对原生的JS进行扩展！

原生的JS中，Array对象并没有sum方法，尝试调用报错：

[JavaScript] 纯文本查看 复制代码

    // 使用原型来扩展原生JS对象

    var arr = [10,20,30];

    // 直接调用arr.sum方法，报错

    console.log(arr.sum()); // sum is not a function

我们使用原型进行扩展：

[JavaScript] 纯文本查看 复制代码

    <script>

        // 使用原型来扩展原生JS对象

        var arr = [10,20,30];

        // console.log(arr.sum());



        // 封装一个对数组求和的方法

        function sum(arr) {

            // 求和

            var res = 0;

            for (var i = 0; i < arr.length; i++) {

                res += arr;

            }

            return res;

        }

        console.log(sum(arr));

        // 不好 不够智能

        // 通过原型给数组添加一个sum的方法

        Array.prototype.sum = Array.prototype.sum || function() {

            var res = 0;

            for (var i = 0; i < this.length; i++) {

                res += this;

            }

            return res;

        };

        console.log(arr.sum());

        console.log(arr2.sum());



    </script>

结果：

1.png (5.21 KB, 下载次数: 12)

下载附件

2017-10-29 18:25 上传

1.png (79.32 KB, 下载次数: 12)

1.png (13.33 KB, 下载次数: 21)

1.png (15.48 KB, 下载次数: 25)

1.png (6.79 KB, 下载次数: 12)

1.png (14.97 KB, 下载次数: 12)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2