2020年前端面试题集锦（奥利给！！！）

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);
// 写出代码执行结果，并解释为什么
// 答案与解析
true false
对于运算符>、<,一般的计算从左向右
第一个题：1 < 2 等于 true, 然后true < 3，true == 1 ，因此结果是true
第二个题：3 > 2 等于 true, 然后true > 1, true == 1 ，因此结果是false
/*********************************/
[typeof null, null instanceof Object]
// 写出代码执行的结果，并解释为什么
//答案与解析
 ["object", false]
1）typeof操作符返回一个字符串，表示未经计算的操作数的类型
  类型          结果
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
函数对象      "function"
任何其他对象  "object"
typeof null === 'object';// 从最开始的时候javascript就是这样
JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签也成为了 0，typeof null就错误的返回了"object"。这算一个bug,但是被拒绝修复，因为影响的web系统太多
2）instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
null不是以Object原型创建，因此返回false
/*********************************/
// 死循环陷阱
var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
    count++;
}
console.log(count);
// 写出正确的打印结果，并解释为什么？
// 答案与解析
这个会陷入一个死循环，2^53是最大的值，因此2^53+1 等于 2^53
/*********************************/
var a = Date(0);
var b = new Date(0);
var c = new Date();
[a === b, b === c, a === c];
// 写出代码执行结果
// 答案与解析
 [false,false,false]
需要注意的是只能通过调用 Date 构造函数来实例化日期对象：以常规函数调用它（即不加 new 操作符）将会返回一个字符串，而不是一个日期对象。另外，不像其他JavaScript 类型，Date 对象没有字面量格式。
a是字符串，b和c是Date对象，并且b代表的是1970年那个初始化时间，而c代表的是当前时间。
/*********************************/
// 逗号表达式
var x = 20;
var temp = {
    x: 40,
    foo: function() {
        var x = 10;
        console.log(this.x);
    }
};
(temp.foo, temp.foo)();
// 写出打印结果
20
逗号操作符，逗号操作符会从左到右计算它的操作数，返回最后一个操作数的值。所以(temp.foo, temp.foo)();等价于var fun = temp.foo; fun();，fun调用时this指向window，所以返回20。
/*********************************/
链式调用
// 实现 (5).add(3).minus(2) 功能
// console.log((5).add(3).minus(2)); // 6
/*
  答案：12
  arguments中c的值还是1不会变成10，  
  因为a函数加了默认值，就按ES的方式解析，ES6是有块级作用域的，所以c的值是不会改变的
*/
Number.prototype.add = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this + number;
};
Number.prototype.minus = function (number) {
    if (typeof number !== 'number') {
        throw new Error('请输入数字～');
    }
    return this - number;
};
console.log((5).add(3).minus(2));
/*********************************/
var a = 1;        
(function a () {            
    a = 2;            
    console.log(a);        
})();
// 答案
ƒ a () {            
    a = 2;            
    console.log(a);        
}
/*
立即调用的函数表达式（IIFE） 有一个 自己独立的 作用域，如果函数名称与内部变量名称冲突，就会永远执行函数本身；所以上面的结果输出是函数本身；
*/
/*********************************/
var a = [0];
if(a){
    console.log(a == true);
}else{
    console.log(a);
}
/*
答案：false
当a出现在if的条件中时，被转成布尔值，而Boolean([0])为true,所以就进行下一步判断 a == true,在进行比较时，[0]被转换成了0，所以0==true为false
js的规则是：  
如果比较的是原始类型的值，原始类型的值会转成数值再进行比较
1 == true  //true   1 === Number(true)
'true' == true //false Number('true')->NaN  Number(true)->1
'' == 0//true
'1' == true//true  Number('1')->1
对象与原始类型值比较，对象会转换成原始类型的值再进行比较。
undefined和null与其它类型进行比较时，结果都为false，他们相互比较时结果为true。
下边的不要了sadfasdfasdfasdfsadfasdffasdfasdf
一些隐式转换
数组从非primitive转为primitive的时候会先隐式调用join变成“0”，string和boolean比较的时候，两个都先转为number类型再比较，最后就是0==1的比较了
var a = [1];
if(a){
    console.log(a == true);
}else{
    console.log(a);
}
// true
!![] //true  空数组转换为布尔值是true,  
!![0]//true  数组转换为布尔值是true  
[0] == true;//false   数组与布尔值比较时却变成了false  
Number([])//0  
Number(false)//0  
Number(['1'])//1
所以当a出现在if的条件中时，被转成布尔值，而Boolean([0])为true,所以就进行下一步判断 a == true,在进行比较时，js的规则是：  
如果比较的是原始类型的值，原始类型的值会转成数值再进行比较
1 == true  //true   1 === Number(true)
'true' == true //false Number('true')->NaN  Number(true)->1
'' == 0//true
'1' == true//true  Number('1')->1
对象与原始类型值比较，对象会转换成原始类型的值再进行比较。
undefined和null与其它类型进行比较时，结果都为false，他们相互比较时结果为true。
*/
/****************************/
const a = [1,2,3],
    b = [1,2,3],
    c = [1,2,4],
    d = "2",
    e = "11";
