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

对象-继承-面向对象
- 创建对象第一个想到的关键字是 new
- 创建对象的目的是实现继承，继承部分通用属性
- 问题可以转换成： JavaScript如何实现对象的继承，继承的形式
构造函数
- 首先定义一个构造函数，可以传入构造参数，demo如下：
```
    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关键字

    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(){
```
      }
      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
- 限制：实例对原型对象引用属性的修改会修改所有实例的原型属性，没法做到独立性

组合使用 原型模式和构造函数

在使用构造函数的保证实例属性独立的前提下，原型属性也使用，实现混合模式

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

  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 中构造函数如果有返回值的情况会怎么样
  - 无返回值：实例为正常实例化对象
  - 有返回值但是返回值为非引用类型：实例为正常实例化对象
  - 有返回值并且返回值为引用类型：实例为返回值引用对象
- 所谓寄生构造函数就是创建一个函数，然这个函数只是封装创建对象的代码，然后再返回新创建的对象。
```
```: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的resolve和reject方法，将promise状态置为resolved和rejected，promise对象会在状态转变时自动调用resolve回调或者是reject回调
- 优点：代码结构优秀，可以链式调用
发布/订阅模式
- 相当于有个事件bus，任何监听了bus事件的订阅者，在bug触发一定事件时都会执行相应回调函数
事件监听
- 事件监听其实也是发布订阅模式的一种形式，在事件触发时，所有订阅者的对应函数都会被执行，常用的是vue的bus
async/await
- ES6 中可迭代对象，可以使用next()生成，下一个序列的可迭代属性，在手动调用next方法时，只要返回值done不是true，则会阻塞下一次next()的调用
- 所以通过next 的阻塞作用，使用async和await达到异步阻塞，在前者执行完之前不会执行后者，达到异步的效果
- 可以结合Promise同时使用

Javascript 的同源策略

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

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

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

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

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

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

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

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则是使用Object 的delete 方法

延时脚本在JavaScript中的作用

defer 和 async 属性对脚本加载的意义不一样
相同点：都会使脚本的加载过程不阻碍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的区别

是否重绘整个页面：
- document.write在修改html片段之后会重绘页面
- innerHtml修改html片段会重绘部分页面片段

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

JavaScript环境区分

node环境：

fs 库

// 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())
}
})

浏览器环境：

后端读取文件，返回前端解析前端通过 xhr http 请求拿取文件内容

            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)
                }

前端通过input 上传文件

    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

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

Javascript中如何实现异步编程

Javascript 的同源策略

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

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

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

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

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

attribute 和 property的区别

延时脚本在JavaScript中的作用

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

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

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

document.write和innerHTML的区别

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

Javascript如何分配对象属性

相关推荐