前端面试题整理

一.var、 let、 const的区别

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4. const 引用的对象可改变，因为const引用的指针不改变，里面的内容可改变

   const person = {
        name : 'joke',
    }
    
    person.name = 'test'
    
    console.log(person.name)

二：== 与 === 区别

==先转换为同类型再比较值，===不转换，严格比较。

三：箭头函数和普通函数

1.箭头函数不能用于构造函数，不能用new

2.this指向不同，普通函数指向调用他的对象，如果在构造函数中，则指向创建的对象实例；

箭头函数不会创建this，申明时捕获上下文的this供自己使用，并不会改变。

var name = "1";
function wrap(){
  this.name="2";
  let func=() => {
    console.log(this.name);
  }
  func();
}
let en=new wrap();


//运行结果
2

箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。

3.箭头函数不绑定arguments，取而代之用rest参数…解决

每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]


let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined


let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

4.其他

（1）.箭头函数不能Generator函数，不能使用yeild关键字。
（2）.箭头函数不具有prototype原型对象。
（3）.箭头函数不具有super。
（4）.箭头函数不具有new.target。

总结：

(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
(2).普通函数的this指向调用它的那个对象

四：call与apply

作用：更改this指向

1.通过 call 和 apply 来this的指向时，不传任何参数，则默认为将this指向修改为 windows

2.有参数时，this 指向第一个参数

3.当需要传递参数时，call可以直接写多个参数，apply需要用数组方式传递

var name = 'Evan';
var age = 20;
var person = {
    name: 'Hillary',
    age: 19,
    sayIntroduce: function () {
        return "Hello, My name is " + this.name + " and I'm " + this.age + ' years old.'
    },
    sayHobby: function (val1, val2) {
        return "I'm " + this.name + ", I like " + val1 + " and " + val2 + ".";
    }
}
var person1 = {
    name: 'Coy'
}
console.log(person.sayIntroduce()); // Hello, My name is Hillary and I'm 19 years old.

 // 当没有参数时，默认将this指向 window
 console.log(person.sayIntroduce.call()); // Hello, My name is Evan and I'm 20 years old.
 console.log(person.sayIntroduce.apply()); // Hello, My name is Evan and I'm 20 years old.

// 将this指向 person1，由于person1中没有age属性，因此为 undefined
console.log(person.sayIntroduce.call(person1)); // Hello, My name is Coy and I'm undefined years old.
console.log(person.sayIntroduce.apply(person1)); // Hello, My name is Coy and I'm undefined years old.

console.log(person.sayHobby.call(person1, 'swimming', 'hiking')); // I'm Coy, I like swimming and hiking.
console.log(person.sayHobby.apply(person1, ['swimming', 'hiking'])); // I'm Coy, I like swimming and hiking.


//构造函数应用
function Grade(max, min, average) {
    this.max = max;
    this.min = min;
    this.average = average;
}
 
function Subject(subjectName,max, min, average) {
    Grade.call(this, max, min, average);
    this.subjectName = subjectName;
}
var math = new Subject('math', 99, 60, 80);
console.log(math);
// 输出对象Subject{subjectName:math,max:99,min:60,average:80}

五：跨域问题：

解决方案：

1.proxy代理

2.Nginx代理

3.CORS：

简单请求：不会触发CORS预检请求

预检请求：必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。

跨源资源共享（CORS） - HTTP | MDN

六：国际化解决方案

阿里提供的kiwi，还有i18n包的方案。