console.log([a == b, a === b, a > c, a < c, d > e]);
// 写出正确打印结果
// 答案
[false,false,false,true,true] 
// 解析
1）JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。
  对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。
  当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。
  javascript中Array也是对象，所以这里a,b,c显然引用是不相同的，所以这里a==b,a===b都为false。
2）两个数组进行大小比较，也就是两个对象进行比较
  当两个对象进行比较时，会转为原始类型的值，再进行比较。对象转换成原始类型的值，算法是先调用valueOf方法；如果返回的还是对象，再接着调用toString方法。
①valueOf() 方法返回指定对象的原始值。
  JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法；当遇到要预期的原始值的对象时，JavaScript会自动调用它。默认情况下，valueOf方法由Object后面的每个对象继承。 每个内置的核心对象都会覆盖此方法以返回适当的值。如果对象没有原始值，则valueOf将返回对象本身。
②toString() 方法返回一个表示该对象的字符串。
  每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中 type 是对象的类型。
③经过valueOf,toString的处理，所以这里a,c最终会被转换为"1,2,3"与"1,2,4";
3）两个字符串进行比较大小
  上边的数组经转换为字符串之后，接着进行大小比较。
  MDN中的描述是这样的：字符串比较则是使用基于标准字典的 Unicode 值来进行比较的。
  字符串按照字典顺序进行比较。JavaScript 引擎内部首先比较首字符的 Unicode 码点。如果相等，再比较第二个字符的 Unicode 码点，以此类推。
  所以这里 "1,2,3" < "1,2,4",输出true,因为前边的字符的unicode码点都相等，所以最后是比较3和4的unicode码点。而3的Unicode码点是51,4的uniCode码点是52，所以a<c。
"2" > "11"也是同理，这个也是开发中有时会遇到的问题，所以在进行运算比较时需要注意一下。
4）关于valueOf，toString的调用顺序
①javascript中对象到字符串的转换经历的过程如下：
  如果对象具有toString()方法，javaScript会优先调用此方法。如果返回的是一个原始值（原始值包括null、undefined、布尔值、字符串、数字），javaScript会将这个原始值转换为字符串，并返回字符串作为结果。
  如果对象不具有toString()方法，或者调用toString()方法返回的不是原始值，则javaScript会判断是否存在valueOf()方法，如若存在则调用此方法，如果返回的是原始值，javaScript会将原始值转换为字符串作为结果。
  如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警告。
  比如：String([1,2,3]);将一个对象转换为字符串
  var a = [1,2,3];
  a.valueOf = function(){
    console.log("valueOf");
    return this
  }
  a.toString = function(){
    console.log('toString')
    return this
  } 
  String(a);
  因为这里我返回的是this，最后，所以如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警告。
