Web前端最新JavaScript进阶（二十九）： 走近 es6 之 new(1)，2024年最新阿里 面试 问题

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文章目录

• • 一、前言
    • 二、new.target 重写
    • 三、拓展阅读

一、前言

源码阅读过程中，发现以下语句

new.target.prototype

鉴于该语法为es6所有，项目在编译过程中，控制台报Unexpected token: punc(.)错误。按照常规处理，应用babel-loader即可解决此类问题。在.babelrc的

{
	"presets": [
		["es2015"]
	]
}

经过实践发现，build阶段依旧报错。

故采用第二套解决方案，使用es5语法重写es6。

二、new.target 重写

es5的构造函数前面如果不用new调用，this指向window，对象的属性就得不到值了，所以之前都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性。

 1     function Person( uName ){
 2         if ( this instanceof Person ) {
 3             this.userName = uName;
 4         }else {
 5             return new Person( uName );
 6         }
 7     }
 8     Person.prototype.showUserName = function(){
 9         return this.userName;
10     }
11     console.log( Person( 'ghostwu' ).showUserName() );
12     console.log( new Person( 'ghostwu' ).showUserName() );

在es6中，为了识别函数调用时，是否使用了new关键字，引入了一个新的属性new.target:

1. 如果函数使用了new，那么new.target就是构造函数；
2. 如果函数没有使用new，那么new.target就是undefined；
3. es6的类方法中，在调用时候，使用new，new.target指向类本身，没有使用new就是undefined；

1         function Person( uName ){
2             if( new.target !== undefined ){
3                 this.userName = uName;
4             }else {
5                 throw new Error( '必须用new实例化' );
6             }
7         }
8         // Person( 'ghostwu' ); //报错
9         console.log( new Person( 'ghostwu' ).userName ); //ghostwu

使用new之后，new.target就是Person这个构造函数，那么上例也可以用下面这种写法:

 1         function Person( uName ){
 2             if ( new.target === Person ) {
 3                 this.userName = uName;
 4             }else {
 5                 throw new Error( '必须用new实例化' );
 6             }
 7         }
 8         


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/0a589636eb7596ff5b015c6b35d9717e.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/c3edbdcbcaefb2c86d7778f802196cfd.webp?x-oss-process=image/format,png)



]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-bLBo6swv-1715907092776)]