前端面试题集锦-2021年前端面试题收集题库1

编程之家收集整理的这篇文章主要介绍了前端面试题集锦-2021年前端面试题收集题库1编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

1.说说Javascript中对象的几种创建模式

  • 对象-继承-面向对象
    • 创建对象第一个想到的关键字是 new
    • 创建对象的目的是实现继承,继承部分通用属性
    • 问题可以转换成 : JavaScript如何实现对象的继承,继承的形式
  • 构造函数
    • 首先定义一个构造函数,可以传入构造参数,demo如下:@H_404_22@ function Student(name,sex){ this.name = name this.sex = sex this.sayName = function(){ console.log(this.name) } } var student_1 = new Student('张三','male')
    • 限制和优势
      • 必须使用 new 关键字
      • 创建一个对象需要使用一次new语句
      • 属性方法直接赋予this对象
      • 限制1:每个对象的属性方法都需要创建一遍,如果是公用的属性会造成浪费
      • 限制2:多次创建相似对象,需要重复的进行new动作,无法快速创建
  • 快速批量创建对象的 工厂模式
    • 使用一个工厂函数,入参接受构造参数,返回创建的对象,避免重复的new关键字@H_404_22@ function factory(name,sex){ var obj = new Object() obj.name = name obj.sex = sex obj.sayName = function(){ console.log(this.name) } return obj } var person_1 = factory('zhangsan','male') var person_2 = factory('lisi','female')
    • 限制和优势
      • 生成相似的同类对象避免多次重复的new关键字
      • 限制:只能构造同类元素
  • 避免重复属性性能浪费的 原型模式
    • 每个函数都有一个原型属性指针prototype,指向一个原型对象,所有实例的该属性指向同一个对象,并不会重复创建对象,所以再原型对象里面添加属性,可以避免实例重复创建对象的性能浪费
      ```:javacsript
      function student_proto(){

      @H_404_22@ } student_proto.prototype.sayNme = funciton(){ console.log(this.name) } student_proto.prototype.sex = 'male' student_proto.prototype.name = 'zhangsan' var student_1 = new student_proto() ```
    • 如果实例上没有某个属性,就会往上向原型链上查找,会拿到prototype上面的统一的一个对象属性

    • 如果实例上有这个属性则会直接返回实例属性,如果原型链上也没有这个属性那么就会返回Undefined

    • 限制:实例对原型对象引用属性修改修改所有实例的原型属性,没法做到独立性

  • 组合使用 原型模式和构造函数
    • 在使用构造函数的保证实例属性独立的前提下,原型属性也使用,实现混合模式@H_404_22@function Student(name,sex,grade){ this.name = name; this.sex = sex; this.grade = grade; } Student.prototype.sayName = function(){ console.log(this.name); } Student.prototype.school = 'Joooh school';
  • 动态原型模式
    • 原理:还是把所有的信息都封装在构造函数里面,但是为了避免方法的重复定义和性能损耗,在定义重复方法之进行了一个判断,如果this.function 已经存在则不在进行重复定义,如果不存在,将原型链上添加上该方法
    • demo
    @H_404_22@ function Person(name,age,job){ //属性 this.name = name; this.age = age; this.job = job; //方法 if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){ alert(this.name); }; } } var friend = new Person("Nicholas",29,"Software Engineer"); friend.sayName();
  • 寄生构造函数模式
    • 原理:Javascript 中构造函数如果有返回值的情况会怎么样

      • 无返回值: 实例为正常实例化对象
      • 有返回值但是返回值为非引用类型:实例为正常实例化对象
      • 有返回值并且返回值为引用类型:实例为返回值引用对象
    • 所谓寄生构造函数就是创建一个函数,然这个函数只是封装创建对象的代码,然后再返回新创建的对象。

      @H_404_22@```:javascript function Person(name,job){ var o = new object(); o.name = name; o.age=age; o.job=job; o.sayName = function(){ alert(this.name) } return o; } var friend = new Person(name1,age1,job1) friend.sayName(); // name1 ```
    • 构造函数里面通过一个函数返回引用对象,不推荐使用,并且无法通过Instanceof 判断所属关系


Javascript中如何实现异步编程

  • 回调函数
  • promise
    • 原理:ES6中注册promise对象,根据异步任务执行状态,调用promise的resolvereject方法,将promise状态置为resolvedrejected,promise对象会在状态转变时自动调用resolve回调或者是reject回调
    • 优点:代码结构优秀,可以链式调用
  • 发布/订阅模式
    • 相当于有个事件bus,任何监听了bus事件的订阅者,在bug触发一定事件时都会执行相应回调函数
  • 事件监听
    • 事件监听其实也是发布订阅模式的一种形式,在事件触发时,所有订阅者的对应函数都会被执行,常用的是vue的bus
  • async/await
    • ES6 中可迭代对象,可以使用next()生成,下一个序列的可迭代属性,在手动调用next方法时,只要返回值done不是true,则会阻塞下一次next()调用
    • 所以通过next 的阻塞作用,使用asyncawait达到异步阻塞,在前者执行完之前不会执行后者,达到异步的效果
    • 可以结合Promise同时使用

Javascript 的同源策略

  • 概念:JavaScript只能读取和所属文档同源的窗口和文档的属性
    • 判断来源:指脚本本身的来源并不作为同源依据,而是指脚本所属文档的来源作为判断依据
    • 同源:协议,主机,端口必须全部相同

为什么JavaScript会有同源策略限制

  • 避免跨域跨来源的安全问题

为什么说Function函数在JavaScript中是第一类对象

  • 函数拥有对象能做的一切能力
    • 可以动态创建
    • 可以当作引用赋值
    • 可以拥有自己的属性方法
    • 可以分配变量,可以将他们的引用复制到其他变量,可以被拓展或者删除
    • instance 函数和Object都是true,函数的原型链最上层也是Object,拥有对象的所有原型属性方法

JavaScript中函数声明和函数表达式的区别

  • 什么是函数声明
    • function type(){ } 类似这样,声明一个名叫type的函数
    • var type = function(){} 类似这样则是函数表达式,并且把函数表达式赋值给一个变量
  • 主要就是函数声明会和var声明变量一样,会有变量提升的问题
  • JavaScript中定义函数的四种方式

JavaScript如何删除cookie中的一个键值对

  • 原理:
    • document.cookie 在赋值时是设置单个cookie,但是获取document.cookie的时候是返回所有的cookie
    • 在需要删除的cookie键值对后面增加一个exires=时间戳exires键值对,浏览器就会立刻删除该cookie键值对,注意此处的时间戳必须是UTC或者是GMT时间不能是本地时间
    • 需要将document.cookie => .split(';')=>拆分成数组,for of 遍历,在需要修改的键值对后面进行添加exire键值对

手写一个方法求字符串的字节长度

  • 思路:
    • 字符串自带属性.length,可直接拿到字符长度
    • 遍历字符串,通过charCode识别时候是中文字符,如果是中文字符>255 则字节数额外+1

attribute 和 property的区别

  • attribute : 特性,特性节点(attribute node),每个dom节点都有有个attribute属性用来存储特定的attribute node属性节点
  • property属性,每个dom节点,如果当作普通Object看,property就是存储在Object中的一个键值对
  • 设置方法不一样: attribute 需要setAttribute方法设置,property直接.语法设置
  • 删除方式不一样: attribute 需要removeAttribute方法设置,property则是使用Objectdelete 方法

@H_52_403@延时脚本在JavaScript中的作用
  • deferasync 属性对脚本加载的意义不一样
  • 相同点: 都会使脚本的加载过程不阻碍html的解析
  • 不同点: defer 延时即使脚本加载完成,也会等待html解析完毕再执行脚本,而 async 则是异步加载脚本,脚本一加载完成则会立即执行脚本,可能还是会阻碍html解析
  • 相同作用:都是为了更好的html体验,减少白屏时间,优化用户体验

闭包是什么,闭包的优缺点

  • 闭包
    • 函数:封装作用域
    • 闭包:利用函数封装作用域的特性,实现了私有域变量的封装,同时暴露出方法,允许获取或者操作私有域变量
    • 实现:函数-》 函数作用域的变量声明 -》 暴露方法允许操作或者修改变量
  • 优点:私有域的变量,防止变量污染,防止全局污染,私有属性
  • 缺点:内存消耗巨大,变量不会自动回收(变量引用一直都在)

如何判断一个对象是否属于一个类

  • instanceof
    • object instanceof Object 右边参数是否存在左右对象的原型链上,存在返回 true 不存在返回 false
  • constructor
    • object.constructor === Object 一个实例在创建过程中,prototype 中会自动创建一个constructor 属性,并且指向这个构造函数

是否存在一个函数,只在当前对象查找属性,不会顺原型链查找

  • hasownproperty
    • 返回值:一个 boolean 值,该对象本身是否拥有该属性
    • 可能会有坑: hasOwnProperty 也是 Object 原型链上一个属性,可以被重写

document.write和innerHTML的区别


在JavaScript中读取文件方法是什么

  • JavaScript环境区分
    • node环境:
      • fs 库
      @H_404_22@// 1. 使用 require 方法加载 fs 核心模块 var fs = require('fs') // 2. 读取文件 // 第一个参数就是要读取的文件路径 // 第二个参数是一个回调函数 // 成功 // data 数据 // error null // 失败 // data undefined没有数据 // error 错误对象 fs.readFile('read.txt',function (error,data) { // 在这里就可以通过判断 error 来确认是否有错误发生 if (error) { console.log('读取文件失败了') } else { console.log(data.toString()) } })
    • 浏览器环境: @H_404_22@ function readAjaxFile(url) { // 创建xhr var xhr = new XMLHttpRequest(); // 监听状态 xhr.onreadystatechange = function() { // 监听状态值 if(xhr.readyState === 1 && xhr.status === 200) { console.log(xhr.responseTest) } } // 打开请求 xhr.open('GET',url,true) // 发送数据 xhr.send(null) } @H_404_22@ let file = document.queryselector('file-input')[0].file[0] let reader = new FileReader() reader.readAsText(file) reader.onload = function(data) { console.log(data,this.result); }

Javascript如何分配对象属性

  • 对象赋值?
    • . 属性点操作赋值 obj.test = 1
    • [] 方括号属性操作 obj['test'] = 1
    • 区别:方括号内部允许变量动态值,点属性只能直接获取属性

相关文章

总结

以上是编程之家为你收集整理的前端面试题集锦-2021年前端面试题收集题库1全部内容,希望文章能够帮你解决前端面试题集锦-2021年前端面试题收集题库1所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

猜你在找的前端面试题相关文章

1.Javascript延迟加载有哪些方式 浏览器解析html全过程 解析HTML结构 遇到script脚本标签(无async,defer)直接执行,或者加载,并且执行script(会阻塞HTML)
常见的javascript 语句基本规范 1.变量和函数的命名规则 命名规则-驼峰命名法 构造函数首字母大写 2.空格,缩进,注释的使用规范 一般使用2空格代替tab 注释多行用 /** */ 单行注
NO1.下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用css3中的功能实现它们的布局。 已知HTML结构是: 此题的目的自己认为是主要
浏览器相关 浏览器最大并发量限制是多少个?及如何去突破这个限制? 浏览器最大并发量限制 浏览器的并发连接数是有限的,一般是4到6个,在10个以内。 如果你的网站打开加载的资源过多,一般可以用按需加载,
第1题 A:["1", "2", "3"] B:[1, 2, 3] C:[0, 1, 2] D:other 解释:该题目的答案为:[1, N
作为一个.NET程序员,应该知道的不仅仅是拖拽一个控件到设计时窗口中。就像一个赛车手,一定要了解他的爱车 – 能做什么不能做什么。 本文参考Scott Hanselman给出的.NET问题列表,整理如
又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦
JSON是什么? JSON(JavaScript对象表示法), 是在网络通信下,常用的一种数据表达格式,它有助于我们于一个自描述的,独立的和轻的方式呈现并交换数据。这些数据可以易于和转换为JavaSc
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注