原型/原型链/构造函数/类

news/2024/11/23 4:06:21/

认识构造函数

为什么有构造函数

因为一般的创建对象的方式一次只能创建一个对象, 利用工厂模式创建的对象,对象的类型都是Object类型

什么是构造函数

构造函数也称之为构造器(constructor),通常是我们在创建对象时会调用的函数。
在其他面向对象语言里面,构造函数是存在于类中的的一个方法,称之为构造方法。
在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。构造函数首字母一般大写。

构造函数与普通函数的区别

  1. 名字:构造函数首字母建议大写;普通函数首字母建议小写
  2. this指向:在构造函数内部,this指向新对象。在普通函数内部,this指向的是全局对象
  3. 返回值:构造函数不用return返回值,默认返回新的实力对象。普通函数如果没有return返回值,返回undefined
  4. 调用:构造函数使用new关键词调用;普通函数直接调用

new操作符调用
new关键字会进行如下操作

  1. 创建一个简单的javaScript对象
  2. 为步骤一的新对象添加属性__proto__,并连接至构造函数的原型对象
  3. 将创建的对象作为this的上下文(上下文:当前执行环境的作用域)
  4. 如果函数没有返回对象则返回this

原型对象

什么是原型对象
prototype(原型对象就是一个容器)
可以让对象实例共享它包含的属性和方法

原型对象与函数与实力对象之间的关系

每个函数都有一个prototype属性指向原型对象。

每个原型对象都有一个constructor属性指向构造函数。

每个对象又有一个特殊的内置属性[[prototype]]指向原型对象,可以通过对象的__proto__属性或者通过Object.getPrototypeOf方法获取

在这里插入图片描述

原型链

什么是原型链
就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构.称为原型链

原型链查找
当我们从一个对象上获取属性,如果当前对象没有获取到,我们就会去它的原型上获取。
构造函数Object.prototype 是原型链的最末端。它的__proto__指向null

认识class定义类

在ES6(ECMAScript2015)新标准中使用了class关键字来直接定义类
基本上,ES6中的class可以看作只是一个语法糖

使用class声明类

  1. 类声明
    class Person {}
  2. 类表达式
    var Student = class {}

class的继承

  1. Class通过extends关键字实现继承
  2. 子类必须在constructor方法中调用super方法否者新建实例时会报错。
    这是因为子类方法没有自己的this对象,而是继承父类的this对象然后对其进行加工,如果不吊用super方法,子类就得不到this对象

super关键字

super这个关键字既可以当函数使用,也可以当对象使用

  1. 第一种情况,super作为函数调用时,代表父类的构造函数,作为函数时,super()只能用在子类的构造函数中
  2. 第二种情况,super作为对象时在普通方法中指向父类的原型对象;在静态方法中指向父类
    *ES6规定,通过super调用父类方法时,super会绑定子类的this

类的prototype属性和__proto__属性

  1. 子类的__proto__属性表示构造函数的继承,总是指向父类
  2. 子类prototype属性的__proto__属性表示方法的继承,总是指向父类的prototype

ES5继承机制与ES6继承机制的不同

ES5的继承实质上是先创造子类的实例对象,然后将父类的方法添加到this上面(Parent.apply(this))。ES6的继承机制完全不同,实质上是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this

实现继承的方案

原型链继承(以父类实例为原型)

  1. 首先定义父类构造函数
  2. 在父类构造函数上添加方法
  3. 定义子类构造函数
  4. 创建父类实例对象,并且作为子类构造函数的原型对象
  5. 在子类原型对象上添加内容
    在这里插入图片描述

弊端

  1. 通过直接打印的方式看不到继承属性
  2. 属性被多个对象共享,如果是引用类型会造成问题
  3. 不能给父类构造函数(Person)传递参数,因为这个对象是一次性创建的(无法定制化)

借用构造函数继承

  • 借用继承的做法很简单:在子类型构造函数内部调用父类构造函数,通过call()方法执行构造函数
    -

弊端

不能继承父类原型上的属性和方法

组合式继承

原型链继承 + 借用构造函数继承

在这里插入图片描述

