目录
  1. 1. 构造函数
    1. 1.1. new 在执行时会做四件事情
    2. 1.2. 成员
    3. 1.3. 构造函数的问题
    4. 1.4. 构造函数原型 prototype
      1. 1.4.1. 问答
    5. 1.5. 对象原型 __ proto __
    6. 1.6. constructor 构造函数
    7. 1.7. 构造函数、实例、原型对象三者之间的关系
    8. 1.8. 原型链
es6构造函数之实例&原型对象

构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对
象成员变量赋初始值,它总与new一起使用。我们可以把对象
中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

在 JS 中,使用构造函数时要注意以下两点:

  • 构造函数用于创建某一类对象,其首字母要大写
  • 构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情

  • 在内存中创建一个新的空对象。
  • 让 this 指向这个新的对象。
  • 执行构造函数里面的代码,给这个新对象添加属性和方法。
  • 返回这个新对象(所以构造函数里面不需要 return )。

成员

JavaScript的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this上添加。通过这两种方式添加的成员,就分别称为==静态成员==和==实例成员==。

  • 静态成员:在构造函数本上添加的成员称为静态成员,只能由构造函数本身来访问 。
  • 实例成员:在构造函数内部创建的对象成员称为实例成员,只能由实例化的对象来访问。

    ​ 不可以通过构造函数来访问实例成员。

    1
    function Star(){
    2
        this.name=name
    3
        this.age=age
    4
        this.sing=function(){
    5
            console.log(SSS)
    6
        }
    7
    }
    8
    var XXX=new Star("XX","YY")
    9
    //1.实例成员就是构造函数内部通过this添加的成员
    10
    name age sing 就是实例成员
    11
    // 实例成员只能通过实例化的对象来访问
    12
    console.log(XXX.name);
    13
    XXX.sing();
    14
    // console.log(Star.uname);  
    15
    //不可以通过构造函数来访问实例成员
    16
    // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
    17
    Star.sex = '男';
    18
    // 静态成员只能通过构造函数来访问
    19
    console.log(Star.sex);
    20
    console.log(ldh.sex); // 不能通过对象来访问

    构造函数的问题

    存在浪费内存的问题

    1
    function Star(uname, age) {
    2
        this.uname = uname;
    3
        this.age = age;
    4
        this.sing = function() {
    5
            console.log('我会唱歌');
    6
        }
    7
    }
    8
    var ldh = new Star('刘德华', 18);
    9
    var zxy = new Star('张学友', 19);

构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。
  1. JavaScript 规定,每一个构造函数==都有一个 prototype==
    属性,指向另一个对象。注意这个prototype就是一个对
    象,这个对象的所有属性和方法,都会被构造函数所拥有。

  2. 我们可以把那些不变的方法,直接定义在 prototype
    对象上,这样所有对象的实例就可以共享这些方法。

  3. 一般情况下,我们把公共属性定义到构造函数里面,公共的方法我们放到原型对象身上。

问答

  1. 原型是什么 ?
    一个对象,我们也称为 prototype 为原型对象。
  2. 原型的作用是什么 ?
    共享方法。

对象原型 __ proto __

对象都会有一个属性 __ proto __ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __ proto __ 原型的存在。

1
<script>
2
        function Star(uname, age) {
3
            this.uname = uname;
4
            this.age = age;
5
        }
6
        
7
        Star.prototype.sing = function() {
8
            console.log('我会唱歌');
9
        }
10
        
11
        var ldh = new Star('刘德华', 18);
12
        var zxy = new Star('张学友', 19);
13
        ldh.sing();
14
        
15
        console.log(ldh); // 对象身上系统自己添加一个 
16
        __proto__ 指向我们构造函数的原型对象 prototype
17
        
18
        console.log(ldh.__proto__ === Star.prototype);
19
        // 方法的查找规则: 首先先看ldh 对象身上是否有 
20
        sing 方法,如果有就执行这个对象上的sing
21
        // 如果没有sing这个方法,因为有__proto__的存在,就
22
        去构造函数原型对象prototype身上去查找sing这个方法
23
    </script>

  • proto对象原型和原型对象 prototype 是等价的
  • proto对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype

constructor 构造函数

  1. 对象原型( __ proto __)和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。

  2. constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

  3. 一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数。

构造函数、实例、原型对象三者之间的关系

1
<script>
2
       function Star(uname, age) {
3
           this.uname = uname;
4
           this.age = age;
5
       }
6
       // 很多情况下,我们需要手动的利用constructor 
7
       这个属性指回原来的构造函数
8
       // Star.prototype.sing = function() {
9
       //     console.log('我会唱歌');
10
       // };
11
       // Star.prototype.movie = function() {
12
       //     console.log('我会演电影');
13
       // }
14
       Star.prototype = {
15
           // 如果我们修改了原来的原型对象,给原型对象赋
16
           值的是一个对象,则必须手动的利用constructor指
17
           回原来的构造函数
18
           constructor: Star,
19
           sing: function() {
20
               console.log('我会唱歌');
21
           },
22
           movie: function() {
23
               console.log('我会演电影');
24
           }
25
       }
26
       var ldh = new Star('刘德华', 18);
27
       var zxy = new Star('张学友', 19);
28
       console.log(Star.prototype);
29
       console.log(ldh.__proto__);
30
       console.log(Star.prototype.constructor);
31
       console.log(ldh.__proto__.constructor);
32
   </script>

原型链

  1. 只要是对象就有proto 原型, 指向原型对象

  2. 我们Star原型对象里面的proto原型指向的是 Object.prototype

  3. 我们Object.prototype原型对象里面的proto原型 指向为 null

文章作者: Byron
文章链接: https://byronk.top/2019/06/06/es6%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B9%8B%E5%AE%9E%E4%BE%8B&%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 byron's | BLOG
打赏
  • 微信
  • 支付宝

评论