字节前端经典面试题（附答案）

有哪些可能引起前端安全的问题?

• 跨站脚本 (Cross-Site Scripting, XSS): ⼀种代码注⼊⽅式, 为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯, 其注⼊⽅式很简单包括但不限于 JavaScript / CSS / Flash 等；
• iframe的滥⽤: iframe中的内容是由第三⽅来提供的，默认情况下他们不受控制，他们可以在iframe中运⾏JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端⽤户体验；
• 跨站点请求伪造（Cross-Site Request Forgeries，CSRF）: 指攻击者通过设置好的陷阱，强制对已完成认证的⽤户进⾏⾮预期的个⼈信息或设定信息等某些状态更新，属于被动攻击
• 恶意第三⽅库: ⽆论是后端服务器应⽤还是前端应⽤开发，绝⼤多数时候都是在借助开发框架和各种类库进⾏快速开发，⼀旦第三⽅库被植⼊恶意代码很容易引起安全问题。

写代码：实现函数能够深度克隆基本类型

浅克隆：

function shallowClone(obj) {
   
  let cloneObj = {
   };

  for (let i in obj) {
   
    cloneObj[i] = obj[i];
  }

  return cloneObj;
}

深克隆：

• 考虑基础类型
• 引用类型
  • RegExp、Date、函数 不是 JSON 安全的
  • 会丢失 constructor，所有的构造函数都指向 Object
  • 破解循环引用

function deepCopy(obj) {
   
  if (typeof obj === 'object') {
   
    var result = obj.constructor === Array ? [] : {
   };

    for (var i in obj) {
   
      result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
    }
  } else {
   
    var result = obj;
  }

  return result;
}

<script src=’xxx’ ’xxx’/>外部js文件先加载还是onload先执行，为什么？

onload 是所以加载完成之后执行的

了解 this 嘛，bind，call，apply 具体指什么

它们都是函数的方法

call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2]) ：ES6 之前用来展开数组调用, foo.appy(null, [])，ES6 之后使用 … 操作符

• New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
• 如果需要使用 bind 的柯里化和 apply 的数组解构，绑定到 null，尽可能使用 Object.create(null) 创建一个 DMZ 对象

四条规则：

• 默认绑定，没有其他修饰（bind、apply、call)，在非严格模式下定义指向全局对象，在严格模式下定义指向 undefined

function foo() {
   
     console.log(this.a); 
}

var a = 2;
foo();

• 隐式绑定：调用位置是否有上下文对象，或者是否被某个对象拥有或者包含，那么隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。而且，对象属性链只有上一层或者说最后一层在调用位置中起作用

function foo() {
   
  console.log(this.a);
}

var obj = {
   
  a: 2,
  foo: foo,
}

obj.foo(); // 2

• 显示绑定：通过在函数上运行 call 和 apply ，来显示的绑定 this

function foo() {
   
  console.log(this.a);
}

var obj = {
   
  a: 2
};

foo.call(obj);

显示绑定之硬绑定

function foo(something) {
   
  console.log(this.a, something);

  return this.a + something;
}

function bind(fn, obj) {
   
  return function() {
   
    return fn.apply(obj, arguments);<