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

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,age,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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssfdy.html