构造函数与原型：JavaScript对象实例化中的方法存储策略-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60297110/article/details/120252804
<!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(name, sex, age) {
        //     this.name = name;
        //     this.sex = sex;
        //     this.age = age;
        //     //创建一个方法可以显示姓名
        //     /**
        //      * 结论：
        //      *    在构造函数中，为this添加方法，会让每一个实例单独存储一份
        //      *    即使方法的实现是一样的，但实例中的函数不会是同一个
        //      *    没有必要让，两个或多个在实例中一样的函数，占用多个存储空间
        //      *  解决方案：
        //      *     一：将函数定义在外面
        //      * **/
        //     // this.getName = function () {
        //     //     console.log('姓名:' + this.name);
        //     // }
        //     //一.1：
        //     this.getName = getName;
        // }
        // //一.2:
        // function getName() {
        //     console.log('姓名:' + this.name);
        // }
        // //创建人
        // var p1 = new Person('小白', '男', 20);
        // var p2 = new Person('小红', '女', 20);
        // p1.getName();//姓名:小白
        // p2.getName();//姓名:小红
        // console.log(p1, p2, p1.getName() === p2.getName());//true

        //二： //定义类
        // function Person(name, sex, age) {
        //     this.name = name;
        //     this.sex = sex;
        //     this.age = age;
        //     //创建一个方法可以显示姓名
        //     /**
        //      * 结论：
        //      *      在构造函数中，为this添加方法，会让每一个实例单独存储一份
        //      *      即使方法的实现是一样的，但实例中的函数不会是同一个
        //      *      没有必要让，两个或多个在实例中一样的函数，占用多个存储空间
        //      *  解决方案：
        //      *     一：将函数定义在外面
        //      *        问题：把方法放在全局，会污染全局作用域
        //      *     二：将全局的方法，放在对象中，减少全局变量
        //      *     三：在全局变量中，一个变量都不定义
        //      *         我们可以将obj对象作为属性存储在构造函数上
        //      * **/
        //     //二.1：
        //     this.getName = obj.getName;
        //     this.getSex = obj.getSex;
        //     this.getAge = obj.getAge;
        // }
        // //二.2
        // var obj = {
        //     getName: function () {
        //         console.log('姓名:' + this.name);
        //     },
        //     getSex: function () {
        //         console.log('性别:' + this.sex);
        //     },
        //     getAge: function () {
        //         console.log('年龄:' + this.age);
        //     }
        // }
        // //创建人
        // var p1 = new Person('小白', '男', 20);
        // var p2 = new Person('小红', '女', 18);
        // // p1.getName();
        // // p2.getAge('小红', '女', 20);
        // //👇法一、法二：皆为true,t,t
        // console.log(p1.getSex() === p2.getSex(), p1.getName() === p2.getName());

        // //三：定义类
        // function Person(name, sex, age) {
        //     this.name = name;
        //     this.sex = sex;
        //     this.age = age;
        //     //创建一个方法可以显示姓名
        //     /**
        //      * 结论：
        //      *      在构造函数中，为this添加方法，会让每一个实例单独存储一份
        //      *      即使方法的实现是一样的，但实例中的函数不会是同一个
        //      *      没有必要让，两个或多个在实例中一样的函数，占用多个存储空间
        //      *  解决方案：
        //      *     一：将函数定义在外面
        //      *       问题：把方法放在全局，会污染全局作用域
        //      *     二：将全局的方法，放在对象中，减少全局变量
        //      *     三：在全局变量中，一个变量都不定义
        //      *         我们可以将obj对象作为属性存储在构造函数上
        //      *       问题：Person会耦合，外部函数名和内部的指向名 
        //      **/
        //     //三.1：
        //     this.getName = Person.obj.getName;
        //     this.getSex = Person.obj.getSex;
        //     this.getAge = Person.obj.getAge;
        // }
        // //三.2
        // Person.obj = {
        //     getName: function () {
        //         console.log('姓名:' + this.name);
        //     },
        //     getSex: function () {
        //         console.log('性别:' + this.sex);
        //     },
        //     getAge: function () {
        //         console.log('年龄:' + this.age);
        //     }
        // }
        // //创建人
        // var p1 = new Person('小白', '男', 20);
        // var p2 = new Person('小红', '女', 18);
        // // p1.getName();
        // // p2.getAge('小红', '女', 20);
        // //👇法一、法二：皆为true,t,t
        // console.log(p1, p2);
        // console.log(p1.getSex() === p2.getSex(), p1.getName() === p2.getName());

        //四：原型
        /**
         * js为构造函数提供了 原型对象 ：prototype，
         *    这是函数天生存在的，并且它是一个对象，可以存储数据和方法
         *    原型对于普通函数没有意义，即无法使用
         *      但是对于构造函数而言，
         *          每一个构造函数的实例化对象都可以访问原型中的属性与方法
         *          每一个构造函数都有一个隐藏的属性指向该原型对象
         *             通过 __proto__ 属性来访问原型对象
         *      原型对象就像一个公用的区域，所有的实例化对象都可以直接访问。
         *    在创建构造函数时，可以将 所有的方法与数据 ，写在原型对象中，
         *        这样方法不会污染全局作用域，每一个实例化对象都可以访问
         *        每一个实例化对象访问一个属性或方法时，会率先自身查找，有的化使用自身的；没有的化，去原型对象中查找
         * 
         * 原型对象的作用：为实例化对象共享方法与属性
         * **/

        function Person(name, sex, age) {
            this.name = name;
            this.sex = sex;
            this.age = age;
        }
        //四.1 直接为原型对象添加属性，让实例共享
        Person.prototype.getName = function () {
            console.log('姓名:' + this.name);
        }
        Person.prototype.getSex = function () {
            console.log('性别:' + this.sex);
        }
        Person.prototype.getAge = function () {
            console.log('年龄:' + this.age);
        }
        //创建人
        var p1 = new Person('小白', '男', 20);
        var p2 = new Person('小红', '女', 18);
        p1.getName();//姓名:小白
        p1.getSex();//男
        p2.getAge();//年龄:18
        console.log(p1, p2);
        //👇 皆为true,t,t
        console.log(p1.getSex() === p2.getSex(), p1.getName() === p2.getName());
    </script>
</body>

</html>
js的原型
