Javascript原型对象prototype

最新推荐文章于 2024-09-15 16:55:13 发布

丷寒枫丷

最新推荐文章于 2024-09-15 16:55:13 发布

阅读量149

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_24432127/article/details/104407351

版权

Javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //1.
        //每次通过函数对象创建的对象，都是一个完全独立的对象，对象和对象之间是没有关系的 。类似C#中的对象
        //清空p1的sayHi方法 并不影响p2的sayHi调用，由此可见对象中的函数也是独立存在并且也是一个对象占用内存   
        // function Person(name, age , eamil){
        //     this.user_name = name;
        //     this.user_age = age;
        //     this.user_eamil = eamil;

        //      this.sayHi = function(){
        //          console.log('Hi! 我是:' + this.user_name );
        //      };

        //      this.sayHello = function(){
        //          console.log('Hello 我是:' + this.user_name + ' 我的邮箱是:' + this.user_eamil);
        //      };
        // }

        // var p1 = new Person('小明' , 18 , 'xiaoming@qq.com');
        // p1.sayHi = null;  //p1的sayHi的方法清空
        // //p1.sayHi();    
        // p1.sayHello();

        // var p2 = new Person('小红' , 20 , 'xiaohong@163.com');
        // p2.sayHi();      //p2d的sayHi方法正常调用
        // p2.sayHello();
    </script>

    <script>
        //2.
        //为了避免创建对象时对象里的方法大量占用内存 所以使用原型对象prototype 来使用公共方法sayHi
        // function Person(name, age, eamil) {
        //     this.user_name = name;
        //     this.user_age = age;
        //     this.user_eamil = eamil;
        // }

        // //在Person的
        // Person.prototype.sayHi = function () {
        //     console.log('Hi! 我是:' + this.user_name);
        // }

        // var p3 = new Person('aaa', 15, 'aaa@qq.com');
        // p3.sayHi = null; //p1的sayHi的方法清空
        // p3.sayHi();

        // var p4 = new Person('bbb', 15, 'bbb@163.com');
        // p4.sayHi(); //p2d的sayHi方法无法调用
    </script>

    <script>
        //3.
        //原型对象prototype 的成员是只读的
        function Person(name) {
            this.user_name = name;
        }

        Person.prototype.user_email = 'aaa.@163.com';
        Person.prototype.friends = ['张三', '李四', '王五'];
        Person.prototype.sayHi = function () {
            console.log('大家好 ， 我是：' + this.user_name + ' , 我的邮箱是:' + this.user_email);
        }

        var p5 = new Person('赵六');

        var p6 = new Person('小明');

        //p5重新赋值了user_email属性值 ， 但是p6依旧打印出原型对象中的user_email ，没有随着p5的改变而改变
        //这时 p5.user_email 属性不是prototype对象中的user_email 而是p5自己本身创建的user_email ，但是对象调用本身属性时  ，没有才会向上级查找
        p5.user_email = 'zhaoliu@qq.com';
        p5.sayHi();
        p6.sayHi();

        //p5 重新赋值了friends 属性 但是这次p5 和 p6打印出了同样的值
        //此时的 p5.friends[0] = '小红'; 执行代码 ，并不是p5创建了本身的新的friends属性，而是找到了prototype的friends 在栈堆中找到地址直接改变内存
        //所以prototype中的属性成员是只读的 ，但是可以找到栈堆中的地址 ，直接去改变内存中的值
        p5.friends[0] = '小红';
        console.log(p5.friends);
        console.log(p6.friends);
    </script>


    <script>
        //4.
        //通过prototype给系统类型增加扩展方法
        var msg = '道德经';
        String.prototype.AddDetil = function (){
            return this + '( 万经之王 )'
        }
        msg = msg.AddDetil();
        console.log(msg);

    </script>


</head>

<body>

</body>

</html>