web前端基础知识汇总- 面试1

128 阅读5分钟

1, js内置数据类型    -》 6种基本类型 和 对象(object)

6种基本数据类型: number、null、 undefined、 boolean、String、 symbol

JS 的数字类型是浮点类型的,没有整型;

NaN属于number类型, 且 NaN == NaN  // false;

基本数据类型就要记住几种 数据类型转换;

对象数据类型(数组和 函数都属于对象),就要记住 深拷贝和浅拷贝; 深拷贝和浅拷贝类似于Java中的  值传递和引用传递

2,typeof   输出数据类型

typeof 对于基本类型,除了 null 都可以显示正确的类型

typeof 对于对象,除了函数(显示function)都会显示 object

对于 null 来说,虽然它是基本类型,但是会显示 object,这是一个存在很久了的 Bug

3,什么是原型? 有什么作用?

首先,prototype 是 一个对象,在js中万物皆对象; 

构造函数通过原型分配的函数时所有对象共享的,(如果不使用原型, 每个由构造函数实例化的对象都会产生很多的函数,每个对象的函数都要占用空间,就会存在浪费空间的问题),每一个构造函数都会有一个 prototype 属性,叫做  原型对象

作用:(共享方法)节省了内存;拓展内置对象;实现继承;

proto   对象原型:使用 原型时,语法为  

function Star(name){
    this.name = name;

    Star.prototype.sing = function(){
        console.log(name + "在唱歌!");
    }
}
var zjl = new Star('周杰伦');
var ljj = new Star('林俊杰');
zjl.sing();
ljj.sing();

为什么 对象 可以调用 sing 方法?  这是因为 proto 对象原型的存在

每个对象都会有一个属性 proto 指向构造函数的prototype 原型对象, 之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为有__proto__原型的存在。对象的__proto__ 与构造函数的 prototype 是等价的; 方法查找规则: 首先看看实例对象 身上有没有sing方法,有就执行,没有就去查找构造函数的 prototype 身上有没有;

proto 和 prototype 都有一个 constructor 属性, constructor 指回 构造函数本身;

有时候我们会手动将constructor 指回 构造函数   ———》 当共享的函数较多时,我们会直接将 prototype = { sing:function(){ }   ,  movie : function(){}  }  ,这样的话就会丢失constructor, 需要手动设置    prototype.constructor ==  Star

4,  原型链

原型对象prototype 里面也有一个 对象原型 proto, 指向的是 Object.prototype;

Object.prototype 里面的 proto 指向的是 null;

5, js 的成员查找机制

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

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

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

依次类推,一直找到Object为止。

6,原型对象中this 指向

原型对象中this 依然指向调用者对象

7,构造函数 +  原型对象 实现   组合继承

8,说一说闭包?

说到闭包,首先要说到 变量作用域,根据作用域的不同分为: 全局变量和局部变量, 在函数内部可以使用全局变量,在函数外部不可以使用局部变量,当函数执行完毕后,本作用域中的局部变量就会销毁;所谓的闭包就是指有权访问另一个函数作用域中变量的函数

9,定时器?

setTimeout() 和setInterval() :  前者在指定时间后会执行一次,第一个参数表示要执行的代码(可以是一个函数名),第二个参数表示时间(单位为ms), 使用clearTimeout() 和 clearInterval()可以清除定时器定时器函数都会返回一个ID ,  例:

var flag = 0;
var mytimeout = setInterval(function(){
	console.log("1");
	flag++;
	while(flag == 5){

		// 清除定时器
		clearInterval(mytimeout);
	}
},2000)

深度理解定时器原理:

例: 输出的是 132  而不是 123 ? 为什么?

console.log(1);
setTimeout(function(){
	console.log(2)
},0)
console.log(3);

定时器创建的是异步任务,(JavaScript是单线程语言,只有一个主线程负责解释和执行JavaScript代码,由于单线程的原因,同一时间只能处理一个任务,其余的任务需要排队等待,并且只能按顺序来,中间不能插队),这里虽然设置的延迟时间为0ms,但也要先被放到任务队列中等待,等到主线程空闲的时候,才会从任务队列中读取任务。


**Vue **

1, Vue 的生存周期?       Vue2.0的生命周期钩子一共有10个

生命周期钩子说明
beforCreate实例初始化完成
created实例化已经完成之后被调用,数据观测,属性和方法的运算,watch/event事件回调已完成,挂载还没还没开始 $el属性上还没有
beforeMount开始挂载之前调用,相关的render函数首次被调用 此时的DOM是数据挂载前的DOM,数据还未挂载
mounted数据已挂载后调用 初始化的el被vm.$el替换,并挂载到实例上去之后的钩子
beforeUpdate数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前
updated在数据驱动下导致的虚拟DOM重新渲染和打补丁之后调用,此时,组件DOM已经更新
activatedkeep-alive 组件激活时调用 如果你使用keep-alive进行缓存, 又希望每次切换组件的时候更新数据,那么更新数据的请求方式必须写在该钩子函数里
deactivatedkeep-alive 组件停用时调用
beforeDestroy实例销毁之前调用,此时实例还可用
destroyed实例销毁后调用,实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

bootstrap 

1, 使用bootstrap 写库? 使用bootstrap 设计一个系统怎么设计?

Bootstrap只是使用HTML、CSS和JavaScript构建响应性强、以移动为优先的网站框架之一。