js面试题（上）

2023年3月19日 175次阅读来源: 篱笆

原型 / 组织函数 / 实例

对原型的明白

我们晓得在es6之前，js没有类和继承的观点，js是经由历程原型来完成继承的。在js中一个组织函数默许自带有一个prototype属性，这个的属性值是一个对象，同时这个prototype对象自带有一个constructor属性，这个属性指向这个组织函数，同时每一个实例都有一个__proto__属性指向这个prototype对象，我们能够将这个叫做隐式原型，我们在运用一个实例的要领的时刻，会先搜检这个实例中是不是有这个要领，没有则会继承向上查找这个prototype对象是不是有这个要领，方才我们说到prototype是一个对象，那末也等于说这个是一个对象的实例，那末这个对象一样也会有一个__proto__属性指向对象的prototype对象。

原型链

JS 原型与原型链

实行上下文(EC)

变量对象

javascript有哪些要领定义对象

对象字面量： var obj = {};
组织函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

作用域

作用域链

作用域链的道理和原型链很相似，假如这个变量在本身的作用域中没有，那末它会寻觅父级的，直到最顶层。
注重：JS没有块级作用域，若要构成块级作用域，可经由历程（function（）｛｝）（）；马上实行的情势完成。

闭包

闭包指的是一个函数能够接见另一个函数作用域中变量。罕见的组织要领，是在一个函数内部定义别的一个函数。内部函数能够援用外层的变量；外层变量不会被渣滓接纳机制接纳。
注重，闭包的道理是作用域链，所以闭包接见的上级作用域中的变量是个对象，其值为其运算完毕后的末了一个值。
长处：防止全局变量污染。瑕玷：轻易构成内存走漏。
例子：

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        console.log(name); 
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();   //输出Mozilla

myFunc 变成一个闭包。闭包是一种特别的对象。它由两部分构成：函数，以及建立该函数的环境。环境由闭包建立时在作用域中的任何局部变量构成。在我们的例子中，myFunc 是一个闭包，由 displayName 函数和闭包建立时存在的 “Mozilla” 字符串构成。

script引入体式格局

对象的拷贝

这道题考核了以下知识点：
运用 typeof 推断值得范例；
运用 toString 辨别数组和对象；
递归函数的运用；

完成一个函数 clone()，能够对 JavaScript 中的5种重要的数据范例（包含 Number、String、Object、Array、Boolean）举行值复制。

function clone(obj) {
    //推断是对象，就举行轮回复制
    if (typeof obj === 'object' && typeof obj !== 'null') {
        // 辨别是数组照样对象，建立空的数组或对象
        var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
        for (var k in obj) {
            // 假如属性对应的值为对象，则递归复制
            if(typeof obj[k] === 'object' && typeof obj[k] !== 'null'){
                o[k] = clone(obj[k])
            }else{
                o[k] = obj[k];
            }
        }
    }else{ //不为对象，直接把值返回
        return obj;
    }
    return o;
}

new运算符的实行历程

1) 建立一个空对象，而且 this 变量援用该对象，同时还继承了该函数的原型。
2) 属性和要领被加入到 this 援用的对象中。
3) 新建立的对象由 this 所援用，而且末了隐式的返回 this 。

运用new操作符实例化一个对象的具体步骤
1.组织一个新的对象
2.将组织函数的作用域赋给新对象（也就是说this指向了新的对象）
3.实行组织函数中的代码
4.返回新对象

instanceof道理

代码的复用

继承

其他题目

Javascript完成继承的几种体式格局：JavaScript完成类与继承的要领（周全整顿）

js数据范例

其他题目

typeof 返回哪些数据范例

typeof 返回七种值：
“number”、“string”、“boolean”、“object”、”symbol”、“function”和“undefined”。
typeof undefined、null、NaN离别返回undefined,object,number

JavaScript有几种范例的值？你能画一下他们的内存图吗？