②javaScript中对象转换为数字的转换过程：
  javaScript优先判断对象是否具有valueOf()方法，如具有则调用，若返回一个原始值，javaScript会将原始值转换为数字并作为结果。
  如果对象不具有valueOf()方法，javaScript则会调用toString()的方法，若返回的是原始值，javaScript会将原始值转换为数字并作为结果。
  如果javaScript无法调用toString()和valueOf()返回原始值的时候，则会报一个类型错误异常的警告。
  比如：Number([1,2,3]);将一个对象转换为字符串
/*****************************************/
var a = ?;
if(a == 1 && a== 2 && a== 3){
  console.log(1);
}
/*
比较操作涉及多不同类型的值时候，会涉及到很多隐式转换，其中规则繁多即便是经验老道的程序员也没办法完全记住，特别是用到 `==` 和 `!=` 运算时候。所以一些团队规定禁用 `==` 运算符换用`===` 严格相等。
*/
// 答案一
var aﾠ = 1;
var a = 2;
var ﾠa = 3;
if(aﾠ==1 && a== 2 &&ﾠa==3) {
    console.log("1")
}
/*
  考察你的找茬能力，注意if里面的空格，它是一个Unicode空格字符，不被ECMA脚本解释为空格字符(这意味着它是标识符的有效字符)。所以它可以解释为
  var a_ = 1;
  var a = 2;
  var _a = 3;
  if(a_==1 && a== 2 &&_a==3) {
      console.log("1")
  }
*/
//答案二
var a = {
  i: 1,
  toString: function () {
    return a.i++;
  }
}
if(a == 1 && a == 2 && a == 3) {
  console.log('1');
}
/*
  如果原始类型的值和对象比较，对象会转为原始类型的值，再进行比较。
  对象转换成原始类型的值，算法是先调用valueOf方法；如果返回的还是对象，再接着调用toString方法。
*/
// 答案三
var a = [1,2,3];
a.join = a.shift;
console.log(a == 1 && a == 2 && a == 3);
/*
  比较巧妙的方式，array也属于对象，
  对于数组对象，toString 方法返回一个字符串，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。
  数组 toString 会调用本身的 join 方法，这里把自己的join方法该写为shift,每次返回第一个元素，而且原数组删除第一个值，正好可以使判断成立
*/
// 答案四
var i = 0;
with({
  get a() {
    return ++i;
  }
}) {
  if (a == 1 && a == 2 && a == 3)
    console.log("1");
}
/*
  with 也是被严重建议不使用的对象，这里也是利用它的特性在代码块里面利用对象的 get 方法动态返回 i.
*/
// 答案五
var val = 0;
Object.defineProperty(window, 'a', {
  get: function() {
    return ++val;
  }
});
if (a == 1 && a == 2 && a == 3) {
  console.log('1');
}
/*
  全局变量也相当于 window 对象上的一个属性，这里用defineProperty 定义了 a的 get 也使得其动态返回值。和with 有一些类似。
*/
// 答案六
let a = {[Symbol.toPrimitive]: ((i) => () => ++i) (0)};
if (a == 1 && a == 2 && a == 3) {
  console.log('1');
}
/*
  ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。我们之前在定义类的内部私有属性时候习惯用 __xxx ,这种命名方式避免别人定义相同的属性名覆盖原来的属性，有了 Symbol  之后我们完全可以用 Symbol值来代替这种方法，而且完全不用担心被覆盖。
  除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。Symbol.toPrimitive就是其中一个，它指向一个方法，表示该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。这里就是改变这个属性，把它的值改为一个 闭包 返回的函数。
*/
业务中一般不会写出这种代码,重点还是知识点的考察
/*******************************************/
let a = {n: 1};
let b = a;
a.x = a = {n: 2};
console.log(a.x)  
console.log(b.x)
答案：
undefined {n:2}
注意点：
1: 点的优先级大于等号的优先级
2: 对象以指针的形式进行存储，每个新对象都是一份新的存储地址
解析：
- `var b = a;` b 和 a 都指向同一个地址。
- `.`的优先级高于`=`。所以先执行`a.x`，于是现在的`a`和`b`都是`{n: 1, x: undefined}`。
- `=`是从右向左执行。所以是执行 `a = {n: 2}`，于是`a`指向了`{n: 2}`
- 再执行 `a.x = a`。 这里注意，`a.x` 是最开始执行的，已经是`{n: 1, x: undefined}`这个地址了，而不是一开的的那个`a`，所以也就不是`{n: 2}`了。而且`b`和旧的`a`是指向一个地址的，所以`b`也改变了。
- 但是，`=`右面的a，是已经指向了新地址的新`a`。
- 所以，`a.x = a` 可以看成是`{n: 1, x: undefined}.x = {n: 2}`
- 最终得出
  a = { n: 2 }，
  b = {
     n: 1,
     x: { n: 2 }
  }
