1.原型和原型链
2.作用域和闭包
3.异步和单线程
被称为JavaScript的三座大山
原型和原型链：
在JavaScript中，数组，对象和函数被称为引用类型，他们都有一个__proto__属性，该属性是一个对象（我们称之为隐式原型）
arr数组的构造函数是Array，Array构造函数中有一个prototype属性，（我们暂时称之为显式原型）
arr是构造函数的实例对象，arr中的__proto__对象指向构造函数中的prototype对象
接下来是一个简单的demo
1 //创建一个构造函数
2 function Animal(name){
3 this.name = name
4 }
5 Animal.prototype.eat = function(){
6 console.log(‘Animal--eat‘)
7 }
8 // 用new初始化一个Animal的实例对象
9 var dog = new Animal(‘xiaohuang‘)
10
11 console.log(dog.name)
12 console.log(dog.eat())
输出结果为
看一下dog对象中有什么属性
调用dog的属性和方法时，会先从dog本身去查找，如果dog本身没有那个属性或方法，就会去dog的__proto__原型中去查找，而__proto__又指向Animal的prototype（看第二个constructor对象，指向Animal），这就是原型链
再来一个demo
1 //创建一个构造函数
2 function Animal(name){
3 this.name = name
4 }
5 //创建一个Hashiqi的构造函数
6 function Hashiqi(){
7 }
8 Animal.prototype.eat = function(){
9 console.log(‘Animal--eat‘)
10 }
11 Hashiqi.prototype.color = function(){
12 console.log(‘Hashiqi---color‘)
13 }
14 //改变prototype的指向
15 Animal.prototype = new Hashiqi()
16 // 用new初始化一个Animal的实例对象
17 var dog = new Animal(‘xiaohuang‘)
18
19 console.log(dog.name)
20 console.log(dog.eat())
21 console.log(dog.color())
这个demo中改变了Animal的prototype，将其指向一个Hashiqi的实例对象，我们来看结果。此时dog.eat()会报错，dog.color正常输出
第三个demo，比较上档次一点
1 <div id="wrapper">this is wrapper</div>
2 <script>
3 //创建一个Elem的构造函数
4 function Elem(id){
5 //获取dom元素
6 this.id = document.getElementById(id)
7 }
8 Elem.prototype.html = function(val){
9 //如果val为空，则打印dom元素的innerhtml值
10 if(val == null){
11 console.log(this.id.innerHTML)
12 //返回this，可以用来进行链式操作
13 return this
14 }else{
15 this.id.innerHTML = val
16 return this
17 }
18 }
19 //绑定事件
20 Elem.prototype.on = function(type, fn){
21 this.id.addEventListener(type,fn)
22 }
23
24 </script>
首先new一个实例对象： var el = new Elem(‘wrapper‘)
el.html(‘ ookook ‘).on(‘click‘, function(){ console.log(‘this is ook‘) } )
接下来点击ookook就会打印this is ook
作用域和闭包：
JavaScript中有函数作用域和全局作用域（es6中用let声明的变量具有块作用域）
函数作用域是在一个函数中有效，全局作用域在全局都有效
*函数内部如果变量和全局变量重名了，则在该函数内部，以函数变量为准
*函数外部无法访问函数内部定义的变量（该变量是函数私有的），不过函数内部可以访问函数外部的全局变量
1.变量提升
javascript中声明并定义一个变量时，会把声明提前，以下会先打印出undefined，再打印出10
1 console.log(a) 2 var a = 10 3 console.log(a)
相当于
1 var a 2 console.log(a) 3 a = 10 4 console.log(a)
函数声明也是，以下函数相当于把整个fn提到作用域的最上面，所以调用fn时会正常打印jack
1 fn(‘jack‘)
2 function fn (name){
3 console.log(name)
4 }
不过函数表达式不行，以下是一个函数表达式，JavaScript会把var fn提到作用域最上面，没有吧函数提上去，所以会报错
1 fn("jack");
2
3 var fn = function(name) {
4 console.log(name);
5 };
2.闭包
使用场景：1.函数作为参数传递 2.函数作为返回值传递
三言两语说不清楚，我们来看一个demo
1 function F1(){
2 var a = 100
3 //返回一个函数
4 return function(){
5 console.log(a)
6 }
7 }
8
9 var a = 200;
10 var f1 = F1(); //将f1指向F1
11 f1()
第11行输出结果是100
第11行调用f1的时候要打印a变量，return的函数中没有a变量，所以a是个自由变量，要去声明该函数（不是调用）的父级作用域去查找，即functin F1中，a=100
闭包在开发中的应用
以下函数的目的是：当_list中没有val值时，返回true并把val添加到_list中
这个demo使用了闭包，在外部无法直接访问_list这个Fn函数的私有变量，这样可以保证数据不被污染，提高了安全性
1 function Fn(){
2 var _list = []
3
4 return function(val){
5 if(_list.indexOf(val) < 0){
6 _list.push(val)
7 return true
8 }else{
9 return false
10 }
11 }
12 }
13
14 var f1 = Fn()
15 console.log(f1(10)) //true
16 console.log(f1(10)) //false
17 console.log(f1(20)) //true
18 console.log(f1(20)) //false
异步和单线程
异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助
异步和同步的区别: 异步会阻塞程序的执行，同步不会阻塞程序的执行，
比如只有在执行完alert后才会打印100，如果你不去点击弹框的确定键，console.log就永远不会执行，这就是同步的阻塞
第二个demo中，会马上就打印100，两秒后再打印setTimeout，这就是异步不会阻塞程序执行
1 alert(‘ook‘) 2 console.log(100)
1 setTimeout(function(){
2 console.log(‘setTimeout‘)
3 },2000)
4 console.log(100)
在哪些场景中会异步执行
JavaScript中以下三种情况会异步执行 1.定时任务：setTimeout, setInterval 2.网络请求：ajax请求，动态加载<img>图标 3.事件绑定：比如‘click’等
看一个demo
以下函数的目的是在页面中创建5个a标签，点击第一个a标签打印1，点击第二个a标签打印2，以此类推。可执行结果都是5，为什么呢？
因为click是一个异步事件，计算机不知道用户什么时候会点击，所以不能够是同步，不然用户不点击，程序就永远无法往下执行。
异步事件会先拿出来放到一个队列里，等同步事件执行完了，再来执行异步事件
所以当你点击a标签的时候，i已经循环到5了（i是全局变量。这也涉及到了js作用域：该函数没有定义i变量，就要去声明该函数的父级作用域中去找，而不是调 用）
1 for(var i = 0; i < 5; i++){
2 //创建一个a标签
3 var a = document.createElement(‘a‘)
4 a.innerHTML = i + 1 + ‘<br>‘
5 //给a标签绑定click事件
6 a.addEventListener(‘click‘, function(e){
7 e.preventDefault()
8 console.log(i)
9 })
10 //将a标签添加到wrpper中
11 document.querySelector(‘#wrapper‘).appendChild(a)
12 }
解决这个问题就可以用闭包，用一个function把给a添加时间的地方包起来，(function（i）{})(i) 这是函数的自调用。注意：自调用前要加分号，也就是第4行结束要加分号，不然js会分不清何时开始自调用，会报错
1 for(var i = 0; i < 5; i++){
2 //创建一个a标签
3 var a = document.createElement(‘a‘)
4 a.innerHTML = i+1 + ‘<br>‘;
5 //给a标签绑定click事件
6 (function(i){
7 a.addEventListener(‘click‘, function(e){
8 e.preventDefault()
9 console.log(i+1)
10 })
11 })(i)
12 //将a标签添加到wrpper中
13 document.querySelector(‘#wrapper‘).appendChild(a)
14 }
原文地址：https://www.cnblogs.com/zhaozhaoli/p/10051265.html