前端

作者: TangPiece | 来源:发表于2019-04-19 15:38 被阅读0次

前端文章系列
Web前端小白入门指迷
推荐几个好的前端博客和网站
2020-04-11
Web前端
2018-05-16
前端学习：一个好的前端导航可以更好的学习前端
2018-09-25
浏览收藏文章列表
无标题文章

* __proto__和prototype

每个对象都有__proto__，但只有函数有prototype。当你创建函数时，JS会为这个函数自动添加prototype属性，函数的prototype中是一个构造函数constructor，constructor指向函数的申明

function test() {}

var t = test;

则t.prototype中有constructor构造方法，且constructor = function test()

对象的__proto__指向自己构造函数的prototype。obj.__proto__.__proto__...的原型链由此产生，包括我们的操作符instanceof正是通过探测obj.__proto__.__proto__... === Constructor.prototype来验证obj是否是Constructor的实例。

参考：从__proto__和prototype来深入理解JS对象和原型链

* typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别

* call()和apply()的区别

apply()的妙用：

Array.prototype.push(arr1, arr2)：数组arr1和arr2合并

Math.max.apply(null,array)：找出数组array中的最大值

参考：apply()与call()的区别

* 描述以下变量的区别：null，undefined或undeclared

* ==和===有什么区别？

规定：

1、null == undefined 为true

2、==操作符任意一边有NaN，则返回false

3、!=操作符任意一边有NaN，则返回true

比较时类型转换的先后顺序图示：

类型转换顺序

参考：前端碎碎念之为什么[] == ![] ?

JS布尔值(Boolean)转换规则

* 什么是事件冒泡？什么是事件捕获？

* 如何从浏览器的URL中获取查询字符串参数？

function getUrlParam(name){

  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');

    var result = window.location.search.substr(1).match(reg);

    return result ? decodeURIComponent(result[2]) : null;

}

* 请解释一下JavaScript的同源策略

浏览器同源策略（SOP）的同源是指两个 URL 的协议/主机名/端口一致。例如，https://www.taobao.com/pages/...，它的协议是 https，主机名是 www.taobao.com，端口是 443。

同源策略作为浏览器的安全基石，其「同源」判断是比较严格的，相对而言，Cookie中的「同站」判断就比较宽松：只要两个 URL 的 eTLD+1 相同即可，不需要考虑协议和端口。其中，eTLD 表示有效顶级域名，注册于 Mozilla 维护的公共后缀列表（Public Suffix List）中，例如，.com、.co.uk、.github.io 等。eTLD+1 则表示，有效顶级域名+二级域名，例如 taobao.com 等。

举几个例子，www.taobao.com 和 www.baidu.com 是跨站，www.a.taobao.com 和 www.b.taobao.com 是同站，a.github.io 和 b.github.io 是跨站(注意是跨站)。

参考：浏览器系列之 Cookie 和 SameSite 属性

* 通过new创建一个对象的时候，构造函数内部有哪些改变？

新建了一个对象A，将对象A的__propo__指向了构造函数的prototype，并且将构造函数的this指向了对象A

// 第一版代码

function objectFactory() {

    var obj = new Object(),

    Constructor = [].shift.call(arguments); //取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数

    obj.__proto__ = Constructor.prototype; //将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性

    Constructor.apply(obj, arguments); //使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性

    return obj;

};

参考：JavaScript深入之new的模拟实现

* 请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

* 继承

function object(o) {

    function F() {}

    F.prototype = o;

    return new F();

}

function prototype(child, parent) {

    var prototype = object(parent.prototype); //将父类的原型赋值给一个空构造函数的原型，并返回构造函数创建的对象

    prototype.constructor = child; //将空对象的构造函数指向子类

    child.prototype = prototype; //子类的原型指向空对象

}

JavaScript深入之继承的多种方式和优缺点

* 简述javascript中this的指向

简单总结就是，如果对应的Reference是对象，this就是指向这个对象，否则this都是指向undefined

1.计算 MemberExpression（简单理解就是()左边部分）的结果赋值给 ref

2.判断 ref 是不是一个 Reference 类型：

    2.1 如果 ref 是 Reference（包括undefined, an Object, a Boolean, a String, a Number, or an environment record），并且 IsPropertyReference(ref) 是 true（也就是base value是对象，base value就是指属性所在的对象或者就是 EnvironmentRecord）, 那么 this 的值为 GetBase(ref) （也就是base value的值）

    2.2 如果 ref 是 Reference，并且 base value 值是 Environment Record, 那么this的值为 ImplicitThisValue(ref)（规范规定，该函数始终返回 undefined）

    2.3 如果 ref 不是 Reference，那么 this 的值为 undefined

参考：JavaScript深入之从ECMAScript规范解读this

* a.x = a = {x: 2};

var a = {n: 1};

var b = a;

a.x = a = {x: 2};

console.log(a.x) // 2

console.log(b.x) // { x: 2 }

参考：Javascript 面试题连等赋值 a.x = a = {n: 2}

* let、const、var 区别：

function retA() {

    var arr = [];

    for(var i = 0; i < 10; i++) {

        arr[i] = function() {

            console.log(i);

        }

    }

    return arr;

}

var testArr = retA();

for(var j = 0; j < testArr.length; j++) {

    testArr[j]();

}

参考：let深入理解---let存在变量提升吗？

MDN中let介绍（与通过 var 声明的有初始化值 undefined的变量不同，通过 let 声明的变量直到它们的定义被执行时才初始化）

JavaScript深入之变量对象（通过活动变量AO理解变量的几个阶段：「创建create、初始化initialize 和赋值assign」）

MDN中的var （声明和未声明变量之间的差异）

* Promise相关面试题

const first = () => (new Promise((resolve,reject)=>{

console.log(3);

let p = new Promise((resolve, reject)=>{

console.log(7);

setTimeout(()=>{

console.log(5);

resolve(6);

},0)

resolve(1);

});

resolve(2);

p.then((arg)=>{

console.log(arg);

});

}));

first().then((arg)=>{

console.log(arg);

});

console.log(4);