/*****************************************/
// 实现一个模板引擎
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18
}
render(template, data); // 我是姓名，年龄18，性别undefined
function render(template,data){
  // your code
}
// 补充代码，使代码可以正确执行
// 代码实现
function render(template, data) {
  const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
  if (reg.test(template)) { // 判断模板里是否有模板字符串
    const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
    template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
    return render(template, data); // 递归的渲染并返回渲染后的结构
  }
  return template; // 如果模板没有模板字符串直接返回
}
/*****************************************/
什么是包装对象(wrapper object)？
// 答案
1）复习一下JS的数据类型，JS数据类型被分为两大类，基本类型和引用类型
①基本类型：Undefined,Null,Boolean,Number,String,Symbol,BigInt
②引用类型：Object,Array,Date,RegExp等，说白了就是对象。
2）其中引用类型有方法和属性，但是基本类型是没有的，但我们经常会看到下面的代码
let name = "marko";
console.log(typeof name); // "string"
console.log(name.toUpperCase()); // "MARKO"
name类型是 string，属于基本类型，所以它没有属性和方法，但是在这个例子中，我们调用了一个toUpperCase()方法，它不会抛出错误，还返回了对象的变量值。
原因是基本类型的值被临时转换或强制转换为对象，因此name变量的行为类似于对象。 除null和undefined之外的每个基本类型都有自己包装对象。也就是：String，Number，Boolean，Symbol和BigInt。 在这种情况下，name.toUpperCase()在幕后看起来如下：
console.log(new String(name).toUpperCase()); // "MARKO"
在完成访问属性或调用方法之后，新创建的对象将立即被丢弃。

const debounce = (fn,delay) => {
  // 介绍防抖函数原理，并实现
  // your code
}
const throttle = (fn,delay = 500) => {
  // 介绍节流函数原理，并实现
   // your code
}
// 答案与解析
/*
  1）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
  适用场景：
    ①按钮提交场景：防止多次提交按钮，只执行最后提交的一次
    ②服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似
*/
// 手写简化版实现
const debounce = (fn,delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this.args);
    },delay)
  }
}
/*
  2）节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次
  适用场景：
    ①拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
    ②缩放场景：监控浏览器resize
    ③动画场景：避免短时间内多次触发动画引起性能问题
*/
// 手写简化版实现
// ①定时器实现
const throttle = (fn,delay = 500) =>{
  let flag = true;
  return (...args) => {
    if(!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this,args);
      flag = true;
    },delay);
  };
}
// ②时间戳实现
const throttle = (fn,delay = 500) => {
  let preTime = Date.now();
  return (...args) => {
    const nowTime = Date.now();
    if(nowTime - preTime >= delay){
        preTime = Date.now();
        fn.apply(this,args);
    }
  }
}

