2024年Web前端最全JavaScript提高班之面向对象(六)，2024年最新被面试官打击

于 2024-05-11 03:40:08 发布
阅读量819 收藏 12
点赞数 12
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435942/article/details/138691854
版权

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

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

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

new 在执行时会做四件事

  1. 在内存中创建一个新的空对象。

  2. 让 this 指向这个新的对象。

  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。

  4. 返回这个新对象（所以构造函数里面不需要 return ）。

2.2.1、静态成员和实例成员

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

  • 静态成员: 在构造函数本身上添加的成员为静态成员，只能由构造函数本身来访问

  • 实例成员: 在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

// 构造函数中的属性和方法我们称为成员，成员可以添加

function Star(uname,age) {

this.uname = uname;

this.age = age;

this.sing = function() {

console.log(‘我会唱歌’);

}

}

var ldh = new Star(‘刘德华’,18);

// 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员

// 实例成员只能通过实例化的对象来访问

ldh.sing();

Star.uname; // undefined 不可以通过构造函数来访问实例成员

// 静态成员就是在构造函数本身上添加的成员 sex 就是静态成员

// 静态成员只能通过构造函数来访问

Star.sex = ‘男’;

Star.sex;

ldh.sex; // undefined 不能通过对象来访问

2.2.2、构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

在这里插入图片描述

  • 我们希望所有的对象使用同一个函数，这样就比较节省内存

2.3、构造函数原型 prototype

  • 构造函数通过原型分配的函数是所有对象所共享的,这样就解决了内存浪费问题

  • JavaScript 规定，每一个构造函数都有一个prototype属性，指向另一个对象，注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

  • 我们可以把那些不变的方法，直接定义在prototype 对象上，这样所有对象的实例就可以共享这些方法

  • 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上

问答：原型是什么？

  • 一个对象，我们也称为 prototype 为原型对象

问答：原型的作用是什么？

  • 共享方法

2.4、对象原型 __ proto __

  • 对象都会有一个属性 _proto_ 指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有_proto_原型的存在。

  • _proto_对象原型和原型对象 prototype 是等价的

  • _proto_对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

在这里插入图片描述

  • Star.prototype 和 ldh._proto_ 指向相同

2.5、constructor 构造函数

  • 对象原型(__ proto __) 和构造函数(prototype)原型对象 里面都有一个属性 constructor 属性， constructor 我们称为构造函数，因为它指回构造函数本身。

  • constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数

  • 一般情况下，对象的方法都在构造函数(prototype)的原型对象中设置

  • 如果有多个对象的方法，我们可以给原型对象prototype采取对象形式赋值，但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数

具体请看实例配合理解

2.6、构造函数、实例、原型对象三者关系

在这里插入图片描述

2.7、原型链查找规则

  1. 当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性

  2. 如果没有就查找它的原型(也就是_proto_指向的prototype原型对象)

  3. 如果还没有就查找原型对象的原型(Object的原型对象)

  4. 依次类推一直找到Object为止(null)

  5. __ proto __对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

在这里插入图片描述

2.8、原型对象this指向

  • 构造函数中的 this指向我们的实例对象

  • 原型对象里面放的是方法，这个方法里面的this指向的是这个方法的调用者，也就是这个实例对象

2.9、扩展内置对象

  • 可以通过原型对象，对原来的内置对象进行扩展自定义的方法

  • 比如给数组增加自定义求偶数和的功能

注意：

  • 数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {}，只能是Array.prototype.xxx = function(){}的方式

3、继承

======================================================================

ES6 之前并没有给我们提供extends继承

  • 我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承

3.1、call()

调用这个函数，并且修改函数运行时的 this 指向

fun.call(thisArg,arg1,arg2,…)

  • thisArg：当前调用函数 this 的指向对象

  • arg1,arg2： 传递的其他参数

示例

3.2、借用构造函数继承父类型属性

  • 核心原理: 通过 call() 把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型的属性

