【大前端攻城狮之路】面试集锦

function test() {
    console.log(a); // undefined
    a = 123;      
}

test();

function test() {
    var a;
    console.log(a); // undefined
    a = 123;      
}

test();

function test() {} // 函数式声明
let test = function() {} // 字面量声明

console.log(f);
function f() {
    console.log(1);
}

// 相当于以下代码
function f() {
    console.log(1);
}
console.log(f);

foo(); //1
 
var foo;
 
function foo () {
    console.log(1);
}
 
foo = function () {
    console.log(2);
}

function ga() {

    let x=1;
}

function gb(y) {

    return x+y;

}


gb(2) //调用发生报错，因为拿不到x的值

gb.call(ga,2); //使gb在ga环境中执行，可以拿到x，运行正常    

function gg(x,y,z){

    let a=Array.prototype.slice.call(arguments，1，2) //通过slice方法获取到了第二个参数

    return a; //返回[2]

}

gg(1,2,3)
// arguments是一个类数组对象，它本身不能调用数组的slice方法，使用call将执行slice方法的对象由数组变为了arguments。

function gg(x,y,z){

    let d=[1,2]

    let a=Array.prototype.slice.apply(arguments,d) //通过slice方法获取到了第二个参数

    return a; //返回[2]

}

gg(1,2,3)

function Parent(name) {

    this.name = name;

    this.sayHello = function() {
        alert(name);
    }
}

function Child(name) {
    // 子类的this传给父类
    Parent.call(this, name);
}

let parent = new Parent("张三");

let child = new Child("李四");

parent.sayHello();

child.sayHello();

function ga() {
    let x=1;

    (function gb(y) {
        return x+y;
    }).bind(this) //使用bind将gb函数的执行上下文绑定到ga上
}

gb(2) //运行正常，得到3

// 有些情况下为了方便我们可以直接将ga绑定，而不用在调用的时候再使用apply。

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

var obj = {
	a: 2,
	foo: foo
}
obj.foo()

// 以上两者情况 `this` 只依赖于调用函数前的对象，优先级是第二个情况大于第一个情况

// 以下情况是优先级最高的，`this` 只会绑定在 `c` 上，不会被任何方式修改 `this` 指向
var c = new foo()
c.a = 3
console.log(c.a)

1
2
undefined
3

const test = testGen();
 
test.next()
// { value: ‘1‘, done: false }
 
test.next()
// { value: ‘2‘, done: false }
 
test.next()
// { value: ‘ending‘, done: true }
 
test.next()
// { value: undefined, done: true }

// 函数有三个状态 1，2，return
function* testGen() {
    yield ‘1‘;
    yield ‘2‘;
    return ‘end‘;
}

async function fn(args) {
  // ...
}
 
// 等同于
 
function fn(args) {
  return spawn(function* () {
    // ...
  });
}
 
function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

function Promise (executor) {
  var self = this;//resolve和reject中的this指向不是promise实例，需要用self缓存
  self.state = ‘padding‘;
  self.value = ‘‘;//缓存成功回调onfulfilled的参数
  self.reson = ‘‘;//缓存失败回调onrejected的参数
  self.onResolved = []; // 专门存放成功的回调onfulfilled的集合
  self.onRejected = []; // 专门存放失败的回调onrejected的集合
  function resolve (value) {
    if(self.state===‘padding‘){
      self.state===‘resolved‘;
      self.value=value;
      self.onResolved.forEach(fn=>fn())
    }
  }
  function reject (reason) {
    self.state = ‘rejected‘;
    self.value = reason;
    self.onRejected.forEach(fn=>fn())
  }
  try{
    executor(resolve,reject)
  }catch(e){
    reject(e)
  }
}


Promise.prototype.then=function (onfulfilled,onrejected) {
  var self=this;
  if(this.state===‘resolved‘){
    onfulfilled(self.value)
  }
  if(this.state===‘rejected‘){
    onrejected(self.value)
  }
  if(this.state===‘padding‘){
    this.onResolved.push(function () {
      onfulfilled(self.value)
    })
  }
}

Promise.prototype.catch = function (onrejected) {
  return this.then(null, onrejected)
};

Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason)
  })
};
Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    resolve(value);
  })
};

Promise.all=function (promises) {
  return new Promise((resolve,reject)=>{
    let results=[],i=0;
    for(let i=0;i<promises.length;i++){
      let p=promises[i];
      p.then((data)=>{
        processData(i,data)
      },reject)
    }
    function processData (index,data) {
      results[index]=data;
      if(++i==promises.length){
        resolve(results)
      }
    }
  })
};
//在每个promise的回调中添加一个resolve（就是在当前的promise.then中添加），有一个状态改变，就让race的状态改变
Promise.race=function (promises) {
  return new promises((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      let p=promises[i];
      p.then(resolve,reject)
    }
  })