基础数据范例存储在栈中，援用数据范例（对象）存储在堆中，指针放在栈中。
两种范例的区分是：存储位置差别；原始数据范例直接存储在栈中的简朴数据段，占有空间小、大小牢固，属于被频仍运用数据，所以放入栈中存储；援用数据范例存储在堆中的对象,占有空间大、大小不牢固,假如存储在栈中，将会影响顺序运转的机能
援用数据范例在栈中存储了指针，该指针指向堆中该实体的肇端地点。当诠释器寻觅援用值时，会起首检索其在栈中的地点，取得地点后从堆中取得实体。

栈和堆的区分

栈（stack）：由编译器自动分派开释，寄存函数的参数值，局部变量等；
堆（heap）：平常由顺序员分派开释，若顺序员不开释，顺序完毕时能够由操作体系开释。

范例转换

对象到数字的转换步骤

假如对象有valueOf()要领而且返回元素值，javascript将返回值转换为数字作为效果
不然，假如对象有toString()而且返回原始值，javascript将返回效果转换为数字作为效果
不然，throws a TypeError

对象到字符串的转换步骤

1.假如对象有toString()要领，javascript挪用它。假如返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为效果
2.假如对象没有toString()要领或许返回值不是原始值，javascript寻觅对象的valueOf()要领，假如存在就挪用它，返回效果是原始值则转为字符串作为效果
3.不然，javascript不能从toString()或许valueOf()取得一个原始值，此时throws a TypeError

范例推断

javascript做范例推断的要领有哪些？

typeof、instanceof 、 Object.prototype.toString()(待续)

完成一个范例推断函数，须要判别出基础范例、function、null、NaN、数组、对象？

只须要判别这些范例那末运用typeof即可，要判别null先推断双等推断是不是为null，以后运用typeof推断，假如是obejct的话，再用Array.isArray推断是不是为数组，假如是数字再运用isNaN推断是不是为NaN,（须要注重的是NaN并不是JavaScript数据范例，而是一种特别值）以下：

function type(ele) {
  if(ele===null) {
    return null;
  } else if(typeof ele === 'object') {
    if(Array.isArray(ele)) {
      return 'array';
    } else {
      return typeof ele;
    }
  } else if(typeof ele === 'number') {
    if(isNaN(ele)) {
      return NaN;
    } else {
      return typeof ele;
    }
  } else{
    return typeof ele;
  }
}

模块化

对js模块化的明白

在ES6涌现之前，js没有范例的模块化观点，这也就构成了js多人写作开辟轻易构成全局污染的状况，之前我们能够会采纳马上实行函数、对象等体式格局来只管削减变量这类状况，背面社区为了处置惩罚这个题目一连提出了AMD范例和CMD范例，这里差别于Node.js的 CommonJS的缘由在于服务端一切的模块都是存在于硬盘中的，加载和读取几乎是不须要时候的，而浏览器端因为加载速率取决于网速，因而须要采纳异步加载，AMD范例中运用define来定义一个模块，运用require要领来加载一个模块，如今ES6也推出了范例的模块加载计划，经由历程export和import来导出和导入模块。

模块化开辟怎么做

模块化开辟指的是在处置惩罚某一个庞杂题目或许一系列题目时，遵照一种分类的头脑把题目举行体系性的剖析。模块化是一种将庞杂体系剖析为代码构造更合理，可维护性更高的可治理的模块体式格局。关于软件行业：体系被剖析为一组高内聚，低耦合的模块。
（1）定义封装的模块
（2）定义新模块对其他模块的依靠
（3）可对其他模块的引入支撑。在JavaScript中涌现了一些非传统模块开辟体式格局的范例。 CommonJS的模块范例，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。AMD是异步模块定义，一切的模块将被异步加载，模块加载不影响后边语句运转。

怎样完成一个JS的AMD模块加载器

