* __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中的最大值
* 描述以下变量的区别:null,undefined或undeclared
* ==和===有什么区别?
规定:
1、null == undefined 为true
2、==操作符任意一边有NaN,则返回false
3、!=操作符任意一边有NaN,则返回true
比较时类型转换的先后顺序图示:
类型转换顺序* 什么是事件冒泡?什么是事件捕获?
* 如何从浏览器的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;
};
* 请解释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中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]();
}
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);
参考:深入理解Promise运行原理 (手动实现Promise)
这一次,彻底弄懂 JavaScript 执行机制 (setTimeout、setInterval、Promise、宏任务、微任务)
* 请详述你对vue生命周期的理解,包括每个阶段数据对象和DOM的特点
created之前不能访问data,method等属性、方法,mounted之前不能操作DOM节点,update是有双向绑定的数据变化时调用
参考:vue 生命周期深入 (父子组件的生命周期)
vue生命周期解析 (手动实现生命周期方法)
* Vue原理深入理解
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
深入剖析:Vue核心之虚拟DOM (key的作用)
* Javascript中普通 for 循环和 forEach 的性能哪个好?为什么?
* Vuex工作原理
参考:vuex工作原理详解
* Vue-Router原理
理解vue-router中(router-link router-view $router $route)实现原理(手动实现)
* 隐式类型转换
* flex布局
* Generator
* webpack基础
[webpack] devtool里的7种SourceMap模式是什么鬼?
网友评论