新春从new开始

图片

2021年是全新的一年,是一个积极性向上富有活力的一年,让我们起航开启新的征程,一切的一切都重新开始,今天讲一讲关于new的事情,大家一起加油!

一、定义

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

二、语法

new constructor[([arguments])]

constructor一个指定对象实例的类型的类或函数。
arguments一个用于被constructor调用的参数列表。

三、例子

例一、创建一个自定义类

/**
 * 关键字function创建类
 */
function YearFunction(){
}
let yearFn = new YearFunction();
/**
 * 关键字class创建类
 */
class YearClass{
}
let yearCs = new YearClass();
console.log(yearFn);
console.log(yearCs);

图片

总结
有两种方式创建类,一种用关键字function,另一种用关键字classclass可以作为function创建类的一种语法糖。

例二、创建具有属性的自定义类

function YearFunction(year, month, day){
  this.year = year;
  this.month = month;
  this.day = day;
}
let yearFn = new YearFunction(2021, 1, 1);
class YearClass{
  constructor(year, month, day){
    this.year = year;
    this.month = month;
    this.day = day;
  }
}
let yearCs = new YearClass(2021, 1, 1);
console.log(yearFn);
console.log(yearCs);

图片

总结
在定义属性时,function直接写在方法体内部,class是写在constructor构造函数内容。

例三、创建具有函数的自定义类

function YearFunction(year, month, day){
  this.year = year;
  this.month = month;
  this.day = day;
}
YearFunction.prototype.getYear = function getYear(){
  return this.year;
}
let yearFn = new YearFunction(2021, 1, 1);
class YearClass{
  constructor(year, month, day){
    this.year = year;
    this.month = month;
    this.day = day;
  }
  getYear(){
    return this.year;
  }
}
let yearCs = new YearClass(2021, 1, 1);
console.log(yearFn);
console.log(yearCs);

图片

总结
在定义方法时,function需要在prototype属性上显示声明函数,class在类的内部定义。细心的你,function声明的方法多了一个prototype,这是class创建类比function的优化的地方。

例四、实例与类的关系

class YearClass{
  constructor(year, month, day){
    this.year = year;
    this.month = month;
    this.day = day;
  }
}
let yearCs = new YearClass(2021, 1, 1);
console.log(yearCs instanceof YearClass);  // true
console.log(yearCs instanceof Object);  // true
console.log(yearCs.constructor === YearClass);  // true
console.log(yearCs.constructor === Object);  // false
console.log(yearCs.__proto__ === YearClass.prototype);  // true 不推荐
console.log(Object.getPrototypeOf(yearCs) === YearClass.prototype);  // true 推荐

图片

总结
对象的constructor指向类,对象的__proto__指向类的prototype

例五、不声明参数

class YearClass{
  constructor(year = 2000, month = 1, day = 1){
    this.year = year;
    this.month = month;
    this.day = day;
  }
}
let yearCsUnparams = new YearClass;
let yearCsparams = new YearClass(2021, 1, 1);
let yearCsDefparams = new YearClass();
console.log(yearCsUnparams);
console.log(yearCsparams);
console.log(yearCsDefparams);

图片总结
创建类时,可以显示声明参数,还可以忽略参数部分,这时创建对象时使用默认参数。

例六、模拟new的实现

function newFactory(csName){
  var obj = new Object();
  var CsName = [].shift.apply(arguments);
  obj.__proto__ = CsName.prototype;
  var result = CsName.apply(obj, arguments);
  return typeof result === 'object'?result:obj;
}
function YearFunction(year, month, day){
  this.year = year;
  this.month = month;
  this.day = day;
}
console.log(newFactory(YearFunction, 2021, 1, 1));
console.log(new YearFunction(2021, 1, 1));

图片

总结
当代码new Year(...)执行时,会发生以下事情:
1、一个继承自 Year.prototype 的新对象被创建。
2、使用指定的参数调用构造函数Year,并将this绑定到新创建的对象。new Year等同于new Year(),也就是没有指定参数列表,Year不带任何参数调用的情况。
3、由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)。

图片

喜欢可以关注微信公众号“前端咖”

7 声望
0 粉丝
0 条评论
推荐阅读
Class类,你真的了解吗
类class是面向对象程序设计实现信息封装的基础。类是一种用户定义的引用数据类型,也称类类型。每个类包含数据说明和一组操作数据或传递信息的函数。类的实例称为对象。

前端咖1阅读 1.5k

如何在网页置灰的时候,部分元素保持彩色-有意思的面试题
在线体验本文视频版链接最近哀悼日,网页端如何一键变灰已经有很多实现方式了,但是我看到一个推文很有意思,是一个不错的面试题现在网页置灰已经不仅仅是一行css的事了,如何在网页置灰的前提下,部分元素保持彩...

前端小菜鸟7阅读 585

封面图
JS核心知识点梳理——正则篇(下)
正则是一个前端必须掌握的知识。但是由于用的少,忘了记,记了忘,导致面试经常坐蜡。这里上篇先介绍正则的规则,下篇结合一些具体题目,带大家重新学习巩固一下正则,争取面试给自己加分。

Runningfyy3阅读 2k

热点面试题:什么是粘包/半包问题,该如何解决?
极度投入,深度沉浸,边界清晰前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......公众号回复 加群 ...

控心crazy2阅读 579

封面图
TypeScript系列:【3】类
基础说明先来看个例子: {代码...} 这样,我们就定义了一个类,包含一个属性用于保存名称,一个构造器用于创建的时候设置名称,方法say用于获取名称描述: {代码...} 打印的结果就是:“你好,我是小强”。公共,私...

zxl200707011阅读 702

js常问面试题梳理
ES6版本引入了哪些特性? {代码...} var、const 和 let 的主要区别是什么? {代码...} 什么是promise和async-await? {代码...} 什么是闭包? {代码...} JavaScript如何保持并发? {代码...} 什么是回调,并提供...

墨城1阅读 323

如何从零开始参与 Apache 顶级开源项目?| 墙裂推荐
从 2021 开始,有一个很有意思的说法经常在各大技术媒体或开源论坛中出现,「开源正在吞噬一切」。不论是否言过其实,从一个行业从业者的切身感知来看,开源确实从少数极客的小众文化成为主流的软件开发模式,有...

SelectDB1阅读 382

封面图
7 声望
0 粉丝
宣传栏