Js知识点及刷题记录

知识点：匿名函数，函数作用域，异步执行的理解

一，微信小程序中page页面里面的函数定义与js的差异
js中：

function sum(a,b){
  let   c = a+b
  return c
}
console.log(sum(1,2))

而page里面的函数定义为

sum: function(a,b) {
  let c = a +b
  return c
      },

形式上稍微有点不同
函数可以理解为一种特殊的健值，对于一个对象里面的函数引用this.sum()为引用函数执行结果，this.sum为引用的函数定义，可以理解对象属性引用

二，函数变量的定义及作用域

js中有4种变量定义的方法
var x = 1，页面局部变量：函数内定义，函数为不能访问。
var x= 1, 页面全局变量：函数外定义函数内可以访问
局部变量在函数执行完毕后销毁，全局变量在页面关闭后销毁。
x = 1，全局变量：函数内定义，函数外也可以访问。
所有数据变量都属于 window 对象。
let x = 1，块内定义：块内定义，块外不可以访问
const x = 1，常量定义：初始化后，值不可以再修改

function sum(){
  var a = 1
  b = 2
  console.log(a)
    let c = 3
  {
  let d = 3
   console.log(c)
  }
  console.log(d)
}

sum()

牛客试题

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log(this.foo);  
        console.log(self.foo);  
        (function() {
            console.log(this.foo);  
            console.log(self.foo);  
        }());
    }
};
myObject.func();
/* 输出的结果为bar,bar,undefined,bar,第一个bar是this指的是引用myObject 这个对
象，而第二个self定义的为myObject的复制引用，第三个为闭包匿名函数，其拥有两个特性：
1，IIFE(立即执行函数表达式)中的this指向window，由window调用。自动
执行函数里面的变量都属于私有变量，外部访问需要加window转换，所以那个this是window。
2,从包含它的父函数中找到了指向myObject对象的self，IIFE具有全局作用域，当本
作用域里面没有相关定义的变量时，通过作用域链向上查找，
*/

this关键字的几种用法，
1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
https://www.runoob.com/js/js-this.html

let和var的区别，var在函数内定义是函数内通用，而let是块内定义块内通用

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}
varTest()
function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
letTest()

三，数据类型
基本数据类型NNUSB
Number Null(无该变量) Undefined（变量无数值） String Boolean Symbol（es6新增）
var x = 1.3，数值型Number
var x = "hello"，字符串String
引用数据类型对象(Object)、数组(Array)、函数(Function)
var x = [1,2,3]，列表
var x = {one:1,two:2}，对象

数据以及对象遍历

var x = [1,2,5]
var y = {a:1,b:2,c:5}
// 列表遍历，i是index下标
for (i in x){
console.log(i)
console.log(x[i])
}
// 对象遍历，i是key
for (i in y){
console.log(i)
console.log(y[i])
}
// 对象遍历可以用属性的方式引用key后面的value
console.log(y["b"])
console.log(y.b)

四，函数异常执行捕捉

function hello (a,b){
  c = a+b
  console.log(c)
}
try {
helloo(1,2)
}
catch(err){
console.log(err)
}
console.log(666)

五，函数同步与异步

同步：下一行代码必须等待上一行代码执行完之后才能执行
异步：下一行代码不必等待上一行代码执行完就可以执行

async function hello (a,b){
  console.log(c = a+b)
}
// 用await便可将异步执行变为同步执行
await hello(1,2)
console.log(666)

异步执行时console.log(666)不必等hello()执行完再执行

牛客试题

for(var i=0;i<5;++i){
    setTimeout(function(){
        console.log(i+ ' ');
    },100);
}

由于异步setTimeout函数存在，需要在主线程for循环结束之后，才开始进行异步函数的执行，因此每次循环的执行，异步队列中存放了5次setTimeout(),然后会按照队列的顺序依次执行，且共同访问的是同一个变量。所以每次结果都是5

链接：[https://www.nowcoder.com/questionTerminal/071f74e92c5e4605b9c5f4af16054c14?toCommentId=415706](https://www.nowcoder.com/questionTerminal/071f74e92c5e4605b9c5f4af16054c14?toCommentId=415706)
来源：牛客网

解决方法：

1）可以利用匿名函数创建立即执行函数：

for(var i = 0; i < 5; i++){

(function(num){

setTimeout(function(){

console.log(num + ")

},100)

}))(i)

}
//创建立即执行函数并传入参数i。 因为函数的参数是按值传递的，所以i的当前值就赋值给了num，并传递给了setTimeout 中的闭包，在闭包中保存了i当前值的一个副本。

2）利用es6的Let命令：

for(let i = 0; i < 5; i++){

setTimeout(function(){

console.log(i + ");

}，100)；

}
let 命令是可以生成块及作用域

六，常用函数
整形函数

var x = "1"
console.log(parseInt (x))
// 各类数值转化函数
console.log(Number(""));           //0
console.log(Number(null));         //0
console.log(Number(undefined));    //NaN
 
console.log(parseInt(""));        //NaN
console.log(parseInt(null));      //NaN
console.log(parseInt(undefined)); //NaN
 
console.log(null == 0); //false
console.log(undefined == 0); //false

七，switch语句

function myFunction(){
    var x;
    switch ("hello"){
        case "hello":x="今天是星期日";
        break;
        case 1:x="今天是星期一";
        break;
        case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
        break;
        case 4:x="今天是星期四";
        break;
        case 5:x="今天是星期五";
        break;
        case 6:x="今天是星期六";
        break;   
    }
  console.log(x)
}
 myFunction()

八，undefine 和 null

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

undefined：是所有没有赋值变量的默认值，自动赋值。
null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。是一个对象
NaN：数据类型是 number
九，JavaScript 闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();

九，对象与原型prototype 继承
js对象有以下几种方式创建
1，实例化对象

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

2，直接按键值创造对象

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

3，函数构造器创建对象（类似于class）

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    function changeName(name)
    {
        this.lastname=name;
    }
}
// 然后实例
var myFather=new person("John","Doe",50,"blue");

原型prototype 继承
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法，当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。来自菜鸟教程
https://www.runoob.com/js/js-object-prototype.html
在对象中需要增加属性的时候就需要在原型中进行增加

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};