最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我特地针对初学者整理一套前端学习资料
文章目录
一、前言
源码阅读过程中,发现以下语句
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
:
- 如果函数使用了
new
,那么new.target
就是构造函数; - 如果函数没有使用
new
,那么new.target
就是undefined
; 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 }
### React
* 介绍一下react
* React单项数据流
* react生命周期函数和react组件的生命周期
* react和Vue的原理,区别,亮点,作用
* reactJs的组件交流
* 有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
* 项目里用到了react,为什么要选择react,react有哪些好处
* 怎么获取真正的dom
* 选择react的原因
* react的生命周期函数
* setState之后的流程
* react高阶组件知道吗?
* React的jsx,函数式编程
* react的组件是通过什么去判断是否刷新的
* 如何配置React-Router
* 路由的动态加载模块
* Redux中间件是什么东西,接受几个参数
* redux请求中间件如何处理并发
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)
目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)