重温js——构造函数基础

简介: 在上面的代码中,我们可以创建多个对象,使用函数的方式来创建的对象。(但是这两个对象是不一样的,每一次都创建一个新的对象)可以方便许多,除了上面的方法外,还有一种构造函数的方式来创建对象。

我们在使用函数的过程中,大多数都会使用构造函数,如: new Array(),


出现构造函数的场景


看下面的代码,我们在一个这样的场景下:想创建多个相同的用户,我们可能会使用下面的代码:


function createUser(name, age, sex){
  return {
    name,
    age,
    sex,
    sayHello(){
       console.log(`my name is ${this.name}, my sex is ${this.sex} and i am ${this.age}`)
       }
    }
}
var u1 = createUser('twinkle', '18', '男');
u1.sayHello();
var u2 = createUser('twinkle', '18', '男');
u2.sayHello();
console.log(u1 === u2);

649bdb9815ba2cbb7b7021ecd02825d7.png


在上面的代码中,我们可以创建多个对象,使用函数的方式来创建的对象。(但是这两个对象是不一样的,每一次都创建一个新的对象)可以方便许多,除了上面的方法外,还有一种构造函数的方式来创建对象。


构造函数


语法:


new 函数名(参数1,参数2,……)


改造代码:


function User(name, age, sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.sayHello = function(){
         console.log(`my name is ${this.name}, my sex is ${this.sex} and i am ${this.age}`)
       }
}
var u1 = new User('twinkle', '18', '男');
u1.sayHello();
var u2 = new  User('twinkle', '18', '男');
u2.sayHello();
console.log(u1 === u2);

41c64702065c02f1811dfa7cf36dcb69.png


注意事项


  • 构造函数的本质也是函数,就是调用的方式不同。


  • 构造函数里面会默认自动定义一个this 对象,并且会自动返回当前的this,如果手动返回一个原始类型的数据,不会返回,如果返回的是一个对象,会替换原来的this对象。


012cf239f263c2cacec9d3d36c83e880.png


  • 在js中的内置对象中,全部的对象都是用构造函数 new来创建的。那些简写,是js给出的字面量的创建方式,也就是语法糖;


9746f6c18fe07eec61daf23d3554cfb6.png


new.target


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


function U(){
  if(new.target !== U){
   console.error('请使用new的方式来创建函数')
  }
}
U();
new U();

15cee5925158728de7f0845cb499a89e.jpg


构造函数与函数的区别


  • 命名方式,其实这一点不能说为区别,只是在业界中形成一定的规范,普通函数是小驼峰的名命方式,而构造函数是大驼峰的名命方式;


  • 在重温js——函数表达式和this_twinkle的博客-CSDN博客中,我们知道普通函数的this指向是指向全局对象的,而构造函数内部的this指向当前对象的实例.


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


函数的本质


函数的本质就是对象。


function sum  (a,b){
  return a + b;
}
var sum1 = new Function('a','b', 'return a + b');
sum(1,3);
sum1(1,3)

19e5b87cca135c702b15e9cc94c87203.png


所有的函数都是 new Function 来创建的。


包装类


js 为了增强原始类型的数据,为string, boolean, number 分别创建了一个构造函数。 String, Boolean, Number。在js中,可以认为类就是一个构造函数。


2d2ad1146819445c14082a6383f6283e.png


如果语法上,将原始类型当作对象来使用时(一般在使用属性时),JS会自动在该位置利用对应的构造函数,创建对象来访问原始类型的属性。


56cf6ac7c7942def56fc4554884e2853.png


// a.toFixed(2)等同于下面的代码
(new Number(a)).toFixed(2);


dbff795377a78970a3e4451fe29d3ff2.png


上图的两个变量,严格是不相等的,两个不一样的对象,对象比的是引用地址,这两个变量肯定是不同的。


成员属性(方法),实例属性(方法), 表示该属性通过构造函数的实例来调用(需要通过new 的方式来调用)。


静态属性(方法),类属性(方法),表示该属性是通过构造函数本身来调用(不用new的方式来调用)

相关文章
|
6月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
59 2
|
6月前
|
JavaScript 前端开发
JavaScript中的正则表达式构造函数和正则表达式字面量
JavaScript中的正则表达式构造函数和正则表达式字面量
|
6月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
6月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
5月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
46 7
|
6月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
35 1
JavaScript基础知识-构造函数(也称为"类")定义
|
3月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
4月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
42 6
|
6月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例