js高级——面向对象，创建对象、构造函数、new、原型

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/118370549

本文介绍了面向对象的概念及其与面向过程的关系，详细解释了面向对象的三大特性：封装、继承和多态。并通过实例展示了四种创建对象的方法：系统构造函数、字面量、工厂函数及自定义构造函数，并探讨了如何利用原型来优化内存使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面向对象不是用来代替面向过程的，面向对象封装了面向过程

面向对象=面向对象+面向过程

面向对象的三大特征：封装、继承、多态

封装函数解决了代码重复的问题，但是造成了一定的全局污染问题

创建对象的四种写法

1.系统构造函数：new Object

2.字面量

3.工厂函数

4.自定义构造函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建对象</title>
</head>

<body>

    <script>
        // 1.系统构造函数创建对象
        /* var obj = new Object();
        obj.uname = "zs";
        obj.age = 20;
        obj.sayHi = function() {
                console.log("hello");
            } */
        // 2.字面量创建对象
        /* var obj = {
            uname: "zs",
            age: 22
        }
        console.log(obj);
        console.log(obj.uname, obj.age); */
        // 3.工厂函数创建对象，函数要有对应的参数,需要return返回所创建的对象
        function person(uname, age) {
            // 这里面可以用系统构造函数或者字面量创建对象
            // var obj = new Object();
            // obj.uname = uname;
            // obj.age = age;
            var obj = {
                uname: uname,
                age: age
            }
            return obj
        }
        console.log(person("zs", 20));
        // 4.自定义构造函数创建对象,构造函数一定要用new
        /* function Person(uname, age) {
            this.uname = uname
            this.age = age
        }
        var obj = new Person("zs", 22)
        console.log(obj);
        console.log(obj.uname, obj.age); */
    </script>
</body>

</html>

构造函数：

1.函数首字母大写（规范）

2.必须要和new一起使用

new做了四件事：

var a = new Person();

1.创建一个空对象

2.将this指向创建的空对象

3.执行构造函数内的代码

4.把新创建的对象返回

若是没有new,则返回一个undefined

函数必须要有返回值，return返回一个值或者对象。函数若是没有返回值，得到的结果就是undefined

自定义构造函数创建对象的问题：

构造函数创建对象,里面若是有方法，有多少个对象就会有多少个方法，每个方法开辟一个空间，严重浪费内存空间

术语：

1.实例（实例对象）：通过构造函数创建出来的对象，实例对象可以有多个

2.实例化：构造函数创建对象的过程

3.成员：对象中的属性和方法的统称

原型

1.任何函数都有prototype属性

2.函数的prototype属性值是一个对象，把这个对象叫做原型（原型对象）

3.原型的作用：通过构造函数创建的实例对象，可以直接访问构造函数的prototype属性上的任意成员

解决构造函数创建对造成的内存浪费问题的最终解决方法：使用原型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Person() {}
        var p1 = new Person();
        Person.prototype.sayHi = function() {
            console.log(9999);
        }
        Person.prototype.age = 22
        console.dir(Person) //f Person是一个构造函数
        console.dir(p1) //这是一个对象
            // 前面是构造函数，就是原型对象
        Person.prototype.sayHi()
            // 前面是对象，就是对象原型
        p1.__proto__.sayHi()
        console.log(Person.prototype === p1.__proto__); //true
        Person.prototype.age = 2000
        console.dir(Person)
    </script>
</body>

</html>