3.3、借用原型对象继承父类型方法

  • 一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法

核心原理：

  1. 将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()

  2. 本质： 子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象

  3. 将子类的constructor重新指向子类的构造函数

3.3 类的本质

  1. class 本质还是 function

  2. 类的所有方法都定义在类的 prototype属性上

  3. 类创建的实例，里面也有_proto_指向类的prototype原型对象

  4. 所以 ES6 的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

  5. 所以 ES6 的类其实就是语法糖

  6. 语法糖：语法糖就是一种便捷写法，简单理解

4、ES5新增方法

===========================================================================

ES5 给我们新增了一些方法，可以很方便的操作数组或者字符串

  • 数组方法

  • 字符串方法

  • 对象方法

4.1、数组方法

  • 迭代(遍历)方法：foreach() ，map()，filter()，some() ，every() ;

4.1.1、forEach()

array.forEach(function(currentValue,index,arr))

  • currentValue : 数组当前项的值

  • index: 数组当前项的索引

  • arr: 数组对象本身

4.1.2、filter()筛选数组

array.filter(function(currentValue,index,arr))

  • filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组

  • 注意它直接返回一个新数组

4.1.3、some()

  • some()方法用于检测数组中的元素是否满足指定条件（查找数组中是否有满足条件的元素）

  • 注意它返回的是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false

  • 如果找到第一个满足条件的元素，则终止循环，不再继续查找

4.2、字符串方法

  • trim()方法会从一个字符串的两端删除空白字符

  • trim()方法并不影响原字符串本身，它返回的是一个新的字符串

点击

4.3、对象方法

4.3.1、Object.keys()

  1. Object.keys()用于获取对象自身所有的属性

  2. 效果类似for...in

  3. 返回一个由属性名组成的数组

4.3.2、Object.defineProperty()

  • Object.defineProperty()定义对象中新属性或修改原有的属性(了解)

Object.defineProperty(obj,prop,descriptor)

  • obj : 目标对象

  • prop : 需定义或修改的属性的名字

  • descriptor : 目标属性所拥有的特性

  • 第三个参数 descriptor 说明：以对象形式{ }书写

  • value：设置属性的值，默认为undefined

  • writeable: 值是否可以重写 true | false 默认为false

  • enumerable: 目标属性是否可以被枚举 true | false 默认为false

  • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false

5、函数进阶

========================================================================

5.1、函数的定义方式

  1. 函数声明方式 function 关键字(命名函数)

  2. 函数表达式(匿名函数)

  3. new Function()

var fn = new Function(‘参数1’,‘参数2’,…,‘函数体’);

  • Function 里面参数都必须是字符串格式

  • 第三种方式执行效率低，也不方便书写，因此较少使用

  • 所有函数都是 Function 的实例(对象)

  • 函数也属于对象

在这里插入图片描述

5.2、函数的调用方式

  1. 普通函数

  2. 对象的方法

  3. 构造函数

  4. 绑定事件函数

  5. 定时器函数

  6. 立即执行函数

5.3、函数内this的指向

  • this指向，是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般我们指向我们的调用者

| 调用方式 | this指向 |

| :-: | :-: |

| 普通函数调用 | window |

| 构造函数调用 | 实例对象，原型对象里面的方法也指向实例对象 |

| 对象方法调用 | 该方法所属对象 |

| 事件绑定方法 | 绑定事件对象 |

| 定时器函数 | window |

| 立即执行函数 | window |

点击

5.4、改变函数内部this指向

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

html5

