前端面试:基础javascript篇(一)

1get请求传参长度的误区

误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:

HTTP 协议未规定 GET POST的长度限制

GET的最大长度显示是因为浏览器和 web服务器限制了 URI的长度

不同的浏览器和WEB服务器,限制的最大长度不一样

要支持IE,则最大长度为2083byte,若只支持Chrome,则最大长度 8182byte

 

2)补充getpost请求在缓存方面的区别

1get请求和post请求的区别

   https://www.cnblogs.com/logsharing/p/8448446.html

GETPOST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。GETPOST还有一个重大区别,简单的说:GET产生一个TCP数据包;POST产生两个TCP数据包。对于GET方式的请求,浏览器会把http headerdata一并发送出去,服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。

post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

 

闭包

   闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。

 

 54. 类的创建和继承

1)类的创建(es5):new一个function,在这个functionprototype里面增加属性和方法。

 

下面来创建一个Animal类:

 

// 定义一个动物类

function Animal (name) {

  // 属性

  this.name = name || ‘Animal‘;

  // 实例方法

  this.sleep = function(){

    console.log(this.name + ‘正在睡觉!‘);

  }

}

// 原型方法

Animal.prototype.eat = function(food) {

  console.log(this.name + ‘正在吃:‘ + food);

};

复制代码

这样就生成了一个Animal类,实力化生成对象后,有方法和属性。

 

2)类的继承——原型链继承

 

--原型链继承

function Cat(){ }

Cat.prototype = new Animal();

Cat.prototype.name = ‘cat‘;

//?Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.eat(‘fish‘));

console.log(cat.sleep());

console.log(cat instanceof Animal); //true

console.log(cat instanceof Cat); //true

复制代码

介绍:在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象,这种就是基于原型链的继承。

特点:基于原型链,既是父类的实例,也是子类的实例

缺点:无法实现多继承

3)构造继承:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

 

function Cat(name){

  Animal.call(this);

  this.name = name || ‘Tom‘;

}

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // false

console.log(cat instanceof Cat); // true

复制代码

特点:可以实现多继承

缺点:只能继承父类实例的属性和方法,不能继承原型上的属性和方法。

4)实例继承和拷贝继承

 

实例继承:为父类实例添加新特性,作为子类实例返回

 

拷贝继承:拷贝父类元素上的属性和方法

 

上述两个实用性不强,不一一举例。

 

5)组合继承:相当于构造继承和原型链继承的组合体。通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

 

function Cat(name){

  Animal.call(this);

  this.name = name || ‘Tom‘;

}

Cat.prototype = new Animal();

Cat.prototype.constructor = Cat;

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); // true

复制代码

特点:可以继承实例属性/方法,也可以继承原型属性/方法

缺点:调用了两次父类构造函数,生成了两份实例

6)寄生组合继承:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性

 

function Cat(name){

  Animal.call(this);

  this.name = name || ‘Tom‘;

}

(function(){

  // 创建一个没有实例方法的类

  var Super = function(){};

  Super.prototype = Animal.prototype;

  //将实例作为子类的原型

  Cat.prototype = new Super();

})();

// Test Code

var cat = new Cat();

console.log(cat.name);

console.log(cat.sleep());

console.log(cat instanceof Animal); // true

console.log(cat instanceof Cat); //true

复制代码

较为推荐

 

5. 如何解决异步回调地狱

promisegeneratorasync/await

 

6. 说说前端中的事件流

HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

 

什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

 

事件捕获阶段

处于目标阶段

事件冒泡阶段

addEventListeneraddEventListener DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡。

 

7. 如何让事件先冒泡后捕获

DOM标准事件模型中,是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件被捕获后再执行捕获之间。

 

8. 事件委托

简介:事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。

举例:最经典的就是ulli标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。

好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。

 

9. 图片的懒加载和预加载

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

 

10. mouseovermouseenter的区别

mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过程。对应的移除事件是mouseout

mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

 

原文地址:https://www.cnblogs.com/love-life-insist/p/10254413.html

时间: 2024-10-06 00:11:34

前端面试:基础javascript篇(一)的相关文章

前端面试基础-html篇之H5新特性

h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Storage (重点)Websocket HTML语义化是什么? 语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析. 为什么要语义化? 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各

Java面试基础 -- Git篇

1.Git和SVN有什么区别? Git SVN Git是一个分布式的版本控制工具 SVN 是集中版本控制工具 它属于第3代版本控制工具 它属于第2代版本控制工具 客户端可以在其本地系统上克隆整个存储库 版本历史记录存储在服务器端存储库中 即使离线也可以提交 只允许在线提交 push/pull 操作更快 Push/pull 操作较慢 工程可以用 commit 自动共享 没有任何东西自动共享 2.什么是Git? Git 是分布式版本控制系统,可以跟踪文件的更改,并允许你恢复到任何特定版本的更改,优点

前端面试之ES6篇(高产似母猪)

这也是前端面试经常询问的问题,经常问你es6出现了哪些新的特性,平时又使用过那些.在编写此教程的时候,第一句话往往就是面试常常问到的地方,然后后面就是他的详细解释,面试要求的内容我会用*标记出来.写技术文档是真的累啊,虽然是看别人的文档,但是你得看很多,而且还得自己总结啊.所以说要是觉得对你有用还是帮我点个star吧https://github.com/skychenbo 1.箭头函数需要注意的地方 2.ES6 let.const 3.set数据结构 4.promise对象的用法,手写一个pro

前端面试:基础javascript篇(二)

11. js的new操作符做了哪些事情 new 操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象.   12. 改变函数内部this指针的指向函数(bind,apply,call的区别) 通过apply和call改变函数的this指向,他们两个函数的第一个参数都是一样的表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2...这种形式. 通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行.  

前端面试系列--前言篇

这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明 ??作为半个科班出身学数学的应届生,在学习计算机的时候还是比较吃力的,从今年3月份开始接触前端,到现在也有8个月左右了.也许是初生牛犊不怕虎,我在5月份就各种投简历找实习,当时我甚至连前端是什么都不知道,只学过html和css,还只是通过看<Head First Html与Css>来了解关于写页面的知识的,这本书是2013年出版的,距离现在已经有5年的时间了,现在看

前端面试集锦——CSS篇

三.CSS篇 3.1.谈谈你对CSS布局的理解 3.2.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div ></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasLayou

前端总结之JavaScript篇

1.原型 / 构造函数 / 实例 原型( prototype ): ?个简单的对象,?于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个 JavaScript 对象中都包含?个 proto (?标准)的属性指向它爹(该对象的原型),可  obj. proto 进?访问.构造函数: 可以通过 new 来 新建?个对象 的函数. 实例: 通过构造函数和  new 创建出来的对象,便是实例. 实例通过   proto 指向原 型,通过 constructo

前端面试之Javascript

1,JS基本的数据类型和引用类型: (1)基本数据类型:number,string,null,undefined,symbol--栈: (2)引用数据类型:object,array,function--堆: 两种数据类型存储位置不同: 1),原始数据类型是直接存储在栈中的简单数据段,占据空间小,大小固定,属于被频繁使用数据. 2),引用数据类型存储在堆中的对象,占据空间大,大小不固定,如果存储在栈中,将会影响程序运行的性能. 3),引用数据类型在栈中存储了指针,该指针指向堆中该实体的起止地址.

前端知识点回顾——Javascript篇(六)

fetch 在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象. fetch(url, initObj) .then(res=>res.json()) .then(data=>{ //这里得到返回的json对象,可进行操作 }) .cateh(err){ console.log(err); }; //initObj { body: JSON.stringify(data), // must match 'Content-Type' header cache: