JavaScript学习8:类、构造函数和原型、ES5新增方法_构造函数es5创建方法

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

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

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。

    lhm.sing("believe");
</script>

类的继承



<script>
    class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        sum() {
            console.log(this.x + this.y);
        }
        say() {
            return '我是爸爸';
        }

    }
    class Son extends Father { //继承
        constructor(x, y) {
            super(x, y); //调用了父类中的构造函数 必须先写
            this.x = x;
            this.y = y;
        }
        say() {
            console.log(super.say() + '的儿子'); //调用父类中的函数
        }
        subtract() {
            console.log(this.x - this.y);
        }
    }
    var son = new Son(1, 2);
    son.sum(); //3
    son.say(); //就近原则 '我是爸爸的儿子'
    son.subtract(); //-1
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308171611993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


#### 二、构造函数和原型(ES6之前)


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308171957703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308172026532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308172150626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 实例成员和静态成员:  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308172506748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 构造函数的问题  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308172647410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308172904810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030817310599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308173525777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308174124943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308174403942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 原型链  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308174730192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202103081748360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308175238176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 1.构造函数中的this指向对象实例  
 2.原型对象函数中的this指向调用者


原型对象的应用:  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308175804861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308175956845.png)


继承  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308180708283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)



<script>

    function fun(x, y) {
        console.log(x + y);
        console.log(this);
    }
    var o = {
        name: 'vivian'
    };
    //1. call()可以调用函数
    //fun.call();//指向windows对象
    //2. call()可以改变这个函数的this指向
    fun.call(o, 1, 2);//指向o对象
</script>

借用构造函数继承父类型属性  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308220153881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 借用构造函数继承父类型方法  
 不能直接赋值:Son.prototype = Father.prototype  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308220852833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 应该:Son.prototype = new Father();  
 同时注意 Son.prototype.constructor = Son;  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308221121974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


#### 三、ES5新增的方法


**数组方法**  
 1.forEach 迭代(遍历)数组  
 2.filter 筛选数组 返回一个数组 (所有符合条件)  
 3.some 查找数组中是否有满足条件的元素 返回一个布尔值



<script>
    //注意以下方法都有(value, index, array)三个参数,可以省略不用的
    //forEach 迭代(遍历)数组
    var arr = [1, 2, 3];
    var sum = 0;
    arr.forEach(function (value, index, array) {
        console.log('每个数组元素' + value);
        console.log('下标' + index);
        console.log('整个数组' + array);
        sum += value; //6
    })
    
    //filter 筛选数组 返回一个数组 (所有符合条件)
    var arr1 = [12, 66, 78, 1];
    var newArr = arr1.filter(function (value, index, array) {
        return value >= 20;
    })
    console.log(newArr); //[66, 78]
    
    //some 查找数组中是否有满足条件的元素 返回一个布尔值
    //找到第一个元素就停止查找
    var arr2 = [10, 30, 4];
    var flag = arr2.some(function (value) {
        return value >= 20;
    })
    console.log(flag); //true
</script>

**字符串方法**  
 1.trim 方法去除字符串两侧空格



    //trim 方法去除字符串两侧空格
框架相关

原生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 路由

  1. http请求**

6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-CqhnlbDy-1715150774994)]

React框架

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

[外链图片转存中…(img-hbMXN0qS-1715150774995)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值