2401_84435942
关注
专栏目录
JavaScript 学习笔记（六）JavaScript基础，JavaScript面向对象相关知识点及案例
小张小张的博客
03-12 1072
目录 一、了解面向对象 二、创建对象的方式 1. 字面量方式创建对象 2. 内置构造函数创建对象 3. 工厂函数创建对象 4. 自定义构造函数创建对象 一、了解面向对象 面向对象是我们的一种开发方式。 例子：一份烤鸭 在面向过程中：所有事情都是自己来做，要考虑顺序（先杀鸭子，先烤鸭子，还是先切鸭子）；要考虑步骤（杀鸭子的时候，先干什么，后干什么）；要考虑细节（胡萝卜的宽窄程度，酱的咸甜口等）。而在面向对象中，我们只需要点一份烤鸭，等待烤鸭上桌就好。（会有专门的人来处理这些事情）.
2024年，阿里最新的java程序员面试题目含答案带你吊打面试官
最新发布
2401_83329402的博客
04-22 407
并发和多线程（线程池、SYNC和Lock锁机制、线程通信、volatile、ThreadLocal、CyclicBarrier、Atom包、CountDownLatch、AQS、CAS原理等等）JVM（内存模型、GC垃圾回收，包括分代，GC算法，收集器、类加载和双亲委派、JVM调优，内存泄漏和内存溢出）数据库的锁（行锁，表锁，页级锁，意向锁，读锁，写锁，悲观锁，乐观锁，以及加锁的select sql方式）缓存的使用，如果现在需要实现一个简单的缓存，供搜索框中的ajax异步请求调用，使用什么结构？
JavaScript面向对象的一个例子
weixin_33774308的博客
10-17 116
一个JS的操作弹出窗口位置的类。（摘自JavaScript Definitive Guide）     var bounce = {            x:0,y:0,w:200,h:200, // Window position and size            dx:5, dy:5, // Window velocity            interval:10...
JavaScript—面向对象小例子
diaopinglan6176的博客
05-08 105
什么是面向对象 要是以前别人问我。随口道来，封装继承多态，万物皆对象。。。一大推。说的自己都以为自己掌握了面向对象。呵呵一笑。确实掌握了 只是不会用。。。。。 什么是面向对象编程 以前 学。Net 虽然MVC 本身就是面向对象。也就没管什么思想，就记住步骤，跟着写就好。 现在想想，那时候还是太年轻了，当我看了设计模式里面对MCV的一个解释。发现...
javascript面向对象简单实例
李特成的博客
06-03 253
//行为都是一样的,没有必要去重复创建. //我们可以存在一个共享库里面，共享库里面内存和地址都是一样的。无论任何一个对象访问,都是访问一个内存地址. //使用prototype只会创建一次. function Dog(option){ this.init(option); } Dog.prototype.init=function(option){//init初始化数据 ...
JavaScript学习笔记（二十六）——面向对象编程小案例
qq_45268602的博客
09-13 521
面型对象编程——放大镜 HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
web前端常见的面试题汇总(一），2024年最新字节跳动面试官网
m0_60707708的博客
04-12 879
相同点:不会堵塞页面的加载不适用于内部的js（即是再页面中引入外部文件时使用）这两个属性的js脚本代码不能使用document.write()方法2）不同点defer是HTML4中script的属性async是HTML5中script中的属性使用了defer属性的脚本代码是在页面完全加载完毕之后再执行使用了async属性的脚本代码和页面一并加载（异步），当该js脚本下载完成时立即执行3）使用场景。
一篇由简到难的 Vue 面试题+详解答案
2401_84153102的博客
04-21 757
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
前端面试高频React题及详解,另附有React面试题集合，2024年最新web前端面试基础题记不住怎么回事
m0_60721823的博客
04-13 429
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！、插件、编码习惯等。
使用Python计算平面多边形间最短距离，数据需要从exce
Buoluochuixue的博客
10-28 447
/分组背包问题，首先考虑一个木板的情况：//对于一个木板而言：dp[i][j]，i表示当前是第i次粉刷，粉刷第j块格子的情况。数组是非常基础的数据结构，在面试中，考察数组的题目一般在思维上都不难，主要是考察对代码的掌控能力，也就是说，想法很简单，但实现起来 可能就不是那么回事了。本同学是湖南衡阳人，想留长沙，但是长沙的工资不多，加班很多。真心请教各位大佬，某二线大厂运营16×16，公积金12base北京签不签呢，后续就还有一些银行子公司（平安和中邮的消费金融这类）和省分的机会，但是本人学历背景一。
JavaScript提高班之面向对象(六)
热门推荐
Augenstern_QXL的博客
03-25 3万+
1.面向对象 1.1 类 创建类 class name { // class body } 创建实例 var XX = new name(); ==注意：==类必须使用new 实例化对象 <script> // 1. 创建类 class 创建一个 明星类 class Star { constructor(uname, age) { this.uname = uname;
JS面向对象案例
Python1One的博客
09-17 629
JS面向对象案例 1. 创建一个狗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JavaScript练习小案例-----简单版面向对象选项卡
m0_61656944的博客
02-08 128
<style> * { margin: 0; padding: 0; } ul,ol,li { list-style: none; } .tab { width: 600px; height: 400px; border: 10px solid #333; ..
JavaScript面向对象
qq_45359288的博客
03-31 1209
1. 面向对象编程 两大编程思想 面向过程 POP （Process-oriented programming） 分析出解决问题所需要的步骤，然后用函数把这些步骤一步步实现，使用的时候一步步调用 面向对象 PPO （Object Oriented programming） 把事务分解成为一个个对象，然后由对象之间分工与合作。以对象功能划分问题，而不是步骤。面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对象特性 封装性 继承性 多态性 2. ES6中
JavaScript面向对象编程
绳锯木断，水滴石穿，专心写文，无问西东！！！
08-26 128
概述 在前端开发中，JavaScript并没有想象中那么简单，不只是简单的UI输入验证，还有面向对象。对于刚刚JavaScript入门的你来说，可能会稍稍惊讶：哇，虽然前端开发好找对象，妹子多，但是JavaScript真的可以向对象编程么！！！是的，你没有看错，本文将通过一些小例子，逐步讲解JavaScript的面向对象编程。仅供学习分享使用，如有不足之处，还请指正。 ECMA Script有两种开发模式： 函数式（过程化）：小的功能，独立。 面向对象（OOP）：体现了继承，封装，多态的思想，但是E
javaScript学习笔记（六）面向对象案例(红绿灯，炫彩小球)
大西瓜
06-29 268
面向对象案例一 、红绿灯二、渲彩小球 一 、红绿灯 <div id='box'></div> <script> function Light() { this.color = 1 this.init(); this.bindEvent() } Light.prototype.init = function () { thi
笔记--JavaScript面向对象
qq_43488583的博客
08-30 187
1. 面向对象的编程介绍 1.1 两大编程思想 面向过程和面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候在一个一个的依次调用就可以了。 举个例子：将大象装进冰箱，面向过程做法。 1. 打开冰箱门 2. 大象装进去 3. 关上冰箱门 面向过程，就是按照我们分析好的步骤，按照步骤解决问题。 1.3 面向对象编程 OOP(Object Oriented Program
js 箭头函数没有 constructor，不能被new
会飞的程序猿
01-13 468
var fn1 = function(item) { console.log('item---', item) } var fn = (item) => { console.log('item---', item) } console.log('fn1---', new fn1()) console.log('fn---', new fn()) new fn1() 打印结果 item--- undefined fn1--- fn1 {} new fn() 打印结果，箭头函数没有 const
JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
imByte的博客
10-14 535
本篇为 JavaScript 进阶 ES6 系列笔记第二篇，将陆续更新后续内容。参考：JavaScript 进阶面向对象 ES6 ；ECMAScript 6 入门 阮一峰 文章目录「一」构造函数和原型   「一」构造函数和原型 在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6 之前，JS 中没有引入类的概念。 ES6， 全称 ECMAScript 6.0 ，2015.6 发版，但是目前浏览器的 JavaScript 是 ES5 版.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值