JavaScript基础知识总结

头像
Asrocky
    阅读 8 分钟
    6

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

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

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

    1.我们无法给基本类型的对象添加属性和方法；

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

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

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

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

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

    clipboard.png

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

    5.引用类型对象赋值时（执行=号操作），也是在栈内存中复制一份一样的值，但这个值是一个堆内存地址，所以被赋值的那个对象跟前者其实是一个对象。
    clipboard.png

    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吗？

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

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

    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操作符具体干了什么呢?

    1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
    2、属性和方法被加入到 this 引用的对象中。
    3、新创建的对象由 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的缺点

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

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

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

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

      5、不容易调试。

      跨域： 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    1、语义有误，当前请求无法被服务器理解。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）怎么做好用户体验?

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

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

2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

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

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

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

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

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

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

9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

    他们也许不懂交互设计，但是没人比他们懂交互设计的实现，和每一个细节。
他们也许不懂视觉设计，但是没人比他们懂视觉设计如何变为现实。
他们也许不懂后台数据库，但是他们其实才是数据的第一消费者。
他们也许不是产品经理，但是产品的质量几乎都是由他们来决定。
    javascript
    Asrocky
    420 声望36 粉丝
    « 上一篇
    HTML/CSS基础知识总结
    下一篇 »
    Angular+Require

    引用和评论

    推荐阅读
    头像
    Leveling Up With React: React Router

    Asrocky阅读 2.1k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新