JavaScript基础知识总结

时间  2019-11-07
标签 javascript 基础 知识 总结 栏目 JavaScript 繁體版
原文   原文链接

要点：数据类型、面向对象、继承、闭包、插件、做用域、跨域、原型链、模块化、自定义事件、异步装载回调、模板引擎、Nodejs等。javascript

JS基本类型有什么？引用类型有什么？

基本类型：number,string,boolean,undefined,null
引用类型：基本类型之外的都是引用类型，如object/array/function/date等等
关于基本类型与引用类型的区别能够详细看看@Naraku_的这篇文章：
[ JS 进阶 ] 基本类型 引用类型 简单赋值 对象引用
概况起来有这么几个要点：css

1.咱们没法给基本类型的对象添加属性和方法；前端

var m1 = 123;
m1.name = 'abc';
console.log(m1.name); //输出：undefined

2.基本类型对象的比较是值比较，而引用类型对象的比较是引用比较；java

var m1 = 123,
    m2 = 123;
console.log(m1 === m2); //输出：true

var o1 = {},
    o2 = {};
console.log(o1 === o2); //输出：false

3.基本类型对象是存储在栈内存中的，而引用类型对象实际上是一个存储在栈内存中的一个堆内存地址。
clipboard.pngjquery

clipboard.png

4.基本类型对象赋值时（执行=号操做），是在栈内存中建立一个新的空间，而后将值复制一份到新的空间里。
clipboard.png程序员

5.引用类型对象赋值时（执行=号操做），也是在栈内存中复制一份同样的值，但这个值是一个堆内存地址，因此被赋值的那个对象跟前者实际上是一个对象。
clipboard.pngajax

var o1 = {};
var o2 = o1;

o1.name = 'abc';
console.log(o1.name); // --> abc
console.log(o2.name); // --> abc

o2.age = '123';
console.log(o1.age); // --> 123
console.log(o2.age); // --> 123

JS中的常见对置对象类

js的常见内置对象类：Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...数据库

来一道容易错的小题

1.你们都知道typeof null输出Object。那么null instanceof Object吗？npm

console.log( typeof null ) //输出Object
console.log( null instanceof Object) //输出什么？

答案：false
虽然typeof null输出Object，但null不是Object的一个实例。null是一个基本类型。之因此typeof null输出Object，跟浏览器的实现有关。json

JS对象有哪几种建立方法

这个问题常常会被问道，会写JavaScript的人都会建立对象，时时刻刻都在用对象，但真被问起这个问题，估计不少人都没认真思考过。
网上关于这个问题的答案也很是多，说法还不太同样，什么构造函数方法/原型方法/混合方法等等，乱七八糟的。
在这里，我试试捋一捋，但愿可以给你一个清晰的答案。

1.字面量方式：

这是最简单最基本的一种方法。
var obj = {};//建立了一个空的对象
字面量方法有两种经常使用的形式。
一种是简单字面量，像上面那样先建立一个空对象，而后再给这个对象加属性和函数。
var obj = {};
obj.attr1 = 123;
obj.attr2 = 'abc';
obj.func1 = function(){...};
obj.func2 = function(){...};
另外一种是嵌入式字面量，像写JSON数据似的，直接在大括号中写属性和函数。
var obj = {
    attr1 : 123,
    attr2 : 'abc',
    func1 : function(){...},
    func2 : function(){...}
};

2.简单的构造函数方式

经过new Person()这样的形式建立对象。用new这个关键字是为了讨好习惯了C++/Java的程序员的使用习惯。但也是JS的一大败笔（大牛都是这么说的，我只是有样学样）。
function Person(name,age){
    this.name = name;
    this.age = age;
}
var p1 = new Person('Peter',20);
var p2 = new Person('Jack',21);

3.原型方式

function Person(){}
Person.prototype.say = function(){...};
var p1 = new Person();
var p2 = new Person();
跟简单的构造函数形式不一样的是，绑在this上的name/age是p1/p2对象独占的（私有的），而绑在prototype上的say方法是p1/p2对象共享的（公有的）。

4.构造函数+原型

有的人把这种方式称为“混合模式”，其实不是什么独特的模式，而是由于单纯地使用构造函数和单纯地使用原型方式都是不合适的。
试想一下，类的概念就是但愿属于这个类的对象有着相同名称的属性和方法，但属性是私有的，方法是共享的，你叫什么名字，几岁，是你这对象私有的属性，但说话这动做是你们都同样，只是内容不同而已，全部方法应该共享的。
结合上面的简单构造函数和原型，一个完整的构造函数应该是这样的：
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.say = function(){
    console.log("My name is "+this.name+". I'm "+this.age+" years old.");
}

var p1 = new Person('Peter',20);
var p2 = new Person('Jack',21);

还有一种方法就是ES5提供的Object.create()

简单实现下JS中的Map，forEach，reduce

Array.prototype.map = function (fn) {
    var resultArray = [];
    for (var i = 0,len = this.length; i < len ; i++) {
         resultArray[i] = fn.apply(this,[this[i],i,this]);
    }
    return resultArray;
}

Array.prototype.forEach = function (fn) {
    for (var i = 0,len = this.length; i < len ; i++) {
         fn.apply(this,[this[i],i,this]);
    }
}

Array.prototype.reduce= function (fn) {
    var formerResult = this[0];
    for (var i = 1,len = this.length; i < len ; i++) {
         formerResult = fn.apply(this,[formerResult,this[i],i,this]);
    }
    return formerResult;
}

1.建立一个对象

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() { alert(this.name) } 
  }

2.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化。

可是总有一个原则，那就是this指的是调用函数的那个对象。

this通常状况下：是全局对象Global。 做为方法调用，那么this就是指这个对象