AMD是处置惩罚JS模块化的范例，完成如许的一个模块加载器的关键在于处置惩罚每一个模块依靠的剖析。起首我们须要有一个模块的进口，也就是主模块，比方我们运用一个use要领作为进口，以后以数组的情势列出了主模块的依靠，这时刻我们要想到的是怎样剖析这一个一个的依靠，也就是怎样剖析出一个个js文件的相对地点，我们能够制订一个划定规矩，如默许为主模块的途径为基准，也能够像requirejs一样运用一个config要领来指定一个baseurl和为每一个模块指定一个path，末了就是模块的题目，我们须要暴露一个define要领来定义模块，也就是模块名，依靠以及每一个模块的各自代码。个中每一个模块的代码都应该在依靠加载完以后实行，这就是一个回调函数，模块的依靠、回调函数、状况、名字、模块导出等能够看作是一个模块的属性，因而我们能够运用一个对象来保留一切的模块，然后每一个模块的各个属性寄存在一个对象中。末了我们来考虑一下模块加载的题目，上面我们说到use要领，use要领的逻辑就是遍历依靠，然后对每一个模块举行加载，也就是剖析地点然后运用插进去script，我们假定运用loadModule要领来加载依靠，那末这个函数的逻辑就应该是搜检我们的模块是不是已加载过来推断是不是须要加载，假如这个模块另有依靠则挪用use要领继承剖析，模块依靠中我们还没有提到的题目就是每一个模块的依靠是须要被传进模块里来运用的，处置惩罚要领就是每一个模块的callback要领实行后的返回的export记录下来然后运用apply之类的要领将这些参数通报进去。大抵就是如许子的。

参考：
着手完成一个AMD模块加载器(一)
着手完成一个AMD模块加载器(二)
着手完成一个AMD模块加载器(三)

防抖和撙节

函数撙节就是让一个函数没法在很短的时候距离内一连挪用，而是距离一段时候实行，这在我们为元素绑定一些事宜的时刻常常会用到，比方我们为window绑定了一个resize事宜，假如用户一向转变窗口大小，就会一向触发这个事宜处置惩罚函数，这对机能有很大影响。
什么是函数撙节？
前端口试查漏补缺–(一) 防抖和撙节

函数实行转变this

谈谈对this对象的明白

1) this老是指向函数的直接挪用者（而非间接挪用者）
2) 假如有new关键字，this指向new出来的谁人对象
3) 在事宜中，this指向目的元素，特别的是IE的attachEvent中的this老是指向全局对象window。

ES6/ES7

扼要引见ES6

ES6在变量的声明和定义方面增添了let、const声明变量，有局部变量的观点，赋值中有比较吸引人的构造赋值，同时ES6对字符串、数组、正则、对象、函数等拓展了一些要领，如字符串方面的模板字符串、函数方面的默许参数、对象方面属性的简约表达体式格局，ES6也引入了新的数据范例symbol，新的数据构造set和map,symbol能够经由历程typeof检测出来，为处置惩罚异步回调题目，引入了promise和 generator，另有最为吸引人了完成Class和模块，经由历程Class能够更好的面向对象编程，运用模块加载轻易模块化编程，固然考虑到浏览器兼容性，我们在现实开辟中须要运用babel举行编译。

let、const、var的运用区分

let: 相当于var,用于声明一个变量,在块级作用域有用(可处置惩罚for轮回题目);不能反复声明;不会变量提拔;不会预处置惩罚
const: 用于定义一个常量，不能修正，其他特性等同于let，用于保留不必转变的数据

Map与一般对象的区分

JavaScript 的对象（Object），本质上是键值对的鸠合（Hash 构造），然则传统上只能用字符串看成键。这给它的运用带来了很大的限定。为了处置惩罚这个题目，ES6 供应了 Map 数据构造。它相似于对象，也是键值对的鸠合，然则“键”的局限不限于字符串，各种范例的值（包含对象）都能够看成键。也就是说，Object 构造供应了“字符串—值”的对应，Map 构造供应了“值—值”的对应，是一种更完美的 Hash 构造完成。假如你须要“键值对”的数据构造，Map 比 Object 更适宜。

AST

babel编译道理

函数柯里化

数组

推断数组

Array.isArray([]);  // true
Array.isArray(undefined); // false;

或许
array instanceof Array; // true 检测对象的原型链是不是指向组织函数的prototype对象
或许
array.constructor === Array; // true

