JavaScript 基础

1. JavaScript的数据类型

基本数据类型：number、string、boolean、undefined、null
复杂数据类型：Object、Array、Function、Date、RegExp、Error
全局数据类型：Math、Date

2. 闭包closure

简单的说闭包就是一个函数能够访问外部函数的变量。比如：
```
function a(x){
 var tmp = 3;
 function b(y){
   console.log(x+y+(++tmp));
 }
 b(tmp);
}
```
a函数中的b函数就是闭包，b函数可以使用a函数中的局部变量、参数，最典型的闭包应该是下面这样：将定义在函数中的函数作为返回值：
```
function a(x) {
   var tmp = 3;
   function b(y) {
       console.log(x+y+(++tmp));
   }
   return b;
}
a(1)(2)  // --> 7
```
闭包的另外一种作用就是隔离作用域，请看下面这段代码：
```
 for(var i = 0; i < 2; i++) {
     setTimeout(function(){
         console.log(i);
     }， 0);
 }
 // output 2 2
```
上面这段代码的执行结果是2，2，而不是0，1，因为在for循环结束后才执行setTimeout中的函数，i的值已经变成了2，这就是没有隔离作用域造成的。

请看下面改造过后的代码：
```
 for(var i = 0; i < 2; i++){
     (function(i){
         setTimtout(function(){
             console.log(i);
         },0);
     })(i);
 }
 // output 0,1
```
这样就会输出0、1，其中的立即执行函数创建了一个作用域（函数作用域），隔离了外界的作用域。
闭包的缺点是，内部闭包函数可以访问外部函数的变量，会导致外部函数的变量不能被释放，如果闭包嵌套过多，会导致内存释放不及时，进而导致内存占用过高，所以要合理使用闭包。

3. 作用域和作用域链

JS的作用域指的是变量的作用范围，内部作用域由函数的形参、实参、局部变量以及函数构成，内部作用域和外部作用域一层层的链接起来形成作用域链，当在函数内部要访问一个变量时，首先查找函数自己内部作用域有没有这个变量，如果没有就到这个对象的原型中去查找，如果还是没有的话，就到该作用域所在的作用域中找，直到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域存在了，比如：

   var t = 4;
   function foo() {
       var tmp = 12;
       function bar() {
           var tmp = 34;
           console.log(t+' '+' '+tmp);
       }
   }

bar找t变量的过程就是，先到自己的内部作用域中找，发现没有找到，然后到bar所在的最近的外部变量中找，也就是foo的内部作用域，还是没有找到，再到window的作用域中找，结果找到了。

4. call和apply

改变函数内部this指针的指向函数 call 和 apply，建设要改变fn函数内部的this指向，指向obj,那么可以使用 fn.call(obj)，或者 fn.apply(obj)。
call和apply的区别，在与参数，它们两个方法的第一个参数都是一样的，表示调用该函数的对象，apply的第二个参数是数组，是[arg1,arg2,arg3]这种形式，而call是(arg1,arg2,arg3)这样的形式。
除此之外，还有一个bind函数。 var bar = fn.bind(obj), 那么，fn中的this就指向obj对象了，bind函数就返回新的函数，这个函数内部的this指针指向obj对象。

5. 继承（）

先定义一个A，

   function A(name){
       this.name = name;
   }
   A.prototype.sayName = function() {
       return this.name;
   }

原型继承
```
 function B(age) {
     this.age = age;
 }

 // 通过原型继承
 B.prototype = new A('test');
 var foo = new B(18);
 console.log(foo.age); // 18, age 是 B 本身的属性
 console.log(foo.name); // test, 等价于 foo.__proto__.name
 console.log(foo.sayName()); // test, 等价于 foo.__proto__.sayName()
 console.log(foo.toString()); // "[object Object]", 等价于foo.__proto__.proto__.proto__.toString()
```
这样B通过原型继承了A，在new B的时候，foo中有个隐藏的属性proto指向构造函数的prototype对象，在这里是A对象实例，A对象里面也有一个隐藏的属性proto,指向A构造函数的prototype对象，这个对象里面又有一个proto指向Object的prototype

这种方式的缺第一个缺点是所有子类共享父类实例，如果某一个子类修改了父类，其他的子类在继承的时候，会造成意想不到的后果。第二个缺点是在构造子类实例的时候，不能给父类传递参数。
构造函数继承
```
 function B(age,name) {
     this.age = age;
     A.call(this, name);
 }
 var foo = new B(18, 'test');
 console.log(foo.name); // test
 console.log(foo.age); // 18
 console.log(foo.sayName); // undefined
```
采用这种方式继承是把A中的属性加到this上面，这样name相当于就是B的属性，sayName不在A的构造函数中，所以访问不到sayName。这种方法的缺点是父类的prototype中的函数不能复用。

原型继承+构造函数继承

 function B(age, name) {
     this.age = age;
     A.call(this, name);
 }
 B.prototype = new A('test');
 var foo = new B(18, 'test');
 console.log(foo.name); // test
 console.log(foo.age); // 18
 console.log(foo.sayName); // test

6. JS变量提升

请看下面代码

   var bar = 1;
   function test() {
       console.log(bar); // undefined
       var bar = 2;
       console.log(bar); // 2
   }
   test();

为什么在test函数中会出现上述结果呢，这就是JavaScript的变量提升了，虽然变量bar的定义在后面，不过浏览器在解析的时候，会把变量的定义放到最前面，上面的test函数相当于:

   var bar = 1;
   function test() {
       var bar;
       console.log(bar); // undefined
       bar = 2;
       console.log(bar); // 2
   }
   test();

再看一个例子：

   var foo = function() { console.log(1);}
   function foo() {
       console.log(2);
   }
   foo(); // 1
   // 同样的，函数定义也会提升到最前面，上面的代码相当于
   var foo;
   function foo() {console.log(2);}
   foo = function() { console.log(1);}
   foo(); // 1

事件模型、事件绑定、委托机制
内存泄漏与垃圾回收
跨域
同源策略
Web安全
- XSS
- CSRF

12. 前端性能优化（提高网页加载速度，降低白屏率）

- 总的原则：减少请求，减小体积
- 使用CSS Sprites，可以减少image请求数
- 使用CDN，减小服务器负担
- 预加载css、js，懒加载图片
- 压缩js、css、img文件，减小文件体积

13. Promise

举个例子：加载图片

function loadImageAsync(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      resolve();
      console.log('load success');
    }
    img.onerror = function() {
      reject(new Error(`Could not load image at ${url}`));
      console.log('load fail');
    }
    img.src = url;
  });
}

loadImageAsync('https://www.baidu.com/img/bd_logo1.png')
  .then(_ => {
    console.log('load success');
  })
  .catch(err => {
    console.log(`error occured ${err}`);
  })

例子

给字符串定义一个 repeatify 功能，当传入一个整数n时，会返回重复n次的字符串的结果。例如：
```
console.log('hello'.repeatify(3)); // 输出 hellohellohello
```


if (!String.prototype.repeatify) {
  String.prototype.repeatify = function(count = 1) {
    let result = '';
    let currentValue = this.toString();
    for (let i = 0; i < count; i++) {
      result += currentValue;
    }
    return result;
  };
}

FrankFan / blog

JavaScript 基础 #3