弊端

  1. 会调用两次父类构造函数
  • 一次是在创建子类原型的时候
  • 一次是在子类构造函数内部
  1. 子类的实例会有两份父类属性
  • 一份在当前实例中
  • 一份在子类对应的原型对象中
  • 无需担心两份属性的访问问题,因为默认访问实例本身这一部分

原型式继承

  • 这种继承方法不是通过构造函数来实现的。
    与ES6中的Object.create()方法效果相同。
    最终目的是新对象的原型指向原对象

在这里插入图片描述

寄生式继承

寄生式继承的思路是结合原型式继承和工厂模式的一种方式
即创建一个封装继承过程的函数,该函数在内部以某种方式来增强对象,最后将这个对象返回

在这里插入图片描述

寄生组合式继承

组合式继承+原型继承+寄生继承
子类构造函数的原型是以父类构造函数原型为原型创建出来的新对象

能不能直接让子类型的原型对象 = 父类型的原型对象呢?不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改

在这里插入图片描述


http://www.ppmy.cn/news/67168.html

相关文章

C++实现简单工厂和工厂方法以及抽象工厂

工厂类型设计模式 把new给封装起来,即对象的创建封装起来 一种创建型设计模式 简单工厂 假设场景:用工厂来创建不同的汽车 优点:把对象的创建封装在一个接口函数里面,通过传入不同标识来返回不同的对象。客户不用自己负责创建对象(new)&…

【C语言】测试4 循环程序设计

若 x, i, j, k 都是 int 型变量,则计算下面表达式后, x 的值为( )。 x=( i=4 , j=16 , k=32); A. 4 B. 16 C. 32 D. 52 正确答案: C 以下能正确计算123* ⋯ 10 的程序段是( )。 A. do {i=1;s=1; s=si; i++; }while(i<=10); B. do {i=1;s=0; s=si; i++; }w…

【设计模式】模板方法模式--让你的代码更具灵活性与可扩展性

文章目录 前言模板方法模式的定义核心组成模板方法模式与其他设计模式的区别 代码实现抽象类具体类Client 经典类图spring中的例子 总结 前言 在软件开发中&#xff0c;设计模式是一种经过实践检验的、可复用的解决方案&#xff0c;它们可以帮助我们解决某一特定领域的典型问题…

PBDB Data Service:Fossil diversity over time (diagnostic) 化石多样性随时间的变化(诊断)

化石多样性随时间的变化&#xff08;诊断&#xff09; 描述用法参数需要以下参数之一以下参数指定要计数的内容以及时间分辨率以下参数选择要分析的实例 方法响应结果1&#xff1a;basic 格式术语表 描述 此操作提供了一种检查 occs/diversity 操作计数的分类群的方法。可以将…

正则化解决过拟合

本片举三个例子进行对比&#xff0c;分别是&#xff1a;不使用正则化、使用L2正则化、使用dropout正则化。 首先是前后向传播、加载数据、画图所需要的相关函数的reg_utils.py&#xff1a; # -*- coding: utf-8 -*-import numpy as np import matplotlib.pyplot as plt impor…

Linux 并发与竞争

一、并发与竞争 1、并发 Linux 系统是个多任务操作系统&#xff0c;会存在多个任务同时访问同一片内存区域&#xff0c;这些任务可 能会相互覆盖这段内存中的数据&#xff0c;造成内存数据混乱。 多线程并发访问&#xff0c; Linux 是多任务(线程)的系统&#xff0c;所以多线…

AMB300系列母线槽红外测温解决方案南沙XX养殖项目案例分享

安科瑞 耿敏花 一、 行业背景 随着当今社会的发展和用电量的急剧上升&#xff0c;现代化工程设施和装备的涌现&#xff0c;封闭式母线即母线槽因方便、节能、载流量大、机械强度高 、安装灵活、寿命长等特点&#xff0c;逐渐取代传统电缆&#xff0c;广泛应用于室内变压…

如何在VUE中使用andflow流程设计组件

andflow_js 是基于js、css、html开发的一个前端流程设计组件&#xff0c;目的是方便前端开发流程设计器。实现各种流程设计的样式风格&#xff0c;以及对设计结果的读取和显示&#xff0c;以便于与将设计结果提供给后端保存和执行。 由于VUE框架在许多实际项目中经常使用&…