32、构造函数

news2025/3/17 8:43:36

1、用构造函数反复创建多个相同结果的对象

问题

如果想反复创建多个相同结构，但是内容不同的对象时，用{}创建会代码重复，及其不便于维护！

解决

今后只要想反复创建同一类型的多个相同结构不同内容的对象时，都用构造函数来创建

专门描述同一类型所有对象的同一结构的函数

如何: 2步

i. 先定义构造函数

function 类型名(形参, ...){

this.新属性名=形参;

... = ... ;

~~this.新方法名~~=~~function(){~~
~~... this.属性名~~ ~~...~~

}

ii. 调用构造函数创建新对象

var 新对象名=new 类型名();

优点

代码重用，便于维护！

2、new构造函数时都做了什么?

1.创建一个空对象
var obj = {};

2.链接到原型,将obj的proto指向构造函数的prototype
obj._proto = 类名._prototype;

4.绑定this值,让function函数的this指向obj,并执行函数体
类名.call(obj);

5.返回这个对象

3、构造函数的问题

如果将方法的定义放在构造函数内，每调用一次构造函数，创建一个新对象，都会反复创建相同的方法的副本！——浪费内存！

今后，所有多个子对象共用的属性值或方法定义，都要添加到原型对象中: 强行赋值

构造函数.prototype.新成员=新值。

<script>
    //定义构造函数描述所有学生对象的同一结构
    function Student(sname, sage){
      this.sname=sname;
      this.sage=sage;
      //构造函数中不要包含方法定义！
    }
    //输出Student类型的原型对象
    console.log(Student.prototype);

    //向Student的原型对象中强行添加新共有方法
    Student.prototype.intr=function(){
      console.log(`I'm ${this.sname}, I'm ${this.sage}`)
    }
    console.log(Student.prototype);

    //反复调用构造函数创建lilei和hmm
    var lilei=new Student("Li Lei",11);
    var hmm=new Student("Han Meimei",12);

    //亲子鉴定   
    console.log(
    //李磊的 爹     是不是Student的老公
      lilei.__proto__==Student.prototype
    );//true

    console.log(
      //李磊的爹    是不是hmm的爹
      lilei.__proto__==hmm.__proto__
    );//true

    console.log(lilei);

    console.log(hmm);

    lilei.intr();

    hmm.intr();
</script>

注：根据 ES6 规范，箭头函数不能用作构造函数，使用new调用会抛出错误。其次，箭头函数是否有prototype属性？没有，普通函数才有prototype属性，箭头函数没有，所以person.prototype是undefined，无法添加方法。