CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 简介

  • JavaScript 基础知识

  • 数据类型

  • 函数进阶内容

    • 构造函数
      • 前言
      • 对象的概念
      • 构造函数
      • new命令
        • 基本原理
        • 基本用法
    • this原理
    • 递归和堆栈
    • 全局对象
    • 装饰器模式和转发,call/apply
    • Rest 参数与 Spread 语法
    • 函数对象,NFE
    • 函数绑定
    • 变量作用域,闭包
    • new Function 语法
    • 深入理解箭头函数
    • 旧时的 "var"
    • 调度:setTimeout 和 setInterval
  • 对象属性配置

  • 原型,继承

  • 类

  • 错误处理

  • Promise,asyncawait

  • Generator,高级 iteration

  • 模块

  • 杂项

  • 《现代JavaScript》教程
  • 函数进阶内容
CD_wOw
2020-12-05
目录

构造函数

# 前言

在JavaScript语言的对象体系中,是基于构造函数(constructor)和原型链(prototype)。

# 对象的概念

"面对对象编程"(Object Oriented Programming,缩写为OOP )是目前主流的变成范式,它的核心思想是将真实世界中各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。

a: 对象是单个实物的抽象。

b: 对象是一个容器,封装了属性和方法

一本书、一辆汽车、一个人都可以是'对象'。当实物被抽象成'对象',实物之间的关系就变成了'对象'之间的关系,从而就可以模拟现实情况,针对'对象'进行编程。

所谓属性,就是对象的一种状态;所谓方法,就是对象的一种行为。

# 构造函数

‘面向对象编程’的第一步,就是要生成对象。而js中面向编程是基于构造函数(constructor)和原型链(prototype)的。

“对象”是单个实物的抽象。通常需要一个模板,表示某一类实物的共同特征,然后“对象”根据这个模板生成。

js语言中使用构造函数(constructor)作为对象的模板。所谓构造函数,就是根据提供一个生成对象的模板,并根据对象的基本结构的函数。一个构造函数,可以生成多个对象,每个对象都有相同的结构。

看一下构造函数的基本结构:

let Keith = function () {
	this.height = 180;
};
// 两种写法
function Keith () {
    this.height = 180;
};
1
2
3
4
5
6
7

在此代码块中,Keith就是构造函数,它提供模板,用来生成对象实例。为了与普通函数的区别,构造函数的名字的第一个字母通常大写。

构造函数的三大特点:

  1. 构造函数的函数名第一个字母通常大写。
  2. 函数体内使用this关键字,代表所要生成的对象实例。
  3. 生成对象的时候,必须使用new命令来调用构造函数。

# new命令

# 基本原理

new命令的作用,就是执行一个构造函数,并且返回一个对象实例。使用new命令时,它后面的函数调用就不是正常调用,而是依次执行下面的步骤:

  1. 创建一个空对象作为将要返回的对象实例;
  2. 将空对象的原型指向了构造函数的prototype属性;
  3. 将空对象赋值给构造函数内部的this关键字;
  4. 开始执行构造函数内部的代码;

也就是说,构造函数内部,this指向的是一个新生成的空对象,所有针对this的操作,都会发生在这个空对象上。构造函数之所谓构造函数,意思是这个函数的目的就是操作一个空对象(即this对象),将其构造为需要的样子。

# 基本用法

new命令的作用,就是调用一个构造函数,并返回一个对象实例。

function Keight () {
    this.height = 180;
};
let boy = new Keight();
console.log(boy.height); // 180
1
2
3
4
5

此代码通过new命令,让构造函数Keight生成一个对象实例,并赋值给全局变量boy。这个新生成的对象实例,从构造函数Keight中继承了height属性。也就说明这个对象实例是没有height属性的。在new命令执行时,就代表了新生成的对象实例boy。this.height代表对象实例有一个height属性,值是180。

使用new命令时,根据需要,构造函数也可以接受参数。

当使用new来调用构造函数时,new命令会创建一个空对象boy,作为将要返回的实例对象。接着,这个空对象的原型会只想构造函数的prototype属性,也就是boy.prototype === Keight.prototype的。需要注意的是空对象指向构造函数Keight的prototype属性,而不是指向构造函数本身。然后,将这个空对象赋值给构造函数内部的this的关键字,也就是说,让构造函数内部的this关键字指向一个对象实例。最后,开始执行构造函数内部代码。

构造函数是生成对象的函数,是给对象提供模板的函数。

function Keight () {
    this.height = 180;
};
let boy = Keight();
console.log(boy.height); // TypeError: height is undefined
1
2
3
4
5

new命令创建空对象,总是返回一个对象,要么是实例对象,要么是return语句指定的**对象或数组*/*(字符串会被忽略)

编辑 (opens new window)
#现代JavaScript
上次更新: 2021/08/22, 01:09:59
WeakMap and WeakSet(弱映射和弱集合)
this原理

← WeakMap and WeakSet(弱映射和弱集合) this原理→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式