zoukankan      html  css  js  c++  java
  • 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属性也指向了构造函数
    

  • 相关阅读:
    数据库字段太多,批量快速建立实体类方法(适合大量字段建立实体类)
    SQL service 中的 ”输入SQL命令窗口“ 打开了 “属性界面” 回到 ”输入SQL命令窗口“
    计算机软件编程英语词汇集锦
    编程常用英语词汇
    svn上传和下载项目
    当启动tomcat时出现tomcat setting should be set in tomcat preference page
    Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor
    eclipse中选中一个单词 其他相同的也被选中 怎么设置
    Spring Boot的@SpringBootApplication无法引入的问题
    最全的SpringCloud视频教程
  • 原文地址:https://www.cnblogs.com/jianjie/p/12220801.html
Copyright © 2011-2022 走看看