// 首先，new操作符做了什么
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作
创建一个空的简单JavaScript对象（即{}）；
链接该对象（即设置该对象的构造函数）到另一个对象 ；
将步骤1新创建的对象作为this的上下文 ；
如果该函数没有返回对象，则返回this。即创建的这个的新对象，否则，返回构造函数中返回的对象。
// 参考答案：1.简单实现
function newOperator(ctor) {
    if (typeof ctor !== 'function'){
        throw 'newOperator function the first param must be a function';
    }
    // ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);
    var args = Array.prototype.slice.call(arguments, 1);
    // 1.创建一个空的简单JavaScript对象（即{}）
    var obj = {};
    // 2.链接该新创建的对象（即设置该对象的__proto__）到该函数的原型对象prototype上
    obj.__proto__ = ctor.prototype;
    // 3.将步骤1新创建的对象作为this的上下文
    var result = ctor.apply(obj, args);
    // 4.如果该函数没有返回对象，则返回新创建的对象
    var isObject = typeof result === 'object' && result !== null;
    var isFunction = typeof result === 'function';
    return isObject || isFunction ? result : obj;
}
// 测试
function company(name, address) {
    this.name = name;
    this.address = address;
  }
var company1 = newOperator(company, 'yideng', 'beijing');
console.log('company1: ', company1);
// 参考答案：2.更完整的实现
/**
 * 模拟实现 new 操作符
 * @param  {Function} ctor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function newOperator(ctor){
    if(typeof ctor !== 'function'){
      throw 'newOperator function the first param must be a function';
    }
    // ES6 new.target 是指向构造函数
    newOperator.target = ctor;
    // 1.创建一个全新的对象，
    // 2.并且执行[[Prototype]]链接
    // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
    var newObj = Object.create(ctor.prototype);
    // ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);
    // 除去ctor构造函数的其余参数
    var argsArr = [].slice.call(arguments, 1);
    // 3.生成的新对象会绑定到函数调用的`this`。
    // 获取到ctor函数返回结果
    var ctorReturnResult = ctor.apply(newObj, argsArr);
    // 小结4 这些类型中合并起来只有Object和Function两种类型 typeof null 也是'object'所以要不等于null，排除null
    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
    var isFunction = typeof ctorReturnResult === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，那么`new`表达式中的函数调用会自动返回这个新的对象。
    return newObj;
}

// 来一道面试题
var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      return this.a;
    }
}
console.log(foo.bar());
console.log((foo.bar)());
console.log((foo.bar=foo.bar)());
console.log((foo.bar,foo.bar)());
// 答案：
20 20 10 10
// 第一问  foo.bar()
/*
  foo调用，this指向foo , 此时的 this 指的是foo，输出20
*/
// 第二问  (foo.bar)()
/*
  给表达式加了括号，而括号的作用是改变表达式的运算顺序，而在这里加与不加括号并无影响；相当于foo.bar(),输出20
*/
// 第三问  (foo.bar=foo.bar)()
/*
  等号运算，
  相当于重新给foo.bar定义，即
  foo.bar = function () {
    var a = 10;
    return this.a;
  }
  就是普通的复制,一个匿名函数赋值给一个全局变量
  所以这个时候foo.bar是在window作用域下而不是foo = {}这一块级作用域，所以这里的this指代的是window,输出10
*/
// 第四问  (foo.bar,foo.bar)()
/*
  1.逗号运算符，
  2.逗号表达式，求解过程是：先计算表达式1的值，再计算表达式2的值，……一直计算到表达式n的值。最后整个逗号表达式的值是表达式n的值。逗号运算符的返回值是最后一个表达式的值。
  3.其实这里主要还是经过逗号运算符后，就是纯粹的函数了，不是对象方法的引用，所以这里this指向的是window，输出10
  4.第三问，第四问，一个是等号运算，一个是逗号运算，可以这么理解，经过赋值，运算符运算后，都是纯粹的函数，不是对象方法的引用。所以函数指向的this都是windows的。
*/

// 默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。
function sayHi(){
    console.log('Hello,', this.name);
}
var name = 'yideng';
sayHi();
//在调用Hi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。
// 如果在浏览器环境中运行，那么结果就是 Hello,yideng
// 如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。

// 函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun()
function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'yidneg1',
    sayHi: sayHi
}
var name = 'yidneg2';
person.sayHi();
// Hello yideng1
// sayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）

