JavaScript:构造函数

简介: JavaScript:构造函数

一、理解构造函数

构造函数是一个函数

JS中的任何一个普通函数,当用new关键字来调用时,它就是构造函数。

构造函数与函数定义无关,与调用方法有关。

构造函数用new关键字来进行调用的函数称为构造函数,一般首字母大写(表示该函数以后希望被作为构造函数来使用)。

构造函数主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值/为初始化的对象添加属性成员或方法成员。

JS中面向对象编程是基于构造函数(constructor)和原型链(prototype)的。

JS语言中使用构造函数(constructor)作为对象的模板,所谓构造函数,就是提供一个生成对象的模板,并描述对象的基本结构的函数。一个构造函数,可以生成多个对象,每个对象都有相同的结构。JS中使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类(理解为模板,表示某一类实物的共同特征)。我们将通过这个构造函数创建的对象,称为是该类的实例。

二、构造函数的意义

使用对象字面量创建一系列同一类型的对象时,这些对象可能具有一些相似的特征(属性)和行为(方法),此时会产生很多重复的代码,把这些重复性的特征和属性抽象出来,做成构造函数,可以实现代码复用。

JS中的构造函数的含义和用法_函数值组件中,怎么使用js构造器_瑞雨溪的博客-CSDN博客

三、构造函数作用

构造新对象,设置对象的属性和方法。

创建对象时完成初始化,当我们在new一个对象并传入参数的时候,会自动调用构造函数并完成参数的初始化。

四、构造函数的执行流程

4.1、立刻创建一个新的对象

4.2、将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象

4.3、逐行执行函数中的代码

4.4、将新建的对象作为返回值返回

使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。 我们将通过一个构造函数创建的对象,称为是该类的实例。

五、构造函数this的情况

5.1、当以函数的形式调用时,this是window

5.2、当以方法的形式调用时,谁调用方法this就是谁

5.3、当以构造函数的形式调用时,this就是新创建的那个对象

六、内置构造函数

ECMAScript提供了多个内置构造函数

Object、Array、String、Boolean、Number、Date…

var obj = new Object()

var arr = new Array()

七、自定义构造函数

首字母大写

通过new创建实例对象

创建构造函数时,里面的属性和方法前必须加this,this就表示当前运行时的对象

function Singer (name, song) {
    this.name = name
    this.sing = function () {
        console.log(`${name} 唱 ${song}`)
    }
}
// new 就是执行构造函数,返回一个对象,不写new就是普通函数的调用,没有创造对象的能力
let singer1 = new Singer("刘德华", "冰雨")
singer1.sing()

八、构造函数的return

8.1、不写return,返回一个对象

8.2、return一个基本数据类型,结果不变,返回一个对象

8.3、return一个复杂数据类型,返回一个复杂数据类型,比如对象、数组

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

普通函数是小驼峰的名命方式,而构造函数是大驼峰的名命方式(行业规范)。

我们知道普通函数的this指向是指向全局对象的,而构造函数内部的this指向当前对象的实例。

使用的方式不同,普通函数直接调用,构造函数必须使用new 来调用,通过 new.target 来判断调用的方式是不是构造函数。

任何函数只要使用new操作符调用就是构造函数,而不使用new操作符调用的函数就是普通函数

十、new.target

new.target - JavaScript | MDN

用于判断对象的调用方式是否使用构造函数的方式来调用,如果不是构造函数调用,该表达式返回undefined, 否则返回正常的构造函数。

function U(){
  if(new.target !== U){
   console.error('请使用new的方式来创建函数')
  }
}
U();
new U();
function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}
Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

十一、实例成员和静态成员

function Singer (name, song) {
    this.name = name
    this.sing = function () {
        console.log(`${name} 唱 ${song}`)
    }
}
let S1 = Singer("刘德华", "冰雨") // 实例化对象
Singer.sex = "male" //在构造函数上添加的成员就成为静态成员
console.log(Singer.sex );//male 静态成员只能通过构造函数进行访问
Singer.prototype.age = 50 // 通过prototype添加的成员不是静态成员,是实例成员,也就是只要是实例化的对象都可以访问到

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

十三、相关内容

new操作符、原型、原型链、class

相关文章
|
2月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
23 2
|
3月前
|
JavaScript 前端开发
JavaScript中的正则表达式构造函数和正则表达式字面量
JavaScript中的正则表达式构造函数和正则表达式字面量
|
4月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
4月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
4月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
2月前
|
JavaScript
|
2月前
|
JavaScript 前端开发
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
57 0
|
2月前
|
JavaScript 前端开发
探索JavaScript中的构造函数,巩固你的JavaScript基础
探索JavaScript中的构造函数,巩固你的JavaScript基础
|
4月前
|
JavaScript 前端开发
JavaScript 中类和构造函数的区别
JavaScript 中类和构造函数的区别
28 0
|
4月前
|
存储 JSON 前端开发
JavaScript:构造函数&面向对象
JavaScript:构造函数&面向对象
37 2