前端二面面试题（附答案）

var proxy = new Proxy(target, handler);

var target = {   name: 'poetries' }; var logHandler = {   get: function(target, key) {     console.log(`${key} 被读取`);     return target[key];   },   set: function(target, key, value) {     console.log(`${key} 被设置为 ${value}`);     target[key] = value;   } } var targetWithLog = new Proxy(target, logHandler);
 targetWithLog.name; // 控制台输出：name 被读取 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 console.log(target.name); // 控制台输出: others

// 由于拦截函数总是返回35，所以访问任何属性都得到35var proxy = new Proxy({}, {  get: function(target, property) {    return 35;  }});
proxy.time // 35proxy.name // 35proxy.title // 35

var proxy = new Proxy({}, {  get: function(target, property) {    return 35;  }});
let obj = Object.create(proxy);obj.time // 35

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。handler.getPrototypeOf()
// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。handler.setPrototypeOf()

// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。handler.isExtensible()

// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。handler.preventExtensions()
// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。handler.getOwnPropertyDescriptor()

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。andler.defineProperty()

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。handler.has()
// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。handler.get()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。handler.set()
// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。handler.deleteProperty()
// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。handler.ownKeys()
// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。handler.apply()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。handler.construct()

// commonJS requireconst proxyPolyfill = require('proxy-polyfill/src/proxy')();
// Your environment may also support transparent rewriting of commonJS to ES6:import ProxyPolyfillBuilder from 'proxy-polyfill/src/proxy';const proxyPolyfill = ProxyPolyfillBuilder();
// Then use...const myProxy = new proxyPolyfill(...);

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

function foo() {  console.log(this.a);}
var obj = {  a: 2,  foo: foo,}
obj.foo(); // 2

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);  };}
var obj = {  a: 2}
var bar = bind(foo, obj);

function foo(a) {  this.a = a;}
var bar = new foo(2);console.log(bar.a)

// 用法如下:function fn1(x) {  return x + 1;}function fn2(x) {  return x + 2;}function fn3(x) {  return x + 3;}function fn4(x) {  return x + 4;}const a = compose(fn1, fn2, fn3, fn4);console.log(a(1)); // 1+4+3+2+1=11

function compose(...fn) {  if (!fn.length) return (v) => v;  if (fn.length === 1) return fn[0];  return fn.reduce(    (pre, cur) =>      (...args) =>        pre(cur(...args))  );}

// 在index.html中直接写WebSocket，设置服务端的端口号为 9999let ws = new WebSocket('ws://localhost:9999');// 在客户端与服务端建立连接后触发ws.onopen = function() {    console.log("Connection open.");     ws.send('hello');};// 在服务端给客户端发来消息的时候触发ws.onmessage = function(res) {    console.log(res);       // 打印的是MessageEvent对象    console.log(res.data);  // 打印的是收到的消息};// 在客户端与服务端建立关闭后触发ws.onclose = function(evt) {  console.log("Connection closed.");}; 

function currying(fn, ...args) {  const length = fn.length;  let allArgs = [...args];  const res = (...newArgs) => {    allArgs = [...allArgs, ...newArgs];    if (allArgs.length === length) {      return fn(...allArgs);    } else {      return res;    }  };  return res;}
// 用法如下：// const add = (a, b, c) => a + b + c;// const a = currying(add, 1);// console.log(a(2,3))

