容易出错的js面试题目

js原型对象继承

// 函数表达式  
  var f = function () {
    this.s = 8
    f.prototype.s = 6
  }
  console.log(new f().s) //8 

  // 函数声明 
  function Func() {
    this.name = 1111
    console.log(this)
  }
  Func.prototype.name = 2222
  console.log(new Func().name) //111
  console.log(new Func()) //Func {name: 1111}
 
  //总结：当我们访问一个对象的属性时，首先会从自身查找有没有这个属性，当自身没有时，就会去它的原型对象查找，原型对象还没查找到，就去原型对象的对象上去查找，直到原型链的顶层找到为止

function Func1(name) {
    this.name = name || "sapi"
    this.say = function (prefix) {
      return prefix + this.name + "-self"
    }
  }
  Func1.prototype.say = function (prefix) {
    return prefix + this.name + "-prototype"
  }
  console.log(new Func1().say("welcome")) //welcomesapi-self

  function Func2(name) {
    this.name = name || "sapi"
    // 函数表达式 发现say方法不是Func2的属性
    function say(prefix) {
      return prefix + this.name + "-self"
    }
  }
  Func2.prototype.say = function (prefix) {
    return prefix + this.name + "-prototype"
  }
  console.log(new Func2().say("welcome")) //welcomesapi-prototype

js 中this指向

var obj = {
    fn: function () {
      setTimeout(() => {
        console.log(this)
      })
    }
  }
  obj.fn() //obj 在箭头函数里面没有 this ，箭头函数里面的 this 是继承外面的环境。

  var obj2 = {
    fn: function () {
      setTimeout(function () {
        console.log(this)
      })
    }
  }
  obj2.fn() //window

var obj = {
    say: function () {
      setTimeout(() => {
        console.log(this)
      });
    }
  }
  obj.say(); // obj

  var obj = {
    say: function () {
      console.log(this) // obj
      var fn = () => {
        console.log(this); // obj
        setTimeout(() => {
          console.log(this); // obj
        })
      }
      fn();
    }
  }
  obj.say()
  
  var obj = {
    say: function () {
      var f1 = function () {
        console.log(this); // window, f1调用时,没有宿主对象,默认是window
        setTimeout(() => {
          console.log(this); // window
        })
      };
      f1();
    }
  }
  obj.say()

  var obj = {
    say: function () {
      'use strict';
      var f1 = function () {
        console.log(this); // undefined
        setTimeout(() => {
          console.log(this); // undefined
        })
      };
      f1();
    }
  }
  obj.say()

var let的考察

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
      console.log(i) //5
    }, 1000 * i)
  }
  for (let i = 0; i < 5; i++) {
    setTimeout(function () {
      console.log(i) // 0 1 2 3 4
    }, 1000 * i)
  }

for for in 与for of的区别

array = ["aa", "bb", "cc"]
  //for of遍历的是数组元素值
  for (var item of array) {
    console.log(item) // aa bb cc
  }
  //for in遍历的是数组的索引（即键名）不能直接进行几何运算 通常用for in来遍历对象的键名 包括原型方法method和name属性
  for (var item in array) {
    console.log(item) //0 1 2 string
  }
  for (var i = 0; i < array.length; i++) {
    console.log(i) //0 1 2 number
  }



  console.log(undefined == null) //true
  console.log(1 == true) //true
  console.log(2 == true) //false
  console.log(0 == false) //true
  console.log(0 == '') //true
  console.log(NaN == NaN) //false
  console.log([] == false) //true
  console.log([] == ![]) //true

js 事件循环机制

ES6 async wait函数 定时器 promise对象 考察

  console.log("script start")

  async function async1() {
    await async2()
    console.log("async1 end")
  }
  async function async2() {
    console.log("async2 end")
  }
  async1()
  setTimeout(function () {
    console.log("setTimeout")
  }, 0)

  new Promise(resolve => {
    console.log('Promise');
    resolve()

  }).then(function () {
    console.log('Promise1');
  }).then(function () {
    console.log('Promise2');
  })

  console.log("script end")
  
  // script start
  // async2 end
  // Promise
  // script end
  // async1 end
  // Promise1
  // Promise2
  // setTimeout