最终大招：
if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

注重：typeof []; // "object" 不能够用此要领搜检！！！

null，undefined的区分

null示意一个对象被定义了，但寄存了空指针，转换为数值时为0。
undefined示意声明的变量未初始化，转换为数值时为NAN。
typeof(null) — object;
typeof(undefined) — undefined

[“1”, “2”, “3”].map(parseInt) 答案是多少

[1,NaN,NaN]

剖析：
Array.prototype.map()
array.map(callback[, thisArg])
callback函数的实行划定规矩
参数：自动传入三个参数
currentValue（当前被通报的元素）；
index（当前被通报的元素的索引）；
array（挪用map要领的数组）

parseInt要领吸收两个参数
第三个参数[“1”, “2”, “3”]将被疏忽。parseInt要领将会经由历程以下体式格局被挪用
parseInt(“1”, 0)
parseInt(“2”, 1)
parseInt(“3”, 2)

parseInt的第二个参数radix为0时，ECMAScript5将string作为十进制数字的字符串剖析；
parseInt的第二个参数radix为1时，剖析效果为NaN；
parseInt的第二个参数radix在2—36之间时，假如string参数的第一个字符（除空缺之外），不属于radix指定进制下的字符，剖析效果为NaN。
parseInt(“3”, 2)实行时，因为”3″不属于二进制字符，剖析效果为NaN。

关于事宜，IE与火狐的事宜机制有什么区分？怎样阻挠冒泡？

IE为事宜冒泡，Firefox同时支撑事宜捕捉和事宜冒泡。但并不是一切浏览器都支撑事宜捕捉。jQuery中运用event.stopPropagation()要领可阻挠冒泡;（旧IE的要领 ev.cancelBubble = true;）

怎样阻挠事宜冒泡和默许事宜？
范例的DOM对象中能够运用事宜对象的stopPropagation()要领来阻挠事宜冒泡，但在IE8以下中IE的事宜对象经由历程设置事宜对象的cancelBubble属性为true来阻挠冒泡；默许事宜的话经由历程事宜对象的preventDefault()要领来阻挠，而IE经由历程设置事宜对象的returnValue属性为false来阻挠默许事宜。

javascript 代码中的”use strict”;是什么意义 ? 运用它区分是什么？

除了一般形式运转外，ECMAscript添加了第二种运转形式：“严厉形式”。
作用：
1) 消弭js不合理，不严谨处所，削减奇异行动
2) 消弭代码运转的不安全的地方，
3) 进步编译器的效力，增添运转速率
4) 为将来的js新版本做铺垫。

对JSON的相识

全称：JavaScript Object Notation
JSON中对象经由历程“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的情势（key：value）。JSON是JS的一个严厉的子集，一种轻量级的数据交换花样，相似于xml。数据花样简朴，易于读写，占用带宽小。
两个函数：
JSON.parse(str)
剖析JSON字符串把JSON字符串变成JavaScript值或对象
JSON.stringify(obj)
将一个JavaScript值(对象或许数组)转换为一个 JSON字符串
eval(‘(‘＋json＋’)’)
用eval要领注重加括号而且这类体式格局更轻易被进击

    原文作者：篱笆
    原文地址: https://segmentfault.com/a/1190000017548063
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

原型 / 组织函数 / 实例

原型链

实行上下文(EC)

变量对象

作用域

作用域链

闭包

script引入体式格局

对象的拷贝

new运算符的实行历程

instanceof道理

代码的复用

继承

其他题目

js数据范例

其他题目

范例转换

范例推断

模块化

防抖和撙节

函数实行转变this

ES6/ES7

AST

babel编译道理

函数柯里化

数组

null，undefined的区分

[“1”, “2”, “3”].map(parseInt) 答案是多少

关于事宜，IE与火狐的事宜机制有什么区分？ 怎样阻挠冒泡？

javascript 代码中的”use strict”;是什么意义 ? 运用它区分是什么？

对JSON的相识

关于事宜，IE与火狐的事宜机制有什么区分？怎样阻挠冒泡？