// scr 加载默认图片，data-src 保存实施懒加载后的图片// <img src="./default.jpg" data-src="https://xxx.jpg" alt="" />let imgs = [...document.querySelectorAll("img")];const len = imgs.length;
let lazyLoad = function() {    let count = 0;    let deleteImgs = [];    // 获取当前可视区的高度    let viewHeight = document.documentElement.clientHeight;    // 获取当前滚动条的位置(距离顶部的距离,等价于document.documentElement.scrollTop)    let scrollTop = window.pageYOffset;    imgs.forEach((img) => {        // 获取元素的大小，及其相对于视口的位置，如 bottom 为元素底部到网页顶部的距离        let bound = img.getBoundingClientRect();        // 当前图片距离网页顶部的距离        // let imgOffsetTop = img.offsetTop;
        // 判断图片是否在可视区内，如果在就加载（两种判断方式）        // if(imgOffsetTop < scrollTop + viewHeight)         if (bound.top < viewHeight) {            img.src = img.dataset.src;  // 替换待加载的图片 src            count++;            deleteImgs.push(img);            // 最后所有的图片加载完毕后需要解绑监听事件            if(count === len) {                document.removeEventListener("scroll", imgThrottle);            }        }    });    // 图片加载完会从 `img` 标签组成的 DOM 列表中删除    imgs = imgs.filter((img) => !deleteImgs.includes(img));}
window.onload = function () {    lazyLoad();};// 使用 防抖/节流 优化一下滚动事件let imgThrottle = debounce(lazyLoad, 1000);// 监听 `scroll` 事件window.addEventListener("scroll", imgThrottle);

function Foo(name) {  this.name = name;}
Foo.prototype.myName = function () {  return this.name;}
// 继承属性，通过借用构造函数调用function Bar(name, label) {  Foo.call(this, name);  this.label = label;}
// 继承方法，创建备份Bar.prototype = Object.create(Foo.prototype);
// 必须设置回正确的构造函数，要不然在会发生判断类型出错Bar.prototype.constructor = Bar;
 // 必须在上一步之后Bar.prototype.myLabel = function () {  return this.label;}
var a = new Bar("a", "obj a");
a.myName(); // "a"a.myLabel(); // "obj a"

// slice(start,[end])// slice(start,[end])方法：该方法是对数组进行部分截取，该方法返回一个新数组// 参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）。// 包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；// 如果出现负数就把负数与长度相加后再划分。// slice中的负数的绝对值若大于数组长度就会显示所有数组// 若参数只有一个，并且参数大于length，则为空。// 如果结束位置小于起始位置，则返回空数组// 返回的个数是end-start的个数// 不会改变原数组var arr = [1,2,3,4,5,6]/*console.log(arr.slice(3))//[4,5,6] 从下标为0的到3，截取3之后的数console.log(arr.slice(0,3))//[1,2,3] 从下标为0的地方截取到下标为3之前的数console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/// 个人总结：slice的参数如果是正数就从左往右数，如果是负数的话就从右往左边数，// 截取的数组与数的方向一致，如果是2个参数则截取的是数的交集，没有交集则返回空数组 // ps：slice也可以切割字符串，用法和数组一样，但要注意空格也算字符
// splice(start,deletecount,item)// start：起始位置// deletecount：删除位数// item：替换的item// 返回值为被删除的字符串// 如果有额外的参数，那么item会插入到被移除元素的位置上。// splice:移除，splice方法从array中移除一个或多个数组，并用新的item替换它们。//举一个简单的例子 var a=['a','b','c']; var b=a.splice(1,1,'e','f');  console.log(a) //['a', 'e', 'f', 'c'] console.log(b) //['b']
 var a = [1, 2, 3, 4, 5, 6];//console.log("被删除的为：",a.splice(1, 1, 8, 9)); //被删除的为：2// console.log("a数组元素：",a); //1,8,9,3,4,5,6
// console.log("被删除的为：", a.splice(0, 2)); //被删除的为：1,2// console.log("a数组元素：", a) //3,4,5,6console.log("被删除的为：", a.splice(1, 0, 2, 2)) //插入 第二个数为0，表示删除0个  console.log("a数组元素：", a) //1,2,2,2,3,4,5,6
// split(字符串)// string.split(separator,limit)：split方法把这个string分割成片段来创建一个字符串数组。// 可选参数limit可以限制被分割的片段数量。// separator参数可以是一个字符串或一个正则表达式。// 如果separator是一个空字符，会返回一个单字符的数组，不会改变原数组。var a="0123456";  var b=a.split("",3);  console.log(b);//b=["0","1","2"]// 注意：String.split() 执行的操作与 Array.join 执行的操作是相反的。

function Person(name) {  this.name = name;}
Person.prototype.constructor = Person

createDocumentFragment()    //创建一个DOM片段createElement()   //创建一个具体的元素createTextNode()   //创建一个文本节点

appendChild(node)removeChild(node)replaceChild(new,old)insertBefore(new,old)

getElementById();getElementsByName();getElementsByTagName();getElementsByClassName();querySelector();querySelectorAll();

getAttribute(key);setAttribute(key, value);hasAttribute(key);removeAttribute(key);

function *foo(x) {  let y = 2 * (yield (x + 1))  let z = yield (y / 3)  return (x + y + z)}let it = foo(5)console.log(it.next())   // => {value: 6, done: false}console.log(it.next(12)) // => {value: 8, done: false}console.log(it.next(13)) // => {value: 42, done: true}

// 使用 * 表示这是一个 Generator 函数// 内部可以通过 yield 暂停代码// 通过调用 next 恢复执行function* test() {  let a = 1 + 2;  yield 2;  yield 3;}let b = test();console.log(b.next()); // >  { value: 2, done: false }console.log(b.next()); // >  { value: 3, done: false }console.log(b.next()); // >  { value: undefined, done: true }

// cb 也就是编译过的 test 函数function generator(cb) {  return (function() {    var object = {      next: 0,      stop: function() {}    };
    return {      next: function() {        var ret = cb(object);        if (ret === undefined) return { value: undefined, done: true };        return {          value: ret,          done: false        };      }    };  })();}// 如果你使用 babel 编译后可以发现 test 函数变成了这样function test() {  var a;  return generator(function(_context) {    while (1) {      switch ((_context.prev = _context.next)) {        // 可以发现通过 yield 将代码分割成几块        // 每次执行 next 函数就执行一块代码        // 并且表明下次需要执行哪块代码        case 0:          a = 1 + 2;          _context.next = 4;          return 2;        case 4:          _context.next = 6;          return 3;        // 执行完毕        case 6:        case "end":          return _context.stop();      }    }  });}