function sayHi(){
    console.log('Hello,', this.name);
}
var person2 = {
    name: 'yideng1',
    sayHi: sayHi
}
var person1 = {
    name: 'yideng2',
    friend: person2
}
person1.friend.sayHi();
// Hello yideng1
//因为只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，我们只关注最后一层，即此处的friend。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'yideng1',
    sayHi: sayHi
}
var name = 'yideng2';
var Hi = person.sayHi;
Hi();
// Htllo yideng2
// Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，我建议大家只需牢牢记住这个格式:XXX.fn();fn()前如果什么都没有，那么肯定不是隐式绑定。

function sayHi(){
    console.log('Hello,', this.name);
}
var person1 = {
    name: 'yideng1',
    sayHi: function(){
        setTimeout(function(){
            console.log('Hello,',this.name);
        })
    }
}
var person2 = {
    name: 'yideng2',
    sayHi: sayHi
}
var name='yideng3';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
    person2.sayHi();
},200);
// Hello yideng3
// Hello yideng3
// Hello yideng2
1.第一条输出很容易理解，setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象
2.第二条输出是不是有点迷惑了？说好XXX.fun()的时候，fun中的this指向的是XXX呢，为什么这次却不是这样了！Why?
其实这里我们可以这样理解: setTimeout(fn,delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。
3.第三条虽然也是在setTimeout的回调中，但是我们可以看出，这是执行的是person2.sayHi()使用的是隐式绑定，因此这是this指向的是person2，跟当前的作用域没有任何关系。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'yideng1',
    sayHi: sayHi
}
var name = 'yideng2';
var Hi = person.sayHi;
Hi.call(person); //Hi.apply(person)
// Hello yideng1  因为使用硬绑定明确将this绑定在了person上。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'yideng1',
    sayHi: sayHi
}
var name = 'yideng2';
var Hi = function(fn) {
    fn();
}
Hi.call(person, person.sayHi); 
// Hello yideng2
输出的结果是 Hello, Wiliam. 原因很简单，Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。
现在，我们希望绑定不会丢失，要怎么做？很简单，调用fn的时候，也给它硬绑定。
var Hi = function(fn) {
    fn.call(this);
}
这样就行了
因为person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。

function sayHi(name){
    this.name = name;
}
var Hi = new sayHi('yideng');
console.log('Hello,', Hi.name); // Hello yideng

var foo = {
    name: 'yideng1'
}
var name = 'yideng2';
function bar() {
    console.log(this.name);
}
bar.call(null); //yideng2
因为这时实际应用的是默认绑定规则。

function Foo() {
    getName = function () { console.log(1); };
    return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log (4);};
function getName() { console.log (5);}
//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
// 2 4 1 1 2 3 3

// 回顾下基础知识
function User(name) {
  var name = name; //私有属性
  this.name = name; //公有属性
  function getName() { //私有方法
    return name;
  }
}
User.prototype.getName = function() { //公有方法
  return this.name;
}
User.name = 'yideng'; //静态属性
User.getName = function() { //静态方法
  return this.name;
}
var yideng = new User('yideng'); //实例化

// 直观的例子
getName();// 函数声明
var getName = function(){
  console.log('函数表达式')
}
getName();// 函数表达式
function getName(){
  console.log('函数声明');
}
getName(); // 函数表达式

new Foo.getName();的优先级是这样的
相当于是:
new (Foo.getName)();
// 点的优先级(18)比new无参数列表(17)优先级高
// 当点运算完后又因为有个括号()，此时就是变成new有参数列表(18)，所以直接执行new，当然也可能有朋友会有疑问为什么遇到()不函数调用再new呢，那是因为函数调用(17)比new有参数列表(18)优先级低
.成员访问(18)->new有参数列表(18)
所以这里实际上将getName函数作为了构造函数来执行，遂弹出2。

