32、构造函数

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.prototypeundefined,无法添加方法。

4、自有属性和共有属性

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| a. 自有属性: 保存在当前对象自身内部的属性,只归当前对象自己所有的属性。今后,凡是构造函数中this.后的属性,都会成为自对象的自有属性 |
| b. 共有属性: 保存在原型对象/父对象中的,归多个子对象共有的属性 |
| c. 获取属性值 : 无论自有属性,还是共有属性,都可用: ++++子对象++++ ++++.属性名++++ |
| d. 修改属性值: 1). 修改自有属性 的值: ++++子对象++++ ++++.属性名=属性值++++ 2). 修改共有属性 的值: i. 错误: 子对象.共有属性=属性值 如果强行给子对象不存在的属性赋值,不会去原型对象中查找属性。而是自动给当前子对象自己添加一个新属性。 如果新属性与原型对象中的属性同名,按就近原则,只要访问子对象.属性名时,永远只能使用自己自有的属性。不在去原型对象中查找。 ii. 正确: 只要想修改原型对象中共有的属性,都必须用原型对象来修改: ++++构造函数++++ ++++.++++ ++++prototype.共有属性++++ ++++=属性值++++ |

5、原型链

a. 什么是: 由多级父对象/原型对象逐级继承,形成的链式结构

b. 保存着: 一个对象可用的所有属性和方法!

c. 控制着: 对象属性和方法的使用顺序: 就近原则

1). 优先在当前对象内部查找自有属性

2). 当前对象内部没有想要的属性,才自动延_ proto _去父对象中查找!

相关推荐
远离UE423 分钟前
UE5 compute shader 原子加
开发语言·c++·ue5
C+-C资深大佬25 分钟前
C++ 显式类型转换详解:static_cast、dynamic_cast、const_cast、reinterpret_cast
开发语言·c++
小二·1 小时前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
KaMeidebaby1 小时前
卡梅德生物技术快报|抗体亲和力成熟工业化调控新机制:差异性浆细胞增殖工艺优化思路
java·开发语言·人工智能·算法·机器学习·架构·spark
luj_17682 小时前
心形曲线轨迹控制三大关键技术
c语言·开发语言·c++·经验分享·算法
Mininglamp_27182 小时前
Claude Code 封禁中国开发者之后:本地 AI 编程工具的替代方案实测
开发语言·人工智能·windows·开源软件·ai-native
思麟呀3 小时前
C++17(三)if constexpr+折叠表达式
开发语言·c++
醉城夜风~3 小时前
Java详解经典算法题:接雨水(三种实现方案+原理剖析)
java·开发语言·算法
qydz113 小时前
杰理开发基础知识(3)
开发语言·嵌入式开发·杰理科技
贾斯汀frank3 小时前
C# 15 类型系统改进:Union Types
开发语言·windows·c#