3.事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

  1. 咱们在网页中的某个操做（有的操做对应多个事件）。例如：当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为。

  2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；

  3. ev.stopPropagation();

4.什么是闭包（closure），为何要用？

待完善

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，由于say667()的内部函数的执行须要依赖say667()中的变量。这是对闭包做用的很是直白的描述.

  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//执行结果应该弹出的667

5.如何判断一个对象是否属于某个类？

使用instanceof （待完善）

if(a instanceof Person){
       alert('yes');
   }

6.new操做符具体干了什么呢?

一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
二、属性和方法被加入到 this 引用的对象中。
三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

7.JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}

8.js延迟加载的方式有哪些

defer和async、动态建立DOM方式（用得最多）、按需异步载入js

9.ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

待完善

  1. 经过异步模式，提高了用户体验

  2. 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用

  3. Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。

  4. Ajax的最大的特色是什么。

    Ajax能够实现动态不刷新（局部刷新）
    readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

    ajax的缺点

    一、ajax不支持浏览器back按钮。

    二、安全问题 AJAX暴露了与服务器交互的细节。

    三、对搜索引擎的支持比较弱。

    四、破坏了程序的异常机制。

    五、不容易调试。

    跨域： jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

10.模块化怎么作？

当即执行函数,不暴露私有成员

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

11.对Node的优势和缺点提出了本身的见解：

*（优势）由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求，
  所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好得多。
  此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
  所以客户端和服务器端都用同一种语言编写，这是很是美妙的事情。

*（缺点）Node是一个相对新的开源项目，因此不太稳定，它老是一直在变，
  并且缺乏足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

12.异步加载的方式

(1) defer，只支持IE

(2) async：

(3) 建立script，插入到DOM中，加载完毕后callBack

documen.write和 innerHTML的区别

  document.write只能重绘整个页面

  innerHTML能够重绘页面的一部分

13.告诉我答案是多少？

(function(x){

delete x;
alert(x);

})(1+5);

函数参数没法delete删除，delete只能删除经过for in访问的属性。
固然，删除失败也不会报错，因此代码运行会弹出“1”。

14.JS中的call()和apply()方法的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，因此运行结果为：alert(4);

注意：js 中的函数实际上是对象，函数名是对 Function 对象的引用。

function add(a,b)
{

alert(a+b);

}

function sub(a,b)
{

alert(a-b);

}

add.call(sub,3,1);

15.Jquery与jQuery UI 有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
 提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等

16.jquery 中如何将数组转化为json字符串，而后再转化回来？

jQuery中没有提供这个功能，因此你须要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
    return JSON.parse(array)
} 

而后调用：
$("").stringifyArray(array)

17.JavaScript中的做用域与变量声明提高？
其余部分
（HTTP、正则、优化、重构、响应式、移动端、团队协做、SEO、UED、职业生涯）

*基于Class的选择性的性能相对于Id选择器开销很大，由于需遍历全部DOM元素。

*频繁操做的DOM，先缓存起来再操做。用Jquery的链式调用更好。   
 好比：var str=$("a").attr("href");

*for (var i = size; i < arr.length; i++) {}
 for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可让循环跑得更快： 
 for (var i = size, length = arr.length; i < length; i++) {}

前端开发的优化问题（看雅虎14条性能优化原则）。

  （1） 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  （2） 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数

  （3） 用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。

  （4） 当须要设置的样式不少时设置className而不是直接操做style。

  （5） 少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。

  （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

  （8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。

http状态码有那些？分别表明是什么意思？

100-199 用于指定客户端应相应的某些动做。 
200-299 用于表示请求成功。 
300-399 用于已经移动的文件而且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。400    一、语义有误，当前请求没法被服务器理解。401   当前请求须要用户验证 403  服务器已经理解请求，可是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？（流程说的越详细越好）

你所知道的页面性能优化方法有那些？

除了前端之外还了解什么其它技术么？你最最厉害的技能是什么？

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

18.谈谈你认为怎样作能是项目作的更好？

19.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

20.加班的见解

加班就像借钱，原则应当是------救急不救穷

21.平时如何管理你的项目，如何设计突发大规模并发架构？

先期团队必须肯定好全局样式（globe.css），编码模式(utf-8) 等

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）

JS 分文件夹存放 命民以该JS 功能为准英文翻译；

图片采用整合的 images.png png8 格式文件使用 尽可能整合在一块儿使用方便未来的管理

那些操做会形成内存泄漏？

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。
垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

23.你说你热爱前端，那么应该WEB行业的发展很关注吧？ 说说最近最流行的一些东西吧？

Node.js、Mongodb、npmM、MVVM、MEAN

24.你有了解咱们公司吗？说说你的认识？

由于我想去阿里，因此我针对阿里的说
最羡慕就是在双十一购物节，350.19亿元，每分钟支付79万笔。海量数据，竟然无一漏单、无一故障。太厉害了。

25.移动端（好比：Android IOS）怎么作好用户体验?

做为一名前端工程师，不管工做年头长短都应该必须掌握的知识点有：

一、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

二、DOM操做 ——如何添加、移除、移动、复制、建立和查找节点等。

三、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差异。

四、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

五、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

六、盒模型 —— 外边距、内边距和边框之间的关系，及IE8如下版本的浏览器中的盒模型

七、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

八、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

九、HTML与XHTML——两者有什么区别，你以为应该使用哪个并说出理由。

十、JSON —— 做用、用途、设计结构。
他们也许不懂交互设计，可是没人比他们懂交互设计的实现，和每个细节。
他们也许不懂视觉设计，可是没人比他们懂视觉设计如何变为现实。
他们也许不懂后台数据库，可是他们其实才是数据的第一消费者。
他们也许不是产品经理，可是产品的质量几乎都是由他们来决定。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程