• 232 constructor构造函数,构造函数、实例、原型对象的三角关系


    1.6 constructor构造函数

    对象原型( __proto__)和构造函数原型对象(prototype)里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为`它指回构造函数本身`。
    
    `constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数`。
    
    一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor  就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
    

    如果我们修改了原来的原型对象, 给原型对象赋值的是一个对象, 则必须手动的利用constructor指回原来的构造函数如:

     function Star(uname, age) {
         this.uname = uname;
         this.age = age;
     }
     // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
     Star.prototype = {
     // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
       constructor: Star, // 手动设置指回原来的构造函数
       sing: function() {
         console.log('我会唱歌');
       },
       movie: function() {
         console.log('我会演电影');
       }
    }
    var zxy = new Star('张学友', 19);
    console.log(zxy)
    

    以上代码运行结果,设置constructor属性如图:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            function Star(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
            // Star.prototype.sing = function() {
            //     console.log('我会唱歌');
            // };
            // Star.prototype.movie = function() {
            //     console.log('我会演电影');
            // }
    
            // (1)prototype.xxx:是往prototype上添加新的方法,(2)prototype = xxx:是赋值操作,用xxx把之前的prototype全部覆盖掉了,于是原来的构造函数上就没有 constructor 这个属性了。
            Star.prototype = {
                // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
                constructor: Star,
                sing: function() {
                    console.log('我会唱歌');
                },
                movie: function() {
                    console.log('我会演电影');
                }
            }
            var ldh = new Star('刘德华', 18);
            var zxy = new Star('张学友', 19);
            console.log(Star.prototype); // {constructor: ƒ, sing: ƒ, movie: ƒ}
            console.log(ldh.__proto__); // {constructor: ƒ, sing: ƒ, movie: ƒ}
            console.log(Star.prototype.constructor);
            console.log(ldh.__proto__.constructor);
        </script>
    </body>
    
    </html>
    


    1.7 构造函数、实例、原型对象的三角关系

    1.构造函数的prototype属性指向了构造函数原型对象
    2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
    3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型__proto__的constructor属性也指向了构造函数
    

  • 相关阅读:
    深入理解幂等性(转)
    Mysql数据库表结构设计准则
    nodejs以对象做对象的key导致value一直被覆盖
    数组常用方法
    css选择器总结
    CSS 选择器权重计算规则
    ElementUI select
    linux-sed命令
    vue 组件数据传递:
    vue视频: 自定义指令 && 拖拽 && 自定义键盘信息
  • 原文地址:https://www.cnblogs.com/jianjie/p/12220801.html
Copyright © 2020-2023  润新知