欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程

程序员文章站 2022-05-03 09:02:17
未完待续。。。。。。 1：构造函数的使用 2：构造函数和对象的关系 3：使用JSON创建对象 4：使用构造函数创建对象 5：面向对象和面向过程的区别 6：类的概念 7：类和对象 8：JSON字符串和对象直接的转换 ......

一、构造函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象编程</title>
</head>
<body>
    <script>
        /*构造函数(构造函数命名一般此采用大驼峰式命名即驼峰式命名首字母大写)*/
        // 构造函数中的this指向的是即将生成的对象
        // ES5的语法
        function Es5Person(name) {
            this.name = name;
            this.sleep = function () {
                console.log('喜欢睡觉！');
            };
        }
        // ES6语法
        class Es6Person {
            constructor(name) {
                this.name = name;
            }
            //定义方法省略关键字，且方法直接绑定到原型对象
            sleep() {
                console.log('喜欢睡觉！');
            }
        }
        var personOne = new Es5Person('小明');
        var personTwo = new Es6Person('小张');

        console.log(personOne);
        console.log(personTwo);
    </script>
</body>
</html>

从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程

二、构造函数和对象的关系

 对象是由构造函数new 出来的，即对象是构造函数的实例。

三、使用JSON创建对象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象编程</title>
</head>
<body>
    <script>
        // json创建对象的方式（适合单个对象）
        const  liuneng = {
            name: '刘能',
            sleep: function () {
                console.log('喜欢睡觉！');
            }
        };
        console.log(liuneng);
    </script>
</body>
</html>

四、面向对象和面向过程的区别

1)面向过程：面向过程专注于如何去解决一个问题的过程步骤。编程特点是由一个个函数去实现每一步的过程步骤，没有类和对象的概念。
2)面向对象：专注于由哪一个对象来解决这个问题，编程特点是出现了一个类，从类中拿到对象，由这个对象去解决具体问题。
 对于调用者来说，面向过程需要调用者自己去实现各种函数。而面向对象，只需要告诉调用者，对象中具体方法的功能，而不需要调用者了解方法中的实现细节。  

七、类和对象

   类 ：对一群具有相同特征的对象的集合的描述；

对象：真实存在的对象个体；

对象和类的理解：面向对象，而不是面向类。 

　　类只是我们用来组织对象和构造程序的一种形式，它本质上源自于人们对于现实世界中的一种概念映射，即：凡是具有共同点的部分便可以抽象成一类，抽象层次越高，类在继承体系中的层级越高（或者说越低，看你从哪个方向来看了，总之就是越来越基础，直到成为一切衍生类型的始祖）。 

　　在 Javascript 里，一切对象归根结底都是源自于 Object，如果你扩展（重载）了 Object 的原型（Javascript 基于原型继承），那么其他的一切对象都可以获得这些扩展（重载）。所以在 Javascript 的世界里，类不是必须的，没有类一样可以面向对象。

　　Javascript中function作为构造函数时，就是一个类（类本质也是个函数），搭配上new操作符，可以返回一个对象。 

　　在JavaScript中采用构造函数来模拟类，只是为了能在应用的业务领域里重现基于类语言的那种类型化（更容易和我们看待事物的方式相匹配），但是由于一些语言设计上的不足甚至是错误，使得 Javascript 很难完整的实现经典类型系统。继承靠原型链，多态靠弱类型，封装靠闭包。 

八、JSON字符串和对象直接的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象编程</title>
</head>
<body>
    <script>
    // 对象转字符串(方法不会被序列化，只保留属性)
    var obj1 = {name: '张三', hello: function () {}};
    console.log(JSON.stringify(obj1));

    // 字符串转对象（字符串内容要用双引号包裹，单引号包裹无法识别）
    var obj2 = '{"name": "张三"}';
    console.log(JSON.parse(obj2));
    </script>
</body>
</html>

 附录：类实现模态框

　　待补充......

上一篇： HTML5 3d可以使用的方法和属性

下一篇： 2018蓝旭后端培训之JDBC

推荐阅读