1.与第四问的区别就是有括号无括号，这里带括号是new 有参数列表，new 有参数列表的优先级是18，点的优先级也是18，优先级相同按从左到右的顺序执行。
  2.所以这里是先执行有参数列表，再执行点的优先级，最后再函数调用
  3.这里涉及到一个知识点，fn作为构造函数有返回值，在JS中构造函数可以有返回值也可以没有
    a.没有返回值，返回实例化的对象
    b.有返回值，检查其返回值是否为引用类型。
      非引用类型，如基本类型（String,Number,Boolean,Null,Undefined）则与无返回值相同，实际返回其实例化对象。
      引用类型，实际返回值为这个引用类型
  4.这里fn函数返回的是this,this在构造函数中本来就代表当前实例化对象，最终fn函数返回实例化对象。最终调用，实例化对象的getValue函数，因为在Foo构造函数中没有为实例化对象添加任何属性，当前对象的原型对象(prototype)中寻找getName函数。所以输出3。 

最终就是
new ((new Foo()).getName)();
new有参数列表(18)->new有参数列表(18)
先初始化Foo的实例化对象，然后将其原型上的getName函数作为构造函数再次new，所以最终结果为3

function yideng(){}
const a = {}, b = Object.prototype;
console.log(a.prototype === b);
console.log(Object.getPrototypeOf(a) === b);
console.log(yideng.prototype === Object.getPrototypeOf(yideng));
// 写出执行结果，并解释为什么？
// 答案
false true false
//解析：
1）a.prototype === b  =>false
prototype属性是只有函数才特有的属性，当你创建一个函数时，js会自动为这个函数加上prototype属性，值是一个空对象。而实例对象是没有prototype属性的。所以a.prototype是undefined,第一个结果为false。
2）Object.getPrototypeOf(a) === b =>true
首先要明确对象和构造函数的关系，对象在创建的时候，其__proto__会指向其构造函数的prototype属性
Object实际上是一个构造函数（typeof Object的结果为"function"）,使用字面量创建对象和new Object创建对象是一样的，所以a.__proto__也就是Object.prototype，所以Object.getPrototypeOf(a)与a.__proto__是一样的，第二个结果为true
3）yideng.prototype === Object.getPrototypeOf(yideng) =>false
关键点：f.prototype和Object.getPrototypeOf(f)说的不是一回事
①f.prototype 是使用使用 new 创建的 f 实例的原型:
f.prototype === Object.getPrototypeOf(new f()); // true
②Object.getPrototypeOf(f)是 f 函数的原型:
Object.getPrototypeOf(f) === Function.prototype; //true
所以答案是 false
//知识点
__proto__（隐式原型）与prototype（显式原型）
1）是什么？
①显式原型 explicit prototype property：
每一个函数在创建之后都会拥有一个名为prototype的属性，这个属性指向函数的原型对象。(需要注意的是，通过Function.prototype.bind方法构造出来的函数是个例外，它没有prototype属性)
②隐式原型 implicit prototype link：
JavaScript中任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf()。(注意：Object.prototype 这个对象是个例外，它的__proto__值为null)
③二者的关系：
隐式原型指向创建这个对象的函数(constructor)的prototype
2）作用是什么？
①显式原型的作用：用来实现基于原型的继承与属性的共享。
②隐式原型的作用：构成原型链，同样用于实现基于原型的继承。举个例子，当我们访问obj这个对象中的x属性时，如果在obj中找不到，那么就会沿着__proto__依次查找。
3）__proto__的指向：
__proto__的指向到底如何判断呢？根据ECMA定义 'to the value of its constructor’s "prototype" ' ----指向创建这个对象的函数的显式原型。
所以关键的点在于找到创建这个对象的构造函数，接下来就来看一下JS中对象被创建的方式，一眼看过去似乎有三种方式：（1）对象字面量的方式 （2）new 的方式 （3）ES5中的Object.create()。
但是本质上只有一种方式，也就是通过new来创建。为什么这么说呢，首先字面量的方式是一种为了开发人员更方便创建对象的一个语法糖，本质就是 var o = new Object(); o.xx = xx;o.yy=yy; 

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

http://yideng.com?q=<script>alert("你完蛋了")</script>
复制代码

<script>alert('你完蛋了')</script>
复制代码

<script>alert('你完蛋了')</script>
复制代码