ES6异步函数 定时器 promise对象 考察

  console.log("script start")

  async function async1() {
    console.log("async1 end")
    await async2()
  }
  async function async2() {
    console.log("async2 end")
  }
  
  async1()

  setTimeout(function () {
    console.log("setTimeout")
  }, 0)

  new Promise(resolve => {
    console.log('Promise');
    resolve()
  }).then(function () {
    console.log('Promise1');
  }).then(function () {
    console.log('Promise2');
  })

  console.log("script end")

  // script start
  // async1 end
  // async2 end
  // Promise
  // script end
  // Promise1
  // Promise2
  // setTimeout

构造函数对象属性 this指向原型对象变量提升变量作用域问题 js运算优先级考察

构造函数 对象属性 this指向 原型对象 变量提升 变量作用域问题 js运算优先级 考察
  js执行机制：先声明找var function, 后执行
  
  function Foo() {
    //Foo函数执行更改变量赋值
    getName = function () {
      console.log("1");
    };
    //this指向window
    return this;
  }
  //构造函数静态属性 getName
  Foo.getName = function () {
    console.log("2");
  };
  //构造函数原型属性 getName
  Foo.prototype.getName = function () {
    console.log("3");
  };
  //声明一个全局变量 getName
  var getName = function () {
    console.log("4");
  };
 //声明一个函数getName
  function getName() {
    console.log("5");
  }

  Foo.getName(); // 2
  getName(); // 4
  Foo().getName(); // 1 
  getName(); //  1
  new Foo.getName(); // 2
  new Foo().getName(); // 3
  new new Foo().getName(); // 3

如何实现每执行一次函数，结果都会自增1

//如何实现每执行一次函数，结果都会自增1
  function f() {
    var cnt = 0;
    return function () {
      return ++cnt;
    }
  }
  var fa = f(); //将函数f的的返回值给变量fn
  console.log(fa()); //1
  console.log(fa()); //2
  console.log(fa()); //3
  console.log(fa()); //4
  console.log(fa()); //5
  console.log(fa()); //6

  
  var i = 0;

  function ch() {
    return ++i;
  }
  console.log(ch())
  console.log(ch())
  console.log(ch())

JavaScript中Function和var 的预解析

JavaScript(下列简称JS)的预解析主要有函数参数，函数声明，var变量的声明。JS中语句执行步骤为：

1.自身函数参数

2.函数声明

3.var变量

4.其他语句的执行。

接下来，我们将具体看看代码的体现：

function b() {
    console.log(a); // function
    var a = 10;

    function a() {}
    a = 100;
    console.log(a); // 100
  }
  b();

  (function (num) {
    console.log(num); //100
    var num;
    console.log(num); //100
  })(100);

  (function (num) {
    console.log(num); // function
    var num;

    console.log(num); // function
    function num() {};
  })();

具体执行过程为：

**1.执行函数参数-->无函数参数

2.执行函数声明--> function a(){}

3.执行var 声明 --> var a;与函数声明重名，被忽略

4.执行其他语句:

console.log(a) -->function,

a = 10;

console.log(a) --> 10;**

容易出错的js面试题目

继续阅读

Js复制内容到剪贴板

浏览器js运行解析

layui时间选择框，选择时间段

实现计算器功能

js高级学习笔记（b站尚硅谷）-3-对象

2018年不想被web前端开发淘汰，你需要掌握哪些技术？

js 日期格式化以及获取某天的零点和23:59

Angularjs的$http方法的success和then的区别

jquery,ajax,jsonp例子+springmvc后台

attachEvent 与addEventListener 区别

用JS模拟实现二叉树(含遍历)

关于 underscore 中模板引擎的应用示例

【JavaScript语法】函数对象的浅拷贝、深拷贝

JS--运算符

数组和类数组

jquery_126_demo