继承的进阶_function person () {this(1),成功入职腾讯

17 阅读5分钟
框架相关

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

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

Vue框架

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

React框架

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

开源分享:docs.qq.com/doc/DSmRnRG… this.name = 'jack'; } var p = new Person(); console.log(p.name)//jack


上述代码是p通过person这个构造函数实现的一个实例对象  
 那么new在底层逻辑中是如何实现的呢?  
 1.创建一个新对象  
 2.将构造函数的作用域赋给新对象(this指向的新对象)  
 3.执行构造函数中的代码(为这个新对象添加属性)  
 4.返回新对象  
 那么如果把new删除呢?



function person(){ this.name = 'jack' } var p = person(); console.log(p)//undefined console.log(name)//jack console.log(p.name)//'name'of undefined


上述就是去除了new方法的代码我们可以发现出现了undefined,在Javascriptnew方法中this默认指向的是window。  
 然后我们对上述的代码再次进行改进  
 function person(){  
 this.name = ‘jack’;  
 return = ‘tom’;  
 }  
 var p = new person();  
 console.log§ //{ name://‘jack’}  
 console.log(p.name)//jack  
 这里要求构造函数必须是一个构造对象如果返回的不是对象还是按照new的逻辑返回新生成的对象,也就是绑定了最新的this然后再返回出来  
 所以new关键字执行之后总是会返回一个对象要么是实例对象,要么是return语句指定的对象。  
 再对call、apply、bind进行讲解  
 call、apply、bind三者是挂靠在function对象上的三个方法,所以调用这三个方法的必须是一个函数  
 具体的代码实现如下:  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b29d51a6d63b4f5eb50dc28cc2b9a0ba~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=A5rXCJk%2BOHaW9fSZVa29lJTpNKo%3D)  
 这三个词的任何一个都可以改变函数func的this指向call和apply的区别在于传参的写法不同apply的第二个元素是数组而call从第二个开始就是想func的传参而band又和这两个不同虽然改变了this的指向但不是立即执行而其他两个则是改变之后立刻做出反应  
 如果还是不太懂的话我用大白话来讲一遍吧:  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/81c9b03795ae4a6eaf3228fa25ddf3b5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=karOfNteTNZ8mIjpQGL1pBndFfA%3D)


下面我们用代码实现一下上述所讲的三个方法



let a = { name:'jack', getname:function(msg){ return msg + this.name; } } let b={ name:'lily' } console.log(a.getname('hello~'));//hellojack console.log(a.getname.call(b,'hi'));//hilily console.log(a.getname.apply(b,['hi']))//hilily let name = a.getname.bind(b,'hello'); console.log(name());//hello~lily


运行的控制台结果如下:  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d0a332192f3e42428d56b0905d544276~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=FjN5p%2FwalxReidqexy83UOokcYE%3D)


下面将会讲述一下这些方法的运用场景:理念相同都是借用方法的思路  
 在判断数据类型时:  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/38ed6a01c4de4aa5a37b6f707fcbedc3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=%2FThEJXrsAgxStx4fAYipQBbhlTw%3D)  
 类数组借用方法:  
 类数组因为不是真正的数组所有没有数组类型上自带的种种方法可以利用一些方法去借用数组的方法  
 代码实现样例:  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6ab4ea0655b14b99bcb7b69cbf4f7639~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=%2BpZk7X0lP73%2BBUA86G9fJObTFm4%3D)  
 获取数组的最大最小值:  
 可以使用apply来实现,apply直接传递数组作为调用方法的参数也可以减少一步展开数组。  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c4f1a453e40e4672bad5db494bf24239~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=vjk3zaT%2BtZ5N7h%2Fofod2gebBAbM%3D)  
 new的实现  


### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

* 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

* 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

  **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0af5601b1dee4409941df1a4fe760ea4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771328163&x-signature=OWY%2Btwdx0Wj1hZAtpPWu1xU0Qys%3D)

喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!