<img src="https://xxx.com/info?user=hhh&count=100">

<form id='hacker-form' action="https://xxx.com/info" method="POST">
  <input type="hidden" name="user" value="hhh" />
  <input type="hidden" name="count" value="100" />
</form>
<script>document.getElementById('hacker-form').submit();</script>
复制代码

<a href="https://xxx/info?user=hhh&count=100" taget="_blank">点击进入修仙世界</a>

/*
  给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效
  有效字符串需满⾜：
    1. 左括号必须⽤相同类型的右括号闭合。
    2. 左括号必须以正确的顺序闭合。
  注意空字符串可被认为是有效字符串。
  示例1：
    输⼊: "()"
    输出: true
  示例2：
    输⼊: "()[]{}"
    输出: true
  示例 3:
    输⼊: "(]"
    输出: false
  示例 4:
    输⼊: "([)]"
    输出: false
  示例 5:
    输⼊: "{[]}"
    输出: true
*/
// 思路
出栈、入栈的思想
1）首先，我们通过上边的例子可以分析出什么样子括号匹配是复合物条件的，两种情况。
  ①第一种（非嵌套情况）：{} [] ；
  ②第二种（嵌套情况）：{ [ ( ) ] } 。
除去这两种情况都不是符合条件的。
2）然后，我们将这些括号自右向左看做栈结构，右侧是栈顶，左侧是栈尾。
3）如果编译器中的括号是左括号，我们就入栈（左括号不用检查匹配）；如果是右括号，就取出栈顶元素检查是否匹配。
4）如果匹配，就出栈。否则，就返回 false；
// 代码实现
var isValid = function(s){
  let stack = [];
  var obj = {
     "[": "]",
     "{": "}",
     "(": ")",
  };
  // 取出字符串中的括号
  for (var i = 0; i < s.length;i++){
    if(s[i] === "[" || s[i] === "{" || s[i] === "("){
      // 如果是左括号，就进栈
      stack.push(s[i]);
    }else{
      var key = stack.pop();
      // 如果栈顶元素不相同，就返回false
      if(obj[key] !== s[i]){
        return false;
      }
    }
  }
  return stack.length ===  0
}

function add(a, b) {
    return a + b
}
//现在如果我想给这个 add 函数添加一个输出结果的功能，那么你可能会考虑我直接使用 console.log 不就实现了么。说的没错，但是如果我们想做的更加优雅并且容易复用和扩展，我们可以这样去做：
function withLog (fn) {
    function wrapper(a, b) {
        const result = fn(a, b)
        console.log(result)
        return result
    }
    return wrapper
}
const withLogAdd = withLog(add)
withLogAdd(1, 2)
//其实这个做法在函数式编程里称之为高阶函数，大家都知道 React 的思想中是存在函数式编程的，高阶组件和高阶函数就是同一个东西。我们实现一个函数，传入一个组件，然后在函数内部再实现一个函数去扩展传入的组件，最后返回一个新的组件，这就是高阶组件的概念，作用就是为了更好的复用代码。
// 其实 HOC 和 Vue 中的 mixins 作用是一致的，并且在早期 React 也是使用 mixins 的方式。但是在使用 class 的方式创建组件以后，mixins 的方式就不能使用了，并且其实 mixins 也是存在一些问题的，比如：
隐含了一些依赖，比如我在组件中写了某个 state 并且在 mixin 中使用了，就这存在了一个依赖关系。万一下次别人要移除它，就得去 mixin 中查找依赖
多个 mixin 中可能存在相同命名的函数，同时代码组件中也不能出现相同命名的函数，否则就是重写了，其实我一直觉得命名真的是一件麻烦事。。
雪球效应，虽然我一个组件还是使用着同一个 mixin，但是一个 mixin 会被多个组件使用，可能会存在需求使得 mixin 修改原本的函数或者新增更多的函数，这样可能就会产生一个维护成本
HOC 解决了这些问题，并且它们达成的效果也是一致的，同时也更加的政治正确（毕竟更加函数式了）。